style: auto-fix lint and format

Merge branch 'dev' into feat/impeccable-uiux-fixes
feat(manage): unified management page layout (#5758 )
2026-05-28 08:59:26 +00:00 · 2026-05-28 10:58:29 +02:00 · 2026-05-28 10:56:46 +02:00 · 2026-05-28 08:09:15 +00:00 · 2026-05-28 07:48:00 +00:00 · 2026-05-28 03:50:55 +00:00
247 changed files with 2952 additions and 5621 deletions
@@ -3,9 +3,6 @@ version = 1
 [[analyzers]]
 name = "javascript"

-  [analyzers.meta]
-  plugins = ["react"]
-  environment = ["nodejs"]
-
-[[transformers]]
-name = "prettier"
+[analyzers.meta]
+plugins = ["react"]
+environment = ["nodejs"]
@@ -33,6 +33,7 @@ body:
      options:
        # The below comment is used to insert a new version with on-release.yml
        #NEXT_VERSION#
+        - 1.62.0
        - 1.61.0
        - 1.60.1-beta.1
        - 1.60.0
@@ -24,6 +24,38 @@ env:
  TURBO_SCM_HEAD: ${{ github.sha }}

 jobs:
+  lint-format-autofix:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+          ref: ${{ github.head_ref }}
+
+      - name: Setup
+        uses: ./tooling/github/setup
+
+      - name: Get changed files
+        id: changed
+        run: |
+          git diff --name-only --diff-filter=ACMR origin/${{ github.base_ref }}...HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx' > /tmp/changed-files
+          echo "count=$(wc -l < /tmp/changed-files | tr -d '[:space:]')" >> $GITHUB_OUTPUT
+
+      - name: Auto-fix lint + format
+        if: steps.changed.outputs.count != '0'
+        run: |
+          xargs -r -a /tmp/changed-files pnpm exec oxlint --fix || true
+          xargs -r -a /tmp/changed-files pnpm exec oxfmt --write
+
+      - name: Commit fixes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "style: auto-fix lint and format"
+
  lint:
    runs-on: ubuntu-latest
    timeout-minutes: 10
@@ -54,7 +86,7 @@ jobs:
        uses: ./tooling/github/setup

      - name: Format
-        run: pnpm turbo format --affected --continue -- --cache --cache-location node_modules/.cache/.prettiercache
+        run: pnpm turbo format --affected --continue

  typecheck:
    runs-on: ubuntu-latest
@@ -66,7 +66,7 @@ jobs:
      - uses: actions/setup-node@v6
        if: env.SKIP_RELEASE == 'false'
        with:
-          node-version: 24.15.0
+          node-version: 24.16.0
          package-manager-cache: false
      - run: npm i -g pnpm
        if: env.SKIP_RELEASE == 'false'
@@ -1 +1 @@
-24.15.0
+24.16.0
@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 120,
+  "endOfLine": "lf",
+  "sortPackageJson": true,
+  "ignorePatterns": ["**/*.cjs", "**/lang/**", "static-data/**", "CHANGELOG.md"]
+}
@@ -0,0 +1,37 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "typescript", "unicorn", "oxc", "react", "import", "jsx-a11y"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "pedantic": "off",
+    "perf": "off",
+    "style": "off",
+    "restriction": "off",
+    "nursery": "off"
+  },
+  "rules": {
+    "eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
+    "typescript/consistent-type-imports": ["warn", { "prefer": "type-imports", "fixStyle": "separate-type-imports" }],
+    "typescript/no-non-null-assertion": "error",
+    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+    "unicorn/no-new-array": "warn",
+    "unicorn/no-useless-spread": "warn",
+    "unicorn/no-useless-length-check": "warn",
+    "unicorn/no-useless-fallback-in-spread": "warn",
+    "jsx-a11y/prefer-tag-over-role": "warn",
+    "oxc/const-comparisons": "warn",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/no-children-prop": "warn",
+    "jsx-a11y/no-autofocus": "warn",
+    "jsx-a11y/img-redundant-alt": "warn",
+    "react/react-in-jsx-scope": "off"
+  },
+  "options": {
+    "reportUnusedDisableDirectives": "off"
+  },
+  "ignorePatterns": ["**/*.config.js", "**/*.config.mjs", "**/*.cjs", "**/lang/*.d.json.ts", ".next/**"],
+  "settings": {
+    "react": { "version": "19" }
+  }
+}
@@ -31,6 +31,5 @@ scopeRangeRegex: "(?:const|let|var)\\s+t\\s*=\\s*(?:await\\s+)?(?:getScopedI18n|
 # refactorTemplates:
 #  - i18n.get("$1")

-
 # If set to true, only enables this custom framework (will disable all built-in frameworks)
-monopoly: true
+monopoly: true
@@ -15,9 +15,7 @@
      "request": "launch",
      "command": "pnpm docker:dev",
      "cwd": "${workspaceFolder}",
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "lint fix",
@@ -25,9 +23,7 @@
      "request": "launch",
      "command": "pnpm lint:fix",
      "cwd": "${workspaceFolder}",
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "format fix",
@@ -35,9 +31,7 @@
      "request": "launch",
      "command": "pnpm format:fix",
      "cwd": "${workspaceFolder}",
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "db push",
@@ -69,9 +63,7 @@
      "request": "launch",
      "command": "pnpm test",
      "cwd": "${workspaceFolder}",
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "test ui",
@@ -79,9 +71,7 @@
      "request": "launch",
      "command": "pnpm test:ui",
      "cwd": "${workspaceFolder}",
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
    }
  ]
 }
@@ -1,13 +1,6 @@
 {
-  "eslint.workingDirectories": [
-    {
-      "mode": "auto"
-    }
-  ],
-  "eslint.experimental.useFlatConfig": true,
  "typescript.tsdk": "node_modules\\typescript\\lib",
  "js/ts.implicitProjectConfig.experimentalDecorators": true,
-  "prettier.configPath": "./tooling/prettier/index.mjs",
  "cSpell.words": [
    "ajnart",
    "cqmin",
@@ -34,11 +27,7 @@
  ],
  "i18n-ally.dirStructure": "auto",
  "i18n-ally.displayLanguage": "en",
-  "i18n-ally.enabledFrameworks": [
-    "custom"
-  ],
-  "i18n-ally.localesPaths": [
-    "packages/translation/src/lang",
-  ],
-  "i18n-ally.keystyle": "nested",
+  "i18n-ally.enabledFrameworks": ["custom"],
+  "i18n-ally.localesPaths": ["packages/translation/src/lang"],
+  "i18n-ally.keystyle": "nested"
 }
@@ -1,3 +1,9 @@
+## [1.61.1](https://github.com/homarr-labs/homarr/compare/v1.61.0...v1.61.1) (2026-05-18)
+
+### Bug Fixes
+
+* **downloads-widget:** increase name column default width ratio ([e9142c0](https://github.com/homarr-labs/homarr/commit/e9142c0dbcaca6cd9215b5292a2d139d96919b51))
+
 ## [1.61.1-beta.1](https://github.com/homarr-labs/homarr/compare/v1.61.0...v1.61.1-beta.1) (2026-05-08)

 ### Performance Improvements
@@ -1,4 +1,4 @@
-FROM node:24.15.0-alpine AS base
+FROM node:24.16.0-alpine AS base

 FROM base AS builder
 RUN apk add --no-cache libc6-compat
@@ -1,30 +0,0 @@
-import baseConfig from "@homarr/eslint-config/base";
-import nextjsConfig from "@homarr/eslint-config/nextjs";
-import reactConfig from "@homarr/eslint-config/react";
-
-/** @type {import('typescript-eslint').Config} */
-export default [
-  {
-    ignores: [".next/**"],
-  },
-  ...baseConfig,
-  ...reactConfig,
-  ...nextjsConfig,
-  {
-    files: ["public/sw.js"],
-    languageOptions: {
-      globals: {
-        self: "readonly",
-        clients: "readonly",
-        skipWaiting: "readonly",
-        importScripts: "readonly",
-        caches: "readonly",
-        fetch: "readonly",
-      },
-    },
-    rules: {
-      "@typescript-eslint/no-unsafe-call": "off",
-      "@typescript-eslint/no-unsafe-member-access": "off",
-    },
-  },
-];
@@ -7,13 +7,12 @@
    "build": "pnpm with-env next build",
    "clean": "git clean -xdf .next .turbo node_modules",
    "dev": "pnpm with-env next dev",
-    "format": "prettier --check . --ignore-path ../../.gitignore",
-    "lint": "eslint",
+    "format": "oxfmt --check .",
+    "lint": "oxlint",
    "start": "pnpm with-env next start",
    "typecheck": "tsc --noEmit",
    "with-env": "dotenv -e ../../.env --"
  },
-  "prettier": "@homarr/prettier-config",
  "dependencies": {
    "@dnd-kit/core": "catalog:",
    "@dnd-kit/modifiers": "catalog:",
@@ -92,8 +91,6 @@
    "zod": "catalog:"
  },
  "devDependencies": {
-    "@homarr/eslint-config": "workspace:^0.2.0",
-    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
    "@types/chroma-js": "catalog:",
    "@types/node": "catalog:",
@@ -102,9 +99,7 @@
    "@types/react-dom": "catalog:",
    "@types/swagger-ui-react": "catalog:",
    "concurrently": "catalog:",
-    "eslint": "catalog:",
    "node-loader": "catalog:",
-    "prettier": "catalog:",
    "typescript": "catalog:"
  }
 }
@@ -2,13 +2,14 @@

 import type { PropsWithChildren } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { createTheme, DirectionProvider, MantineProvider } from "@mantine/core";
+import { DirectionProvider, MantineProvider } from "@mantine/core";
 import dayjs from "dayjs";

 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { parseCookies, setClientCookie } from "@homarr/common";
 import { colorSchemeCookieKey } from "@homarr/definitions";
+import { theme } from "@homarr/ui";

 export const CustomMantineProvider = ({
  children,
@@ -23,6 +24,7 @@ export const CustomMantineProvider = ({
        theme={createTheme({
          primaryColor: "red",
          autoContrast: true,
+          defaultRadius: "sm",
        })}
      >
        {children}
@@ -59,7 +59,7 @@ export default async function InviteUsagePage(props: InviteUsagePageProps) {
            {t("subtitle")}
          </Text>
        </Stack>
-        <Card withBorder w={64 * 6} maw="90vw">
+        <Card w={64 * 6} maw="90vw">
          <RegistrationForm invite={invite} />
        </Card>
        <Text size="xs" c="gray.5" ta="center">
@@ -9,7 +9,7 @@ import { z } from "zod/v4";

 import { signIn } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import type { useForm } from "@homarr/form";
+import type { UseFormReturnType } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -162,7 +162,7 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c

 interface SubmitButtonProps {
  isPending: boolean;
-  form: ReturnType<typeof useForm<FormType, (values: FormType) => FormType>>;
+  form: UseFormReturnType<FormType>;
  provider: "credentials" | "ldap";
 }

@@ -198,7 +198,7 @@ const PasswordForgottenCollapse = ({ username }: PasswordForgottenCollapseProps)
        {tForgotPassword("label")}
      </Anchor>

-      <Collapse in={visible}>
+      <Collapse expanded={visible}>
        <Card>
          <Stack gap="xs">
            <Text size="sm">{tForgotPassword("description")}</Text>
@@ -37,7 +37,7 @@ export default async function Login(props: LoginProps) {
            {t("subtitle")}
          </Text>
        </Stack>
-        <Card withBorder w={64 * 6} maw="90vw">
+        <Card w={64 * 6} maw="90vw">
          <LoginForm
            providers={env.AUTH_PROVIDERS}
            oidcClientName={env.AUTH_OIDC_CLIENT_NAME}
@@ -1,70 +1,27 @@
 "use client";

-import { useCallback, useRef } from "react";
-import { Box, LoadingOverlay, Stack } from "@mantine/core";
+import { Box, Stack } from "@mantine/core";

-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";

 import { BoardCategorySection } from "~/components/board/sections/category-section";
 import { BoardEmptySection } from "~/components/board/sections/empty-section";
 import { BoardBackgroundVideo } from "~/components/layout/background";
-import { fullHeightWithoutHeaderAndFooter } from "~/constants";
-import { useIsBoardReady } from "./_ready-context";
-
-let boardName: string | null = null;
-
-export const updateBoardName = (name: string | null) => {
-  boardName = name;
-};
-
-type UpdateCallback = (prev: RouterOutputs["board"]["getHomeBoard"]) => RouterOutputs["board"]["getHomeBoard"];
-
-export const useUpdateBoard = () => {
-  const utils = clientApi.useUtils();
-
-  const updateBoard = useCallback(
-    (updaterWithoutUndefined: UpdateCallback) => {
-      if (!boardName) {
-        throw new Error("Board name is not set");
-      }
-      utils.board.getBoardByName.setData({ name: boardName }, (previous) =>
-        previous ? updaterWithoutUndefined(previous) : previous,
-      );
-    },
-    [utils],
-  );
-
-  return {
-    updateBoard,
-  };
-};

 export const ClientBoard = () => {
  const board = useRequiredBoard();
  const currentLayoutId = useCurrentLayout();
-  const isReady = useIsBoardReady();

  const fullWidthSortedSections = board.sections
    .filter((section) => section.kind === "empty" || section.kind === "category")
    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);

-  const ref = useRef<HTMLDivElement>(null);
-
  return (
    <Box h="100%" pos="relative">
      <BoardBackgroundVideo />
-      <LoadingOverlay
-        visible={!isReady}
-        transitionProps={{ duration: 500 }}
-        loaderProps={{ size: "lg" }}
-        h={fullHeightWithoutHeaderAndFooter}
-      />
-      <Stack ref={ref} h="100%" style={{ visibility: isReady ? "visible" : "hidden" }}>
+      <Stack h="100%">
        {fullWidthSortedSections.map((section) =>
          section.kind === "empty" ? (
-            // Unique keys per layout to always reinitialize the gridstack
            <BoardEmptySection key={`${currentLayoutId}-${section.id}`} section={section} />
          ) : (
            <BoardCategorySection key={`${currentLayoutId}-${section.id}`} section={section} />
@@ -41,13 +41,11 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
    }),
    // eslint-disable-next-line no-restricted-syntax
    page: async ({ params }: { params: Promise<TParams> }) => {
-      const session = await auth();
-      const integrations = await getIntegrationsWithPermissionsAsync(session);
-
-      const board = await getInitialBoard(await params);
+      const resolvedParams = await params;
      const queryClient = getQueryClient();

-      // Prefetch item data
+      const [board, session] = await Promise.all([getInitialBoard(resolvedParams), auth()]);
+
      const itemsMap = board.items.reduce((acc, item) => {
        const existing = acc.get(item.kind);
        if (existing) {
@@ -58,17 +56,20 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
        return acc;
      }, new Map<WidgetKind, Item[]>());

-      for (const [kind, items] of itemsMap) {
-        await prefetchForKindAsync(kind, queryClient, items).catch((error) => {
-          logger.error(
-            new ErrorWithMetadata(
-              "Failed to prefetch widget",
-              { widgetKind: kind, itemCount: items.length },
-              { cause: error },
-            ),
-          );
-        });
-      }
+      const [integrations] = await Promise.all([
+        getIntegrationsWithPermissionsAsync(session),
+        ...Array.from(itemsMap).map(([kind, items]) =>
+          prefetchForKindAsync(kind, queryClient, items).catch((error) => {
+            logger.error(
+              new ErrorWithMetadata(
+                "Failed to prefetch widget",
+                { widgetKind: kind, itemCount: items.length },
+                { cause: error },
+              ),
+            );
+          }),
+        ),
+      ]);

      return (
        <HydrationBoundary state={dehydrate(queryClient)}>
@@ -109,7 +109,7 @@ const AddMenu = () => {
  }, [openAppSelectModal, createItem]);

  return (
-    <Menu position="bottom-end" withArrow>
+    <Menu position="bottom-end">
      <Menu.Target>
        <HeaderButton w="auto" px={4}>
          <Group gap={4} wrap="nowrap">
@@ -183,7 +183,7 @@ const SelectBoardsMenu = () => {
  const { data: boards = [] } = clientApi.board.getAllBoards.useQuery();

  return (
-    <Menu position="bottom-end" withArrow>
+    <Menu position="bottom-end">
      <Menu.Target>
        <HeaderButton w="auto" px={4}>
          <IconReplace stroke={1.5} />
@@ -1,42 +1,19 @@
 "use client";

 import type { PropsWithChildren } from "react";
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
-
-import { clientApi } from "@homarr/api/client";
-import { useRequiredBoard } from "@homarr/boards/context";
+import { createContext, useCallback, useContext } from "react";

 const BoardReadyContext = createContext<{
-  isReady: boolean;
  markAsReady: (id: string) => void;
 } | null>(null);

 export const BoardReadyProvider = ({ children }: PropsWithChildren) => {
-  const pathname = usePathname();
-  const utils = clientApi.useUtils();
-  const board = useRequiredBoard();
-  const [readySections, setReadySections] = useState<string[]>([]);
-
-  // Reset sections required for ready state
-  useEffect(() => {
-    return () => {
-      setReadySections([]);
-    };
-  }, [pathname, utils]);
-
-  useEffect(() => {
-    setReadySections((previous) => previous.filter((id) => board.sections.some((section) => section.id === id)));
-  }, [board.sections.length, setReadySections]);
-
-  const markAsReady = useCallback((id: string) => {
-    setReadySections((previous) => (previous.includes(id) ? previous : [...previous, id]));
-  }, []);
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const markAsReady = useCallback((_id: string) => {}, []);

  return (
    <BoardReadyContext.Provider
      value={{
-        isReady: board.sections.length === readySections.length,
        markAsReady,
      }}
    >
@@ -54,13 +31,3 @@ export const useMarkSectionAsReady = () => {

  return context.markAsReady;
 };
-
-export const useIsBoardReady = () => {
-  const context = useContext(BoardReadyContext);
-
-  if (!context) {
-    throw new Error("BoardReadyProvider is required");
-  }
-
-  return context.isReady;
-};
@@ -24,6 +24,7 @@ export const BoardMantineProvider = ({
    },
    primaryColor: "primaryColor",
    autoContrast: true,
+    defaultRadius: "sm",
    fontSizes: {
      "2xl": rem(24),
      "3xl": rem(28),
@@ -83,7 +83,7 @@ export const ColorSettingsContent = ({ board }: Props) => {
            <Anchor onClick={toggle}>{showPreview ? t("common.preview.hide") : t("common.preview.show")}</Anchor>
          </Grid.Col>
          <Grid.Col span={12}>
-            <Collapse in={showPreview}>
+            <Collapse expanded={showPreview}>
              <Stack>
                <ColorsPreview previewColor={form.values.primaryColor} />
                <ColorsPreview previewColor={form.values.secondaryColor} />
@@ -15,7 +15,7 @@ export const InitFinish = async () => {
  const tFinish = await getScopedI18n("init.step.finish");

  return (
-    <Card w={64 * 6} maw="90vw" withBorder>
+    <Card w={64 * 6} maw="90vw">
      <Stack>
        <Text>{tFinish("description")}</Text>

@@ -34,7 +34,7 @@ export const InitGroup = () => {
  };

  return (
-    <Card w={64 * 6} maw="90vw" withBorder>
+    <Card w={64 * 6} maw="90vw">
      <form onSubmit={form.onSubmit(handleSubmitAsync)}>
        <Stack>
          <TextInput
@@ -13,7 +13,7 @@ interface FileInfoCardProps {
 export const FileInfoCard = ({ file, onRemove }: FileInfoCardProps) => {
  const tFileInfo = useScopedI18n("init.step.import.fileInfo");
  return (
-    <Card w={64 * 12 + 8} maw="90vw">
+    <Card w={64 * 12 + 8} maw="90vw" withBorder={false}>
      <Group justify="space-between" align="center" wrap="nowrap">
        <Group>
          <Text fw={500} lineClamp={1} style={{ wordBreak: "break-all" }}>
@@ -20,7 +20,7 @@ export const InitImport = () => {

  if (!file) {
    return (
-      <Card w={64 * 12 + 8} maw="90vw" withBorder>
+      <Card w={64 * 12 + 8} maw="90vw">
        <ImportDropZone
          loading={isPending}
          updateFile={(file) => {
@@ -30,7 +30,7 @@ export const InitSettings = () => {
  return (
    <form onSubmit={form.onSubmit(handleSubmitAsync)}>
      <Stack>
-        <Card w={64 * 12 + 8} maw="90vw" withBorder>
+        <Card w={64 * 12 + 8} maw="90vw">
          <Stack gap="sm">
            <Text fw={500}>{tSection("analytics.title")}</Text>

@@ -39,7 +39,7 @@ export const InitSettings = () => {
            </Stack>
          </Stack>
        </Card>
-        <Card w={64 * 12 + 8} maw="90vw" withBorder>
+        <Card w={64 * 12 + 8} maw="90vw">
          <Stack gap="sm">
            <Text fw={500}>{tSection("crawlingAndIndexing.title")}</Text>

@@ -10,7 +10,7 @@ export const InitStart = async () => {
  const tStart = await getScopedI18n("init.step.start");

  return (
-    <Card w={64 * 6} maw="90vw" withBorder>
+    <Card w={64 * 6} maw="90vw">
      <Stack>
        <Text>{tStart("description")}</Text>

@@ -4,7 +4,7 @@ import { InitUserForm } from "./init-user-form";

 export const InitUser = () => {
  return (
-    <Card w={64 * 6} maw="90vw" withBorder>
+    <Card w={64 * 6} maw="90vw">
      <InitUserForm />
    </Card>
  );
@@ -44,13 +44,13 @@ const fontSans = Inter({
 export const generateMetadata = async (): Promise<Metadata> => ({
  title: "Homarr",
  description:
-    "Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips.",
+    "A self-hosted dashboard for the *arr stack and your entire homelab. Integrates with 50+ services, real-time widgets, no config files.",
  openGraph: {
    title: "Homarr Dashboard",
    description:
-      "Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips.",
+      "A self-hosted dashboard for the *arr stack and your entire homelab. Integrates with 50+ services, real-time widgets, no config files.",
    url: "https://homarr.dev",
-    siteName: "Homarr Documentation",
+    siteName: "Homarr",
  },
  icons: {
    icon: "/logo/logo.png",
@@ -142,7 +142,7 @@ export default async function Layout(props: {
      </head>
      <body className={["font-sans", fontSans.variable].join(" ")}>
        <StackedProvider>
-          <Notifications />
+          <Notifications pauseResetOnHover="notification" />
          <ServiceWorkerRegistration />
          {props.children}
        </StackedProvider>
@@ -45,7 +45,6 @@ export const HeroBanner = async () => {
                    <Image
                      key={`grid-column-${columnIndex}-scroll-1-${index}`}
                      src={icon}
-                      radius="md"
                      fit={"contain"}
                      w={50}
                      h={50}
@@ -57,7 +56,6 @@ export const HeroBanner = async () => {
                    <Image
                      key={`grid-column-${columnIndex}-scroll-2-${index}`}
                      src={icon}
-                      radius="md"
                      fit={"contain"}
                      w={50}
                      h={50}
@@ -90,9 +90,7 @@ export default async function AboutPage() {
        <Group py="lg">
          <Image src={homarrLogoPath} width={100} height={100} alt="" />
          <Stack gap={0}>
-            <Title order={1} tt="uppercase">
-              Homarr
-            </Title>
+            <Title order={1}>Homarr</Title>
            <Title order={2}>{t("version", { version })}</Title>
          </Stack>
        </Group>
@@ -187,7 +185,7 @@ export default async function AboutPage() {
            <SimpleGrid cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }} spacing="md">
              {Object.entries(dependencies)
                .filter(([, value]) => !value.includes("workspace:"))
-                .sort(([key1], [key2]) => key1.localeCompare(key2))
+                .toSorted(([key1], [key2]) => key1.localeCompare(key2))
                .map(([name, version]) => (
                  <UnstyledButton
                    key={name}
@@ -195,9 +193,9 @@ export default async function AboutPage() {
                    href={`https://www.npmjs.com/package/${name}`}
                    target="_blank"
                  >
-                    <Card withBorder radius="md" p="xs" className={classes.dependencyCard}>
+                    <Card radius="md" p="xs" className={classes.dependencyCard}>
                      <Group gap="sm" wrap="nowrap">
-                        <ThemeIcon variant="light" size="lg" radius="md">
+                        <ThemeIcon variant="light" size="lg">
                          <IconPackage size="1.5rem" stroke={1.5} />
                        </ThemeIcon>

@@ -1,6 +1,6 @@
 import { Fragment } from "react";
 import { redirect } from "next/navigation";
-import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
+import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text } from "@mantine/core";
 import { IconBox, IconPencil } from "@tabler/icons-react";
 import { z } from "zod/v4";

@@ -11,9 +11,8 @@ import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { Link, SearchInput, TablePagination } from "@homarr/ui";

-import { ManageContainer } from "~/components/manage/manage-container";
+import { ManagePageLayout } from "~/components/manage/manage-page-layout";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NoResults } from "~/components/no-results";
 import { AppDeleteButton } from "./_app-delete-button";

@@ -39,34 +38,31 @@ export default async function AppsPage(props: AppsPageProps) {
  const { items: apps, totalCount } = await api.app.getPaginated(searchParams);
  const t = await getScopedI18n("app");

-  return (
-    <ManageContainer>
-      <DynamicBreadcrumb />
-      <Stack>
-        <Title>{t("page.list.title")}</Title>
-        <Group justify="space-between" align="center">
-          <SearchInput placeholder={`${t("search")}...`} defaultValue={searchParams.search} flexExpand />
-          {session.user.permissions.includes("app-create") && (
-            <MobileAffixButton component={Link} href="/manage/apps/new">
-              {t("page.create.title")}
-            </MobileAffixButton>
-          )}
-        </Group>
-        {apps.length === 0 && <AppNoResults />}
-        {apps.length > 0 && (
-          <Stack gap="sm">
-            {apps.map((app) => (
-              <AppCard key={app.id} app={app} />
-            ))}
-          </Stack>
-        )}
+  const canCreate = session.user.permissions.includes("app-create");

-        {/* Added margin to not hide pagination behind affix-button */}
-        <Group justify="end" mb={48}>
-          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
-        </Group>
-      </Stack>
-    </ManageContainer>
+  return (
+    <ManagePageLayout
+      title={t("page.list.title")}
+      primaryAction={
+        canCreate ? (
+          <MobileAffixButton component={Link} href="/manage/apps/new">
+            {t("page.create.title")}
+          </MobileAffixButton>
+        ) : undefined
+      }
+      toolbar={<SearchInput placeholder={`${t("search")}...`} defaultValue={searchParams.search} flexExpand />}
+      footer={<TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />}
+      floatingPrimaryAction={canCreate}
+    >
+      {apps.length === 0 && <AppNoResults />}
+      {apps.length > 0 && (
+        <Stack gap="sm">
+          {apps.map((app) => (
+            <AppCard key={app.id} app={app} />
+          ))}
+        </Stack>
+      )}
+    </ManagePageLayout>
  );
 }

@@ -79,7 +75,7 @@ const AppCard = async ({ app }: AppCardProps) => {
  const session = await auth();

  return (
-    <Card withBorder>
+    <Card>
      <Group justify="space-between" wrap="nowrap">
        <Group align="top" justify="start" wrap="nowrap" style={{ flex: "1" }}>
          <Avatar
@@ -1,43 +1,38 @@
 "use client";

-import { Affix, Button, Menu } from "@mantine/core";
+import { Button, Menu } from "@mantine/core";
 import { IconCategoryPlus, IconChevronDown, IconFileImport } from "@tabler/icons-react";

 import { useModalAction } from "@homarr/modals";
 import { AddBoardModal, ImportBoardModal } from "@homarr/modals-collection";
 import { useI18n } from "@homarr/translation/client";

+import { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action";
+
 export const CreateBoardButton = () => {
  const t = useI18n();
  const { openModal: openAddModal } = useModalAction(AddBoardModal);
  const { openModal: openImportModal } = useModalAction(ImportBoardModal);

-  const buttonGroupContent = (
-    <>
-      <Button leftSection={<IconCategoryPlus size="1rem" />} onClick={openAddModal}>
-        {t("management.page.board.action.new.label")}
-      </Button>
-      <Menu position="bottom-end">
-        <Menu.Target>
-          <Button px="xs" ms={1}>
-            <IconChevronDown size="1rem" />
-          </Button>
-        </Menu.Target>
-        <Menu.Dropdown>
-          <Menu.Item onClick={openImportModal} leftSection={<IconFileImport size="1rem" />}>
-            {t("board.action.oldImport.label")}
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
-    </>
-  );
-
  return (
-    <>
-      <Button.Group visibleFrom="md">{buttonGroupContent}</Button.Group>
-      <Affix hiddenFrom="md" position={{ bottom: 20, right: 20 }}>
-        <Button.Group>{buttonGroupContent}</Button.Group>
-      </Affix>
-    </>
+    <ManageMobilePrimaryAction>
+      <Button.Group>
+        <Button leftSection={<IconCategoryPlus size="1rem" />} onClick={openAddModal}>
+          {t("management.page.board.action.new.label")}
+        </Button>
+        <Menu position="bottom-end">
+          <Menu.Target>
+            <Button px="xs" ms={1}>
+              <IconChevronDown size="1rem" />
+            </Button>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item onClick={openImportModal} leftSection={<IconFileImport size="1rem" />}>
+              {t("board.action.oldImport.label")}
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </Button.Group>
+    </ManageMobilePrimaryAction>
  );
 };
@@ -9,12 +9,17 @@ import {
  Group,
  Menu,
  MenuTarget,
-  Stack,
  Text,
-  Title,
  Tooltip,
 } from "@mantine/core";
-import { IconDeviceMobile, IconDotsVertical, IconHomeFilled, IconLock, IconWorld } from "@tabler/icons-react";
+import {
+  IconDeviceMobile,
+  IconDotsVertical,
+  IconHomeFilled,
+  IconLayoutDashboard,
+  IconLock,
+  IconWorld,
+} from "@tabler/icons-react";

 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -23,8 +28,8 @@ import { getScopedI18n } from "@homarr/translation/server";
 import { Link, UserAvatar } from "@homarr/ui";

 import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
-import { ManageContainer } from "~/components/manage/manage-container";
-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { ManagePageLayout } from "~/components/manage/manage-page-layout";
+import { NoResults } from "~/components/no-results";
 import { BoardCardMenuDropdown } from "./_components/board-card-menu-dropdown";
 import { CreateBoardButton } from "./_components/create-board-button";

@@ -35,23 +40,22 @@ export default async function ManageBoardsPage() {
  const canCreateBoards = session?.user.permissions.includes("board-create");

  return (
-    <ManageContainer>
-      <DynamicBreadcrumb />
-      <Stack>
-        <Group justify="space-between">
-          <Title mb="md">{t("title")}</Title>
-          {canCreateBoards && <CreateBoardButton />}
-        </Group>
-
-        <Grid mb={{ base: "xl", md: 0 }}>
+    <ManagePageLayout
+      title={t("title")}
+      primaryAction={canCreateBoards ? <CreateBoardButton /> : undefined}
+      floatingPrimaryAction={canCreateBoards}
+    >
+      {boards.length === 0 && <NoResults icon={IconLayoutDashboard} title={t("noResults.title")} />}
+      {boards.length > 0 && (
+        <Grid>
          {boards.map((board) => (
            <GridCol span={{ base: 12, md: 6 }} key={board.id}>
              <BoardCard board={board} />
            </GridCol>
          ))}
        </Grid>
-      </Stack>
-    </ManageContainer>
+      )}
+    </ManagePageLayout>
  );
 }

@@ -66,16 +70,14 @@ const BoardCard = async ({ board }: BoardCardProps) => {
  const VisibilityIcon = board.isPublic ? IconWorld : IconLock;

  return (
-    <Card radius="lg" withBorder>
+    <Card>
      <CardSection p="sm" withBorder>
        <Group justify="space-between" align="center">
          <Group gap="sm">
            <Tooltip label={t(`visibility.${visibility}`)}>
              <VisibilityIcon size={20} stroke={1.5} />
            </Tooltip>
-            <Text fw="bolder" tt="uppercase">
-              {board.name}
-            </Text>
+            <Text fw={700}>{board.name}</Text>
          </Group>

          <Group>
@@ -123,6 +125,7 @@ const BoardCard = async ({ board }: BoardCardProps) => {
                  style={{ borderTop: "none", borderBottom: "none", borderRight: "none", borderRadius: 0 }}
                  variant="default"
                  size="lg"
+                  aria-label={t("action.settings.label")}
                >
                  <IconDotsVertical size={16} stroke={1.5} />
                </ActionIcon>
@@ -33,7 +33,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
  const KindIcon = integrationSecretIcons[secret.kind];

  return (
-    <Card withBorder>
+    <Card>
      <Stack>
        <Group justify="space-between">
          <Group>
@@ -58,7 +58,12 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
              </Tooltip>
            )}
            {isPublic ? (
-              <ActionIcon color="gray" variant="subtle" onClick={togglePublicSecretDisplay}>
+              <ActionIcon
+                color="gray"
+                variant="subtle"
+                onClick={togglePublicSecretDisplay}
+                aria-label={t(publicSecretDisplayOpened ? "common.action.hide" : "common.action.show")}
+              >
                <DisplayIcon size={16} stroke={1.5} />
              </ActionIcon>
            ) : null}
@@ -79,7 +84,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
            </Button>
          </Group>
        </Group>
-        <Collapse in={editMode}>{children}</Collapse>
+        <Collapse expanded={editMode}>{children}</Collapse>
      </Stack>
    </Card>
  );
@@ -12,7 +12,7 @@ interface FormType {
 interface SecretKindsSegmentedControlProps<TFormType extends FormType> {
  defaultKinds?: IntegrationSecretKind[];
  secretKinds: IntegrationSecretKind[][];
-  form: UseFormReturnType<TFormType, (values: TFormType) => TFormType>;
+  form: UseFormReturnType<TFormType, TFormType>;
 }

 export const SecretKindsSegmentedControl = <TFormType extends FormType>({
@@ -18,7 +18,7 @@ export const IntegrationTestConnectionError = ({ error, url }: IntegrationTestCo
  const causeArray = useMemo(() => toCauseArray(error.cause), [error.cause]);

  return (
-    <Card withBorder style={{ borderColor: getMantineColor("red", 8) }}>
+    <Card style={{ borderColor: getMantineColor("red", 8) }}>
      <Stack>
        <Stack gap="sm">
          <Text size="lg" fw={500} c="red.8">
@@ -216,7 +216,7 @@ export const CertificateDetailsCard = ({ certificate }: CertificateDetailsProps)
  const tCertificateField = useScopedI18n("certificate.field");

  return (
-    <Card withBorder>
+    <Card>
      <Text fw={500}>{tDetails("title")}</Text>
      <Group justify="space-between">
        <Text size="sm" c="dimmed">
@@ -226,7 +226,7 @@ const AppForm = ({ form, canCreateApps }: { form: UseFormReturnType<FormType>; c
        description={t("integration.field.createApp.description")}
      />

-      <Collapse in={form.values.hasApp}>
+      <Collapse expanded={form.values.hasApp}>
        <Fieldset legend={t("integration.field.app.sectionTitle")}>
          <Stack gap="sm">
            {canCreateApps && (
@@ -8,7 +8,7 @@
  border: 1px solid transparent;
  position: relative;
  z-index: 0;
-  transition: transform 150ms ease;
+  transition: background-color 150ms ease;
  overflow: hidden;

  &[data-first="true"] {
@@ -20,11 +20,9 @@
  }

  &[data-active] {
-    transform: scale(1.01);
    z-index: 1;
    background-color: var(--mantine-color-body);
    border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
-    box-shadow: var(--mantine-shadow-md);
    border-radius: var(--mantine-radius-lg);
  }
 }
@@ -7,9 +7,7 @@ import {
  AccordionPanel,
  ActionIcon,
  ActionIconGroup,
-  Affix,
  Anchor,
-  Box,
  Button,
  Divider,
  Group,
@@ -24,9 +22,8 @@ import {
  TableThead,
  TableTr,
  Text,
-  Title,
 } from "@mantine/core";
-import { IconChevronDown, IconChevronUp, IconPencil, IconPlugX } from "@tabler/icons-react";
+import { IconChevronDown, IconPencil, IconPlugX } from "@tabler/icons-react";

 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -37,8 +34,8 @@ import { getIntegrationName } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 import { CountBadge, IntegrationAvatar, Link } from "@homarr/ui";

-import { ManageContainer } from "~/components/manage/manage-container";
-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action";
+import { ManagePageLayout } from "~/components/manage/manage-page-layout";
 import { NoResults } from "~/components/no-results";
 import { env } from "~/env";
 import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
@@ -66,38 +63,23 @@ export default async function IntegrationsPage(props: IntegrationsPageProps) {
  const canCreateIntegrations = session.user.permissions.includes("integration-create");

  return (
-    <ManageContainer>
-      <DynamicBreadcrumb />
-      <Stack>
-        <Group justify="space-between" align="center">
-          <Title>{t("page.list.title")}</Title>
-
-          {canCreateIntegrations && (
-            <>
-              <Box>
-                <IntegrationSelectMenu>
-                  <Affix hiddenFrom="md" position={{ bottom: 20, right: 20 }}>
-                    <MenuTarget>
-                      <Button rightSection={<IconChevronUp size={16} stroke={1.5} />}>{t("action.create")}</Button>
-                    </MenuTarget>
-                  </Affix>
-                </IntegrationSelectMenu>
-              </Box>
-
-              <Box visibleFrom="md">
-                <IntegrationSelectMenu>
-                  <MenuTarget>
-                    <Button rightSection={<IconChevronDown size={16} stroke={1.5} />}>{t("action.create")}</Button>
-                  </MenuTarget>
-                </IntegrationSelectMenu>
-              </Box>
-            </>
-          )}
-        </Group>
-
-        <IntegrationList integrations={integrations} activeTab={searchParams.tab} />
-      </Stack>
-    </ManageContainer>
+    <ManagePageLayout
+      title={t("page.list.title")}
+      primaryAction={
+        canCreateIntegrations ? (
+          <ManageMobilePrimaryAction>
+            <IntegrationSelectMenu>
+              <MenuTarget>
+                <Button rightSection={<IconChevronDown size={16} stroke={1.5} />}>{t("action.create")}</Button>
+              </MenuTarget>
+            </IntegrationSelectMenu>
+          </ManageMobilePrimaryAction>
+        ) : undefined
+      }
+      floatingPrimaryAction={canCreateIntegrations}
+    >
+      <IntegrationList integrations={integrations} activeTab={searchParams.tab} />
+    </ManagePageLayout>
  );
 }

@@ -4,17 +4,15 @@ import {
  Anchor,
  Group,
  Image,
-  Stack,
  Table,
  TableTbody,
  TableTd,
  TableTh,
  TableThead,
  TableTr,
-  Title,
  Tooltip,
 } from "@mantine/core";
-import { IconExternalLink } from "@tabler/icons-react";
+import { IconExternalLink, IconPhoto } from "@tabler/icons-react";
 import { z } from "zod/v4";

 import type { RouterOutputs } from "@homarr/api";
@@ -26,8 +24,9 @@ import { createLocalImageUrl } from "@homarr/icons/local";
 import { getI18n } from "@homarr/translation/server";
 import { Link, SearchInput, TablePagination, UserAvatar } from "@homarr/ui";

-import { ManageContainer } from "~/components/manage/manage-container";
-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action";
+import { ManagePageLayout } from "~/components/manage/manage-page-layout";
+import { NoResults } from "~/components/no-results";
 import { CopyMedia } from "./_actions/copy-media";
 import { DeleteMedia } from "./_actions/delete-media";
 import { IncludeFromAllUsersSwitch } from "./_actions/show-all";
@@ -48,7 +47,7 @@ interface MediaListPageProps {
  searchParams: Promise<inferSearchParamsFromSchema<typeof searchParamsSchema>>;
 }

-export default async function GroupsListPage(props: MediaListPageProps) {
+export default async function MediaListPage(props: MediaListPageProps) {
  const session = await auth();

  if (!session) {
@@ -58,22 +57,31 @@ export default async function GroupsListPage(props: MediaListPageProps) {
  const t = await getI18n();
  const searchParams = searchParamsSchema.parse(await props.searchParams);
  const { items: medias, totalCount } = await api.media.getPaginated(searchParams);
+  const canUpload = session.user.permissions.includes("media-upload");

  return (
-    <ManageContainer>
-      <DynamicBreadcrumb />
-      <Stack>
-        <Title>{t("media.plural")}</Title>
-        <Group justify="space-between">
-          <Group>
-            <SearchInput placeholder={`${t("media.search")}...`} defaultValue={searchParams.search} />
-            {session.user.permissions.includes("media-view-all") && (
-              <IncludeFromAllUsersSwitch defaultChecked={searchParams.includeFromAllUsers} />
-            )}
-          </Group>
-
-          {session.user.permissions.includes("media-upload") && <UploadMediaButton />}
+    <ManagePageLayout
+      title={t("media.plural")}
+      primaryAction={
+        canUpload ? (
+          <ManageMobilePrimaryAction>
+            <UploadMediaButton />
+          </ManageMobilePrimaryAction>
+        ) : undefined
+      }
+      toolbar={
+        <Group>
+          <SearchInput placeholder={`${t("media.search")}...`} defaultValue={searchParams.search} />
+          {session.user.permissions.includes("media-view-all") && (
+            <IncludeFromAllUsersSwitch defaultChecked={searchParams.includeFromAllUsers} />
+          )}
        </Group>
+      }
+      footer={<TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />}
+      floatingPrimaryAction={canUpload}
+    >
+      {medias.length === 0 && <NoResults icon={IconPhoto} title={t("media.noResults.title")} />}
+      {medias.length > 0 && (
        <Table striped highlightOnHover>
          <TableThead>
            <TableTr>
@@ -90,13 +98,8 @@ export default async function GroupsListPage(props: MediaListPageProps) {
            ))}
          </TableTbody>
        </Table>
-
-        {/* Added margin to not hide pagination behind affix-button */}
-        <Group justify="end" mb={48}>
-          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
-        </Group>
-      </Stack>
-    </ManageContainer>
+      )}
+    </ManagePageLayout>
  );
 }

@@ -7,9 +7,7 @@ export default async function NotFound() {
  return (
    <Center h="100%">
      <Stack align="center">
-        <Title order={1} tt="uppercase">
-          {t("title")}
-        </Title>
+        <Title order={1}>{t("title")}</Title>
        <Text>{t("text")}</Text>
      </Stack>
    </Center>
@@ -29,20 +29,20 @@ export default async function ManagementPage() {
      <Space h="md" />
      <SimpleGrid cols={{ xs: 1, sm: 2, md: 3 }}>
        {statistics.map((statistic) => (
-          <Card component={Link} href={statistic.path} key={statistic.path} radius="lg">
+          <Card component={Link} href={statistic.path} key={statistic.path}>
            <Group justify="space-between" wrap="nowrap">
              <Group wrap="nowrap">
-                <Text size="2.4rem" fw="bolder">
+                <Text size="xl" fw={700}>
                  {statistic.count}
                </Text>
                <Stack gap={0}>
-                  <Text c="red" size="xs">
+                  <Text c="dimmed" size="xs">
                    {t(`statisticLabel.${statistic.subtitleKey}`)}
                  </Text>
-                  <Text fw="bold">{t(`statistic.${statistic.titleKey}`)}</Text>
+                  <Text fw={600}>{t(`statistic.${statistic.titleKey}`)}</Text>
                </Stack>
              </Group>
-              <IconArrowRight />
+              <IconArrowRight size={16} stroke={1.5} color="var(--mantine-color-dimmed)" />
            </Group>
          </Card>
        ))}
@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
-import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
+import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text } from "@mantine/core";
 import { IconPencil, IconSearch } from "@tabler/icons-react";
 import { z } from "zod/v4";

@@ -10,9 +10,8 @@ import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { Link, SearchInput, TablePagination } from "@homarr/ui";

-import { ManageContainer } from "~/components/manage/manage-container";
+import { ManagePageLayout } from "~/components/manage/manage-page-layout";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NoResults } from "~/components/no-results";
 import { SearchEngineDeleteButton } from "./_search-engine-delete-button";

@@ -38,34 +37,31 @@ export default async function SearchEnginesPage(props: SearchEnginesPageProps) {

  const tEngine = await getScopedI18n("search.engine");

-  return (
-    <ManageContainer>
-      <DynamicBreadcrumb />
-      <Stack>
-        <Title>{tEngine("page.list.title")}</Title>
-        <Group justify="space-between" align="center">
-          <SearchInput placeholder={`${tEngine("search")}...`} defaultValue={searchParams.search} flexExpand />
-          {session.user.permissions.includes("search-engine-create") && (
-            <MobileAffixButton component={Link} href="/manage/search-engines/new">
-              {tEngine("page.create.title")}
-            </MobileAffixButton>
-          )}
-        </Group>
-        {searchEngines.length === 0 && <SearchEngineNoResults />}
-        {searchEngines.length > 0 && (
-          <Stack gap="sm">
-            {searchEngines.map((searchEngine) => (
-              <SearchEngineCard key={searchEngine.id} searchEngine={searchEngine} />
-            ))}
-          </Stack>
-        )}
+  const canCreate = session.user.permissions.includes("search-engine-create");

-        {/* Added margin to not hide pagination behind affix-button */}
-        <Group justify="end" mb={48}>
-          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
-        </Group>
-      </Stack>
-    </ManageContainer>
+  return (
+    <ManagePageLayout
+      title={tEngine("page.list.title")}
+      primaryAction={
+        canCreate ? (
+          <MobileAffixButton component={Link} href="/manage/search-engines/new">
+            {tEngine("page.create.title")}
+          </MobileAffixButton>
+        ) : undefined
+      }
+      toolbar={<SearchInput placeholder={`${tEngine("search")}...`} defaultValue={searchParams.search} flexExpand />}
+      footer={<TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />}
+      floatingPrimaryAction={canCreate}
+    >
+      {searchEngines.length === 0 && <SearchEngineNoResults />}
+      {searchEngines.length > 0 && (
+        <Stack gap="sm">
+          {searchEngines.map((searchEngine) => (
+            <SearchEngineCard key={searchEngine.id} searchEngine={searchEngine} />
+          ))}
+        </Stack>
+      )}
+    </ManagePageLayout>
  );
 }

@@ -78,7 +74,7 @@ const SearchEngineCard = async ({ searchEngine }: SearchEngineCardProps) => {
  const session = await auth();

  return (
-    <Card withBorder>
+    <Card>
      <Group justify="space-between" wrap="nowrap">
        <Group align="top" justify="start" wrap="nowrap" style={{ flex: 1 }}>
          <Avatar
@@ -41,8 +41,8 @@ export const AnalyticsSettings = ({ initialData }: AnalyticsSettingsProps) => {
    <>
      <Title order={2}>{t("title")}</Title>

-      <Card pos="relative" withBorder>
-        <LoadingOverlay visible={isPending} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
+      <Card pos="relative">
+        <LoadingOverlay visible={isPending} />
        <Stack>
          <SwitchSetting form={form} formKey="enableGeneral" title={t("general.title")} text={t("general.text")} />
        </Stack>
@@ -41,11 +41,11 @@ export const CrawlingAndIndexingSettings = ({ initialData }: CrawlingAndIndexing
    <>
      <Title order={2}>{t("title")}</Title>

-      <Card pos="relative" withBorder>
+      <Card pos="relative">
        <Text c={"dimmed"} mb={"lg"}>
          {t("warning")}
        </Text>
-        <LoadingOverlay visible={isPending} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
+        <LoadingOverlay visible={isPending} />
        <Stack>
          <SwitchSetting form={form} formKey="noIndex" title={t("noIndex.title")} text={t("noIndex.text")} />
          <SwitchSetting form={form} formKey="noFollow" title={t("noFollow.title")} text={t("noFollow.text")} />
@@ -15,7 +15,7 @@ export const SwitchSetting = <TFormValue extends Record<string, boolean>>({
  disabled,
 }: {
  form: Modify<
-    UseFormReturnType<TFormValue, () => TFormValue>,
+    UseFormReturnType<TFormValue, TFormValue>,
    {
      setFieldValue: (key: keyof TFormValue, value: (previous: boolean) => boolean) => void;
    }
@@ -48,7 +48,7 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
        } as const;
      }
    })
-    .sort((certA, certB) => {
+    .toSorted((certA, certB) => {
      if (certA.isError) return -1;
      if (certB.isError) return 1;
      return certA.x509.validToDate.getTime() - certB.x509.validToDate.getTime();
@@ -79,7 +79,7 @@ export default async function CertificatesPage({ params }: CertificatesPageProps

        <SimpleGrid cols={{ sm: 1, lg: 2, xl: 3 }} spacing="lg">
          {x509Certificates.map((cert) => (
-            <Card key={cert.fileName} withBorder>
+            <Card key={cert.fileName}>
              <Group wrap="nowrap">
                {cert.isError ? (
                  <IconAlertTriangle
@@ -202,7 +202,7 @@ const ContainerActionBar = ({ selectedContainers }: ContainerActionBarProps) =>
      <ContainerActionBarButton icon={IconPlayerStop} color="red" action="stop" selectedIds={selectedIds} />
      <ContainerActionBarButton icon={IconRotateClockwise} color="orange" action="restart" selectedIds={selectedIds} />
      <ContainerActionBarButton icon={IconTrash} color="red" action="remove" selectedIds={selectedIds} />
-      <Button leftSection={<IconCategoryPlus />} color={"red"} onClick={handleClick} variant="light" radius="md">
+      <Button leftSection={<IconCategoryPlus />} color={"red"} onClick={handleClick} variant="light">
        {t("addToHomarr.label")}
      </Button>
    </Group>
@@ -253,7 +253,6 @@ const ContainerActionBarButton = (props: ContainerActionBarButtonProps) => {
      onClick={handleClickAsync}
      loading={isPending}
      variant="light"
-      radius="md"
    >
      {t(`${props.action}.label`)}
    </Button>
@@ -4,28 +4,16 @@
  overflow: hidden;
  padding: var(--mantine-spacing-xs);
  padding-left: calc(var(--mantine-spacing-xs) * 2);
-
-  @mixin hover {
-    box-shadow: var(--mantine-shadow-md);
-  }
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 6px;
-    background-image: linear-gradient(0, var(--mantine-color-blue-4), var(--mantine-color-blue-9));
-  }
+  border-left: 1px solid var(--mantine-color-blue-6);
+  background-color: light-dark(
+    var(--mantine-color-blue-0),
+    color-mix(in oklch, var(--mantine-color-blue-9), transparent 85%)
+  );

  @mixin rtl {
    padding-left: var(--mantine-spacing-xs);
    padding-right: calc(var(--mantine-spacing-xs) * 2);
-
-    &::before {
-      left: unset;
-      right: 0;
-    }
+    border-left: none;
+    border-right: 1px solid var(--mantine-color-blue-6);
  }
 }
@@ -23,7 +23,6 @@ export function HeaderCard(props: HeaderCardProps) {
      <Flex align="center" justify={isRTL ? "space-between" : "flex-start"} gap="md" direction={"row"}>
        <ThemeIcon
          size="xl"
-          radius="md"
          variant="gradient"
          gradient={{
            deg: 0,
@@ -8,6 +8,8 @@ import { useCurrentLocale, useI18n } from "@homarr/translation/client";
 import { ResourceIcon } from "~/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-gauge/resource-icon";
 import classes from "./resource-gauge.module.css";

+const KUBERNETES_BRAND_COLOR = "#326ce5";
+
 interface KubernetesResourceGaugeProps {
  kubernetesCapacity: KubernetesCapacity;
 }
@@ -18,8 +20,8 @@ export function ResourceGauge(props: KubernetesResourceGaugeProps) {
  const isRTL = Boolean(isLocaleRTL(currentLocale));

  return (
-    <Paper radius="md" withBorder className={classes.paper} mt={20}>
-      <ThemeIcon className={classes.icon} size={60} radius={60} bg={"#326ce5"}>
+    <Paper className={classes.paper} mt={20}>
+      <ThemeIcon className={classes.icon} size={60} radius={60} bg={KUBERNETES_BRAND_COLOR}>
        <ResourceIcon type={props.kubernetesCapacity.type} />
      </ThemeIcon>

@@ -17,12 +17,7 @@ interface ResourceTileProps {
 export function ResourceTile(props: ResourceTileProps) {
  const t = useI18n();
  return (
-    <Card
-      withBorder
-      component={Link}
-      href={`/manage/tools/kubernetes/${props.label}`}
-      className={classes.cardContainer}
-    >
+    <Card component={Link} href={`/manage/tools/kubernetes/${props.label}`} className={classes.cardContainer}>
      <Group justify="space-between" wrap="nowrap">
        <Image src={`/images/kubernetes/${props.label}.svg`} alt={props.label} width={64} height={64} />
        <Group gap="xs">
@@ -2,12 +2,14 @@

 import { Select } from "@mantine/core";

-import type { LogLevel } from "@homarr/core/infrastructure/logs/constants";
 import { logLevelConfiguration, logLevels } from "@homarr/core/infrastructure/logs/constants";
+import type { LogLevel } from "@homarr/core/infrastructure/logs/constants";
 import { useI18n } from "@homarr/translation/client";

 import { useLogContext } from "./log-context";

+const levelByValue = Object.fromEntries(logLevels.map((logLevel) => [logLevel, logLevel])) as Record<string, LogLevel>;
+
 export const LogLevelSelection = () => {
  const { level, setLevel } = useLogContext();
  const t = useI18n();
@@ -19,7 +21,12 @@ export const LogLevelSelection = () => {
        label: `${logLevelConfiguration[level].prefix} ${t(`log.level.option.${level}`)}`,
      }))}
      value={level}
-      onChange={(value) => setLevel(value as LogLevel)}
+      onChange={(value) => {
+        const nextLevel = value && levelByValue[value];
+        if (nextLevel) {
+          setLevel(nextLevel);
+        }
+      }}
      checkIconPosition="right"
    />
  );
@@ -62,7 +62,7 @@ export const FirstDayOfWeek = ({ user }: FirstDayOfWeekProps) => {
  return (
    <form onSubmit={form.onSubmit(handleSubmit)}>
      <Stack gap="md">
-        <Radio.Group {...inputProps} value={value} onChange={(value) => onChange(parseInt(value))}>
+        <Radio.Group {...inputProps} value={value} onChange={(nextValue: string) => onChange(parseInt(nextValue, 10))}>
          <Group mt="xs">
            <Radio value="1" label={weekDays[1]} />
            <Radio value="6" label={weekDays[6]} />
@@ -95,7 +95,7 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {

  return (
    <Box pos="relative">
-      <Menu opened={opened} keepMounted onChange={toggle} position="bottom-start" withArrow>
+      <Menu opened={opened} keepMounted onChange={toggle} position="bottom-start">
        <Menu.Target>
          <UnstyledButton onClick={toggle}>
            <UserAvatar user={user} size={200} />
@@ -1,24 +1,22 @@
 "use client";

 import { useMemo } from "react";
-import { Anchor, Button, Group, Text, Title, Tooltip } from "@mantine/core";
+import { Anchor, Group, Text, Tooltip } from "@mantine/core";
 import { IconCheck } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
 import { MantineReactTable } from "mantine-react-table";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import { Link, UserAvatar } from "@homarr/ui";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";

 interface UserListComponentProps {
  initialUserList: RouterOutputs["user"]["getAll"];
-  credentialsProviderEnabled: boolean;
 }

-export const UserListComponent = ({ initialUserList, credentialsProviderEnabled }: UserListComponentProps) => {
-  const tUserList = useScopedI18n("management.page.user.list");
+export const UserListComponent = ({ initialUserList }: UserListComponentProps) => {
  const t = useI18n();
  const { data, isLoading } = clientApi.user.getAll.useQuery(undefined, {
    initialData: initialUserList,
@@ -69,21 +67,10 @@ export const UserListComponent = ({ initialUserList, credentialsProviderEnabled
    enableFullScreenToggle: false,
    layoutMode: "grid-no-grow",
    getRowId: (row) => row.id,
-    renderTopToolbarCustomActions: () =>
-      credentialsProviderEnabled ? (
-        <Button component={Link} href="/manage/users/create">
-          {t("management.page.user.create.title")}
-        </Button>
-      ) : null,
    state: {
      isLoading,
    },
  });

-  return (
-    <>
-      <Title mb="md">{tUserList("title")}</Title>
-      <MantineReactTable table={table} />
-    </>
-  );
+  return <MantineReactTable table={table} />;
 };
@@ -149,7 +149,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
          color={!generalForm.isValid() ? "red" : undefined}
        >
          <form>
-            <Card p="xl" shadow="md" withBorder>
+            <Card p="xl">
              <Stack gap="md">
                <TextInput
                  label={tUserField("username.label")}
@@ -165,7 +165,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
        </Stepper.Step>
        <Stepper.Step label={t("step.security.label")} allowStepSelect={false} allowStepClick={false}>
          <form>
-            <Card p="xl" shadow="md" withBorder>
+            <Card p="xl">
              <Stack gap="md">
                <CustomPasswordInput
                  withPasswordRequirements
@@ -185,7 +185,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
          </form>
        </Stepper.Step>
        <Stepper.Step label={t("step.groups.label")} allowStepSelect={false} allowStepClick={false}>
-          <Card p="xl" shadow="md" withBorder>
+          <Card p="xl">
            <GroupsForm
              initialGroups={initialGroups}
              addGroup={(groupId) =>
@@ -198,20 +198,20 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
          </Card>
        </Stepper.Step>
        <Stepper.Step label={t("step.review.label")} allowStepSelect={false} allowStepClick={false}>
-          <Card p="xl" shadow="md" withBorder>
+          <Card p="xl">
            <Stack maw={300} align="center" mx="auto">
              <UserAvatar
                size="xl"
                user={{ name: generalForm.values.username, email: generalForm.values.email ?? null, image: null }}
              />
-              <Text tt="uppercase" fw="bolder" size="xl">
+              <Text fw={700} size="xl">
                {generalForm.values.username}
              </Text>
            </Stack>
          </Card>
        </Stepper.Step>
        <Stepper.Completed>
-          <Card p="xl" shadow="md" withBorder>
+          <Card p="xl">
            <Stack align="center" maw={300} mx="auto">
              <IconUserCheck size="3rem" />
              <Title order={2}>{t("step.completed.title")}</Title>
@@ -25,7 +25,7 @@ export const StepperNavigationComponent = ({
 }: StepperNavigationComponentProps) => {
  const t = useI18n();
  return (
-    <Card shadow="md" withBorder>
+    <Card>
      {!isComplete ? (
        <Group justify="space-between" wrap="nowrap">
          <Button
@@ -101,7 +101,7 @@ export const SaveAffix = ({ groupId }: SaveAffixProps) => {
    <div style={{ position: "sticky", bottom: 20 }}>
      <Transition transition="slide-up" mounted={form.isDirty()}>
        {(transitionStyles) => (
-          <Card style={transitionStyles} withBorder>
+          <Card style={transitionStyles}>
            <Group justify="space-between">
              <Text fw={500}>{tForm("unsavedChanges")}</Text>
              <Group>
@@ -68,7 +68,6 @@ const PermissionCard = async ({ group, isDanger }: PermissionCardProps) => {
  return (
    <Card
      p="md"
-      withBorder
      style={{
        borderColor: isDanger ? "var(--mantine-color-red-8)" : undefined,
      }}
@@ -1,7 +1,7 @@
 "use client";

-import { useCallback, useMemo, useState } from "react";
-import { Group, TextInput } from "@mantine/core";
+import { useMemo, useState } from "react";
+import { TextInput } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";

 import type { RouterOutputs } from "@homarr/api";
@@ -33,29 +33,20 @@ export const GroupsList = ({ groups }: GroupsListProps) => {

  return (
    <>
-      <Group justify="space-between">
-        <TextInput
-          leftSection={<IconSearch size={20} stroke={1.5} />}
-          value={search}
-          onChange={(event) => setSearch(event.currentTarget.value)}
-          placeholder={`${t("group.search")}...`}
-          style={{ flex: 1 }}
-        />
-        <AddGroup />
-      </Group>
-
+      <TextInput
+        leftSection={<IconSearch size={20} stroke={1.5} />}
+        value={search}
+        onChange={(event) => setSearch(event.currentTarget.value)}
+        placeholder={`${t("group.search")}...`}
+      />
      <GroupsTable groups={filteredGroups} initialGroupIds={initialGroupIds} hasFilter={search.length !== 0} />
    </>
  );
 };

-const AddGroup = () => {
+export const AddGroupButton = () => {
  const t = useI18n();
  const { openModal } = useModalAction(AddGroupModal);

-  const handleAddGroup = useCallback(() => {
-    openModal();
-  }, [openModal]);
-
-  return <MobileAffixButton onClick={handleAddGroup}>{t("group.action.create.label")}</MobileAffixButton>;
+  return <MobileAffixButton onClick={() => openModal()}>{t("group.action.create.label")}</MobileAffixButton>;
 };
@@ -259,7 +259,7 @@ const SaveAffix = ({ visible, isPending, onDiscard, onSave }: SaveAffixProps) =>
    <div style={{ position: "sticky", bottom: 20 }}>
      <Transition transition="slide-up" mounted={visible}>
        {(transitionStyles) => (
-          <Card style={transitionStyles} withBorder>
+          <Card style={transitionStyles}>
            <Group justify="space-between">
              <Text fw={500}>{t("common.unsavedChanges")}</Text>
              <Group>
@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation";
-import { Card, Group, Stack, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
+import { Card, Group, Stack, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
 import { IconChevronRight, IconUsersGroup } from "@tabler/icons-react";

 import { api } from "@homarr/api/server";
@@ -8,9 +8,8 @@ import { everyoneGroup } from "@homarr/definitions";
 import { getI18n } from "@homarr/translation/server";
 import { Link } from "@homarr/ui";

-import { ManageContainer } from "~/components/manage/manage-container";
-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { GroupsList } from "./_client";
+import { ManagePageLayout } from "~/components/manage/manage-page-layout";
+import { AddGroupButton, GroupsList } from "./_client";
 import classes from "./groups.module.css";

 export default async function GroupsListPage() {
@@ -26,11 +25,8 @@ export default async function GroupsListPage() {
  const groupsWithoutEveryone = groups.filter((group) => group.name !== everyoneGroup);

  return (
-    <ManageContainer size="xl">
-      <DynamicBreadcrumb />
+    <ManagePageLayout title={t("group.title")} primaryAction={<AddGroupButton />} floatingPrimaryAction>
      <Stack>
-        <Title>{t("group.title")}</Title>
-
        {dbEveryoneGroup && (
          <UnstyledButton component={Link} href={`/manage/users/groups/${dbEveryoneGroup.id}`}>
            <Card className={classes.everyoneGroup}>
@@ -53,6 +49,6 @@ export default async function GroupsListPage() {

        <GroupsList groups={groupsWithoutEveryone} />
      </Stack>
-    </ManageContainer>
+    </ManagePageLayout>
  );
 }
@@ -0,0 +1,20 @@
+"use client";
+
+import { Button } from "@mantine/core";
+
+import { useModalAction } from "@homarr/modals";
+import { InviteCreateModal } from "@homarr/modals-collection";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { MANAGE_ACTION_BUTTON_MIN_WIDTH } from "~/components/manage/manage-page.constants";
+
+export const InviteCreateButton = () => {
+  const t = useScopedI18n("management.page.user.invite");
+  const { openModal } = useModalAction(InviteCreateModal);
+
+  return (
+    <Button miw={MANAGE_ACTION_BUTTON_MIN_WIDTH} onClick={() => openModal()}>
+      {t("action.new.title")}
+    </Button>
+  );
+};
@@ -1,7 +1,7 @@
 "use client";

 import { useCallback, useMemo } from "react";
-import { ActionIcon, Button, Title } from "@mantine/core";
+import { ActionIcon } from "@mantine/core";
 import { IconTrash } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -10,8 +10,7 @@ import { MantineReactTable } from "mantine-react-table";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { useConfirmModal, useModalAction } from "@homarr/modals";
-import { InviteCreateModal } from "@homarr/modals-collection";
+import { useConfirmModal } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";

@@ -65,7 +64,6 @@ export const InviteListComponent = ({ initialInvites }: InviteListComponentProps
    enableFullScreenToggle: false,
    layoutMode: "grid-no-grow",
    getRowId: (row) => row.id,
-    renderTopToolbarCustomActions: RenderTopToolbarCustomActions,
    state: {
      isLoading,
    },
@@ -74,22 +72,7 @@ export const InviteListComponent = ({ initialInvites }: InviteListComponentProps
    },
  });

-  return (
-    <>
-      <Title mb="md">{t("title")}</Title>
-      <MantineReactTable table={table} />
-    </>
-  );
-};
-
-const RenderTopToolbarCustomActions = () => {
-  const t = useScopedI18n("management.page.user.invite");
-  const { openModal } = useModalAction(InviteCreateModal);
-  const handleNewInvite = useCallback(() => {
-    openModal();
-  }, [openModal]);
-
-  return <Button onClick={handleNewInvite}>{t("action.new.title")}</Button>;
+  return <MantineReactTable table={table} />;
 };

 const RenderRowActions = ({ row }: { row: MRT_Row<RouterOutputs["invite"]["getAll"][number]> }) => {
@@ -3,8 +3,11 @@ import { notFound } from "next/navigation";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { isProviderEnabled } from "@homarr/auth/server";
+import { getScopedI18n } from "@homarr/translation/server";

-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action";
+import { ManagePageLayout } from "~/components/manage/manage-page-layout";
+import { InviteCreateButton } from "./_components/invite-create-button";
 import { InviteListComponent } from "./_components/invite-list";

 export default async function InvitesOverviewPage() {
@@ -17,11 +20,20 @@ export default async function InvitesOverviewPage() {
    return notFound();
  }

+  const t = await getScopedI18n("management.page.user.invite");
  const initialInvites = await api.invite.getAll();
+
  return (
-    <>
-      <DynamicBreadcrumb />
+    <ManagePageLayout
+      title={t("title")}
+      primaryAction={
+        <ManageMobilePrimaryAction>
+          <InviteCreateButton />
+        </ManageMobilePrimaryAction>
+      }
+      floatingPrimaryAction
+    >
      <InviteListComponent initialInvites={initialInvites} />
-    </>
+    </ManagePageLayout>
  );
 }
@@ -4,8 +4,10 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { isProviderEnabled } from "@homarr/auth/server";
 import { getScopedI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";

-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { ManagePageLayout } from "~/components/manage/manage-page-layout";
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
 import { createMetaTitle } from "~/metadata";
 import { UserListComponent } from "./_components/user-list";

@@ -27,13 +29,23 @@ export default async function UsersPage() {
    return notFound();
  }

+  const t = await getScopedI18n("management.page.user");
  const userList = await api.user.getAll();
  const credentialsProviderEnabled = isProviderEnabled("credentials");

  return (
-    <>
-      <DynamicBreadcrumb />
-      <UserListComponent initialUserList={userList} credentialsProviderEnabled={credentialsProviderEnabled} />
-    </>
+    <ManagePageLayout
+      title={t("list.title")}
+      primaryAction={
+        credentialsProviderEnabled ? (
+          <MobileAffixButton component={Link} href="/manage/users/create">
+            {t("create.title")}
+          </MobileAffixButton>
+        ) : undefined
+      }
+      floatingPrimaryAction={credentialsProviderEnabled}
+    >
+      <UserListComponent initialUserList={userList} />
+    </ManagePageLayout>
  );
 }
@@ -99,7 +99,7 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie

  return (
    <>
-      <Card withBorder w={dimensions.width} h={dimensions.height} p={dimensions.height >= 96 ? undefined : 4}>
+      <Card w={dimensions.width} h={dimensions.height} p={dimensions.height >= 96 ? undefined : 4}>
        <QueryErrorResetBoundary>
          {({ reset }) => (
            <ErrorBoundary
@@ -123,17 +123,35 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
        </QueryErrorResetBoundary>
      </Card>
      <Affix bottom={12} right={72}>
-        <ActionIcon size={48} variant="default" radius="xl" onClick={handleOpenEditWidgetModal}>
+        <ActionIcon
+          size={48}
+          variant="default"
+          radius="xl"
+          onClick={handleOpenEditWidgetModal}
+          aria-label={t("common.action.edit")}
+        >
          <IconPencil size={24} />
        </ActionIcon>
      </Affix>
      <Affix bottom={12} right={72 + 60}>
-        <ActionIcon size={48} variant="default" radius="xl" onClick={toggleEditMode}>
+        <ActionIcon
+          size={48}
+          variant="default"
+          radius="xl"
+          onClick={toggleEditMode}
+          aria-label={editMode ? t("widgetPreview.toggle.disabled") : t("widgetPreview.toggle.enabled")}
+        >
          {editMode ? <IconToggleLeft size={24} /> : <IconToggleRight size={24} />}
        </ActionIcon>
      </Affix>
      <Affix bottom={12} right={72 + 120}>
-        <ActionIcon size={48} variant="default" radius="xl" onClick={openDimensionsModal}>
+        <ActionIcon
+          size={48}
+          variant="default"
+          radius="xl"
+          onClick={openDimensionsModal}
+          aria-label={t("widgetPreview.dimensions.title")}
+        >
          <IconDimensions size={24} />
        </ActionIcon>
      </Affix>
@@ -8,12 +8,14 @@ import { getFirstEmptyPosition } from "./empty-position";
 import { getSectionElements } from "./section-elements";

 export interface CreateItemInput {
+  id?: string;
  kind: WidgetKind;
  options?: Record<string, unknown>;
+  integrationIds?: string[];
 }

 export const createItemCallback =
-  ({ kind, options = {} }: CreateItemInput) =>
+  ({ id, kind, options = {}, integrationIds = [] }: CreateItemInput) =>
  (previous: Board): Board => {
    const firstSection = previous.sections
      .filter((section): section is EmptySection => section.kind === "empty")
@@ -23,11 +25,11 @@ export const createItemCallback =
    if (!firstSection) return previous;

    const widget = {
-      id: createId(),
+      id: id ?? createId(),
      kind,
      options,
      layouts: createItemLayouts(previous, firstSection),
-      integrationIds: [],
+      integrationIds,
      advancedOptions: {
        title: null,
        customCssClasses: [],
@@ -42,7 +42,6 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
          item.advancedOptions.customCssClasses.join(" "),
        )}
        radius={board.itemRadius}
-        withBorder
        styles={{
          root: {
            "--opacity": board.opacity / 100,
@@ -105,9 +105,17 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
  };

  return (
-    <Menu withinPortal withArrow position="right-start" arrowPosition="center">
+    <Menu withinPortal position="right-start" arrowPosition="center">
      <Menu.Target>
-        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={offset} right={offset} style={{ zIndex: 10 }}>
+        <ActionIcon
+          variant="default"
+          radius={"xl"}
+          pos="absolute"
+          top={offset}
+          right={offset}
+          style={{ zIndex: 10 }}
+          aria-label={tItem("menu.label.settings")}
+        >
          <IconDotsVertical size={"1rem"} />
        </ActionIcon>
      </Menu.Target>
@@ -2,20 +2,26 @@ import { useMemo, useState } from "react";
 import { Avatar, Button, Card, Center, Grid, Group, Input, Stack, Text, Tooltip } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";

-import { objectEntries } from "@homarr/common";
+import { clientApi } from "@homarr/api/client";
+import { createId, objectEntries } from "@homarr/common";
 import { getIconUrl, getIntegrationName } from "@homarr/definitions";
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
-import { createModal } from "@homarr/modals";
+import { createModal, useModalAction } from "@homarr/modals";
+import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
-import { widgetImports } from "@homarr/widgets";
+import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
+import { WidgetEditModal } from "@homarr/widgets/modals";

 import { useItemActions } from "./item-actions";

 export const ItemSelectModal = createModal<void>(({ actions }) => {
  const [search, setSearch] = useState("");
  const t = useI18n();
-  const { createItem } = useItemActions();
+  const { createItem, updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations } = useItemActions();
+  const { openModal: openEditModal } = useModalAction(WidgetEditModal);
+  const { data: integrationData } = clientApi.integration.all.useQuery();
+  const settings = useSettings();

  const items = useMemo(
    () =>
@@ -40,8 +46,43 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
  );

  const handleAdd = (kind: WidgetKind) => {
-    createItem({ kind });
+    const definition = widgetImports[kind].definition;
+    const hasIntegrationSupport = "supportedIntegrations" in definition;
+
+    const matchingIntegrations = hasIntegrationSupport
+      ? (integrationData ?? []).filter((integration) =>
+          (definition.supportedIntegrations as string[]).includes(integration.kind),
+        )
+      : [];
+
+    const integrationIds = matchingIntegrations.map((i) => i.id);
+    const itemId = createId();
+    const defaultOptions = reduceWidgetOptionsWithDefaultValues(kind, settings);
+
+    createItem({ id: itemId, kind, integrationIds });
    actions.closeModal();
+
+    openEditModal(
+      {
+        kind,
+        value: {
+          advancedOptions: { title: null, customCssClasses: [], borderColor: "" },
+          options: defaultOptions,
+          integrationIds,
+        },
+        onSuccessfulEdit: ({ options, integrationIds: newIntegrationIds, advancedOptions }) => {
+          updateItemOptions({ itemId, newOptions: options });
+          updateItemAdvancedOptions({ itemId, newAdvancedOptions: advancedOptions });
+          updateItemIntegrations({ itemId, newIntegrations: newIntegrationIds });
+        },
+        integrationData: matchingIntegrations,
+        integrationSupport: hasIntegrationSupport,
+        settings,
+      },
+      {
+        title: (titleT) => `${titleT("item.edit.title")} - ${titleT(`widget.${kind}.name`)}`,
+      },
+    );
  };

  return (
@@ -104,7 +145,7 @@ const WidgetItem = ({
            </Text>
          </Stack>
          <SupportedIntegrations mt="auto" integrations={item.supportedIntegrations} />
-          <Button onClick={onSelect} variant="light" size="xs" radius="md" fullWidth>
+          <Button onClick={onSelect} variant="light" size="xs" fullWidth>
            {t(`item.create.addToBoard`)}
          </Button>
        </Stack>
@@ -129,7 +170,7 @@ const SupportedIntegrations = ({ integrations, mt }: SupportedIntegrationsProps)

  return (
    <Center mt={mt}>
-      <Tooltip.Group openDelay={300} closeDelay={100}>
+      <Tooltip.Group closeDelay={100}>
        <Group gap={2}>
          {integrations.slice(0, countToShow).map((integration) => (
            <Tooltip key={integration} label={getIntegrationName(integration)} withArrow>
@@ -3,6 +3,7 @@ import { useDisclosure } from "@mantine/hooks";
 import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";

 import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
 import { useRequiredBoard } from "@homarr/boards/context";

 import type { CategorySection } from "~/app/[locale]/boards/_types";
@@ -10,30 +11,41 @@ import { CategoryMenu } from "./category/category-menu";
 import { GridStack } from "./gridstack/gridstack";
 import classes from "./item.module.css";

+const localStorageKey = (sectionId: string) => `homarr-section-collapsed-${sectionId}`;
+
 interface Props {
  section: CategorySection;
 }

 export const BoardCategorySection = ({ section }: Props) => {
+  const { status } = useSession();
  const { mutate } = clientApi.section.changeCollapsed.useMutation();
  const board = useRequiredBoard();
-  const [opened, { toggle }] = useDisclosure(section.collapsed, {
+
+  const initialCollapsed =
+    typeof window !== "undefined"
+      ? (localStorage.getItem(localStorageKey(section.id)) ?? String(section.collapsed)) === "true"
+      : section.collapsed;
+
+  const [opened, { toggle }] = useDisclosure(initialCollapsed, {
    onOpen() {
-      mutate({ sectionId: section.id, collapsed: true });
+      if (status === "authenticated") {
+        mutate({ sectionId: section.id, collapsed: true });
+      } else if (status === "unauthenticated") {
+        localStorage.setItem(localStorageKey(section.id), "true");
+      }
    },
    onClose() {
-      mutate({ sectionId: section.id, collapsed: false });
+      if (status === "authenticated") {
+        mutate({ sectionId: section.id, collapsed: false });
+      } else if (status === "unauthenticated") {
+        localStorage.setItem(localStorageKey(section.id), "false");
+      }
    },
  });

  return (
-    <Card
-      style={{ "--opacity": board.opacity / 100 }}
-      radius={board.itemRadius}
-      withBorder
-      p={0}
-      className={classes.itemCard}
-    >
+    <Card style={{ "--opacity": board.opacity / 100 }} radius={board.itemRadius} p={0} className={classes.itemCard}>
      <Stack>
        <Group wrap="nowrap" gap="sm">
          <UnstyledButton w="100%" p="sm" onClick={toggle}>
@@ -44,7 +56,7 @@ export const BoardCategorySection = ({ section }: Props) => {
          </UnstyledButton>
          <CategoryMenu category={section} />
        </Group>
-        <Collapse in={opened} p="sm" pt={0}>
+        <Collapse expanded={opened} p="sm" pt={0}>
          <GridStack section={section} />
        </Collapse>
      </Stack>
@@ -30,9 +30,9 @@ export const CategoryMenu = ({ category }: Props) => {
  const t = useScopedI18n("section.category");

  return (
-    <Menu withArrow>
+    <Menu>
      <Menu.Target>
-        <ActionIcon mr="sm" variant="transparent">
+        <ActionIcon mr="sm" variant="transparent" aria-label={t("menu.label.settings")}>
          <IconDotsVertical size={20} />
        </ActionIcon>
      </Menu.Target>
@@ -28,7 +28,6 @@ export const BoardDynamicSection = ({ section }: Props) => {
        className={combineClasses(classes.itemCard, section.options.customCssClasses.join(" "))}
        w="100%"
        h="100%"
-        withBorder
        styles={{
          root: {
            overflow: "visible",
@@ -43,9 +43,17 @@ export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSectionIt
  };

  return (
-    <Menu withinPortal withArrow position="right-start" arrowPosition="center">
+    <Menu withinPortal position="right-start" arrowPosition="center">
      <Menu.Target>
-        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={4} right={4} style={{ zIndex: 10 }}>
+        <ActionIcon
+          variant="default"
+          radius={"xl"}
+          pos="absolute"
+          top={4}
+          right={4}
+          style={{ zIndex: 10 }}
+          aria-label={tItem("menu.label.settings")}
+        >
          <IconDotsVertical size={"1rem"} />
        </ActionIcon>
      </Menu.Target>
@@ -1,6 +1,6 @@
-import type { RefObject } from "react";
+import type { Ref, RefObject } from "react";
 import { createRef, useCallback, useEffect, useRef } from "react";
-import { useElementSize } from "@mantine/hooks";
+import { useElementSize, useMergedRef } from "@mantine/hooks";

 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
@@ -13,7 +13,7 @@ import { useSectionActions } from "../section-actions";
 import { initializeGridstack } from "./init-gridstack";

 export interface UseGridstackRefs {
-  wrapper: RefObject<HTMLDivElement | null>;
+  wrapper: Ref<HTMLDivElement | null>;
  items: RefObject<Record<string, RefObject<GridItemHTMLElement | null>>>;
  gridstack: RefObject<GridStack | null>;
 }
@@ -59,8 +59,9 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
  const { moveAndResizeItem, moveItemToSection } = useItemActions();
  const { moveAndResizeInnerSection, moveInnerSectionToSection } = useSectionActions();

-  // define reference for wrapper - is used to calculate the width of the wrapper
-  const { ref: wrapperRef, width, height } = useElementSize<HTMLDivElement>();
+  const wrapperElementRef = useRef<HTMLDivElement | null>(null);
+  const { ref: measureWrapperRef, width, height } = useElementSize<HTMLDivElement>();
+  const wrapperRef = useMergedRef(measureWrapperRef, wrapperElementRef);
  // references to the diffrent items contained in the gridstack
  const itemRefs = useRef<Record<string, RefObject<GridItemHTMLElement | null>>>({});
  // reference of the gridstack object for modifications after initialization
@@ -193,7 +194,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
      itemIds,
      refs: {
        items: itemRefs,
-        wrapper: wrapperRef,
+        wrapper: wrapperElementRef,
        gridstack: gridRef,
      },
      sectionColumnCount: columnCount,
@@ -276,7 +277,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
  useCssVariableConfiguration({
    columnCount,
    gridRef,
-    wrapperRef,
+    wrapperRef: wrapperElementRef,
    width,
    height,
    isDynamic: section.kind === "dynamic",
@@ -293,7 +294,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])

 interface UseCssVariableConfiguration {
  gridRef: UseGridstackRefs["gridstack"];
-  wrapperRef: UseGridstackRefs["wrapper"];
+  wrapperRef: RefObject<HTMLDivElement | null>;
  width: number;
  height: number;
  columnCount: number;
@@ -44,6 +44,7 @@ export const BoardBackgroundVideo = () => {
      muted
      loop
      playsInline
+      aria-hidden="true"
      style={{
        position: "fixed",
        width: "100vw",
@@ -12,16 +12,7 @@ export const CommonNavLink = (props: ClientNavigationLink) =>
 const NavLinkHref = (props: NavigationLinkHref) => {
  const pathname = usePathname();
  return props.external ? (
-    <NavLink
-      component="a"
-      label={props.label}
-      leftSection={props.icon}
-      href={props.href}
-      style={{
-        borderRadius: 5,
-      }}
-      target="_blank"
-    />
+    <NavLink component="a" label={props.label} leftSection={props.icon} href={props.href} target="_blank" />
  ) : (
    <NavLink
      component={Link}
@@ -29,9 +20,6 @@ const NavLinkHref = (props: NavigationLinkHref) => {
      leftSection={props.icon}
      href={props.href}
      active={pathname === props.href}
-      style={{
-        borderRadius: 5,
-      }}
    />
  );
 };
@@ -40,14 +28,7 @@ const NavLinkWithItems = (props: NavigationLinkWithItems) => {
  const pathname = usePathname();
  const isActive = props.items.some((item) => item.href === pathname);
  return (
-    <NavLink
-      style={{
-        borderRadius: 5,
-      }}
-      label={props.label}
-      leftSection={props.icon}
-      defaultOpened={isActive}
-    >
+    <NavLink label={props.label} leftSection={props.icon} defaultOpened={isActive}>
      {props.items.map((item) => (
        <NavLinkHref key={item.label} {...item} />
      ))}
@@ -15,7 +15,7 @@ export const DangerZoneRoot = async ({ children }: DangerZoneRootProps) => {
      <Title c="red.8" order={2}>
        {t("common.dangerZone")}
      </Title>
-      <Card withBorder style={{ borderColor: "var(--mantine-color-red-8)", borderWidth: 3 }}>
+      <Card style={{ borderColor: "var(--mantine-color-red-8)", borderWidth: 3 }}>
        <Stack gap="sm">
          {Array.isArray(children)
            ? children.map((child, index) => (
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from "react";
+import { Affix, Box } from "@mantine/core";
+
+import { MANAGE_ACTION_BUTTON_MIN_WIDTH, MANAGE_AFFIX_POSITION } from "./manage-page.constants";
+
+export const ManageMobilePrimaryAction = ({ children }: PropsWithChildren) => (
+  <>
+    <Box visibleFrom="md" miw={MANAGE_ACTION_BUTTON_MIN_WIDTH}>
+      {children}
+    </Box>
+    <Affix hiddenFrom="md" position={MANAGE_AFFIX_POSITION}>
+      {children}
+    </Affix>
+  </>
+);
@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+import type { MantineSize } from "@mantine/core";
+import { Group, Stack, Title } from "@mantine/core";
+
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { ManageContainer } from "./manage-container";
+import { MANAGE_FLOATING_ACTION_BOTTOM_OFFSET } from "./manage-page.constants";
+
+interface ManagePageLayoutProps {
+  title: ReactNode;
+  primaryAction?: ReactNode;
+  toolbar?: ReactNode;
+  footer?: ReactNode;
+  floatingPrimaryAction?: boolean;
+  size?: MantineSize;
+  children: ReactNode;
+}
+
+export const ManagePageLayout = ({
+  title,
+  primaryAction,
+  toolbar,
+  footer,
+  floatingPrimaryAction,
+  size,
+  children,
+}: ManagePageLayoutProps) => {
+  const titleNode = typeof title === "string" ? <Title>{title}</Title> : title;
+
+  return (
+    <ManageContainer size={size}>
+      <DynamicBreadcrumb />
+      <Stack pb={floatingPrimaryAction ? { base: MANAGE_FLOATING_ACTION_BOTTOM_OFFSET, md: 0 } : undefined}>
+        <Group justify="space-between" align="center">
+          {titleNode}
+          {primaryAction}
+        </Group>
+        {toolbar}
+        {children}
+        {footer && <Group justify="end">{footer}</Group>}
+      </Stack>
+    </ManageContainer>
+  );
+};
@@ -0,0 +1,5 @@
+export const MANAGE_AFFIX_POSITION = { bottom: 20, right: 20 } as const;
+
+export const MANAGE_FLOATING_ACTION_BOTTOM_OFFSET = 48;
+
+export const MANAGE_ACTION_BUTTON_MIN_WIDTH = 160;
@@ -2,13 +2,15 @@ import { forwardRef } from "react";
 import type { ButtonProps } from "@mantine/core";
 import { Affix, Button, createPolymorphicComponent } from "@mantine/core";

+import { MANAGE_ACTION_BUTTON_MIN_WIDTH, MANAGE_AFFIX_POSITION } from "./manage-page.constants";
+
 type MobileAffixButtonProps = Omit<ButtonProps, "visibleFrom" | "hiddenFrom">;

 export const MobileAffixButton = createPolymorphicComponent<"button", MobileAffixButtonProps>(
  forwardRef<HTMLButtonElement, MobileAffixButtonProps>((props, ref) => (
    <>
-      <Button ref={ref} visibleFrom="md" {...props} />
-      <Affix hiddenFrom="md" position={{ bottom: 20, right: 20 }}>
+      <Button ref={ref} visibleFrom="md" miw={MANAGE_ACTION_BUTTON_MIN_WIDTH} {...props} />
+      <Affix hiddenFrom="md" position={MANAGE_AFFIX_POSITION}>
        <Button ref={ref} {...props} />
      </Affix>
    </>
@@ -14,13 +14,13 @@ interface NoResultsProps {

 export const NoResults = ({ icon: Icon, title, action }: NoResultsProps) => {
  return (
-    <Card withBorder bg="transparent">
+    <Card bg="transparent" withBorder={false}>
      <Stack align="center" gap="sm">
        <Icon size="2rem" />
        <Text fw={500} size="lg">
          {title}
        </Text>
-        {!action?.hidden && <Anchor href={action?.href}>{action?.label}</Anchor>}
+        {action && !action.hidden && <Anchor href={action.href}>{action.label}</Anchor>}
      </Stack>
    </Card>
  );
@@ -52,7 +52,7 @@ export const UserAvatarMenu = ({ children, availableUpdatesPromise }: UserAvatar

  return (
    // We use keepMounted so we can add event listeners to prevent navigating away without saving the board
-    <Menu width={300} withArrow withinPortal keepMounted>
+    <Menu width={300} withinPortal keepMounted>
      <Menu.Dropdown>
        <AvailableUpdatesMenuItem availableUpdatesPromise={availableUpdatesPromise} />
        <Menu.Item component={Link} href="/boards" leftSection={<IconHome size="1rem" />}>
@@ -1,9 +0,0 @@
-import baseConfig from "@homarr/eslint-config/base";
-
-/** @type {import('typescript-eslint').Config} */
-export default [
-  {
-    ignores: ["tasks.cjs"],
-  },
-  ...baseConfig,
-];
@@ -4,20 +4,19 @@
  "private": true,
  "license": "Apache-2.0",
  "type": "module",
+  "main": "./src/main.ts",
+  "types": "./src/main.ts",
  "exports": {
    ".": "./src/main.ts"
  },
-  "main": "./src/main.ts",
-  "types": "./src/main.ts",
  "scripts": {
    "clean": "rm -rf .turbo node_modules",
    "dev": "pnpm with-env tsx ./src/main.ts",
-    "format": "prettier --check . --ignore-path ../../.gitignore",
-    "lint": "eslint",
+    "format": "oxfmt --check .",
+    "lint": "oxlint",
    "typecheck": "tsc --noEmit",
    "with-env": "dotenv -e ../../.env --"
  },
-  "prettier": "@homarr/prettier-config",
  "dependencies": {
    "@homarr/analytics": "workspace:^0.1.0",
    "@homarr/auth": "workspace:^0.1.0",
@@ -43,14 +42,10 @@
    "undici": "catalog:"
  },
  "devDependencies": {
-    "@homarr/eslint-config": "workspace:^0.2.0",
-    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
    "@types/node": "catalog:",
    "dotenv-cli": "catalog:",
    "esbuild": "catalog:",
-    "eslint": "catalog:",
-    "prettier": "catalog:",
    "tsx": "catalog:",
    "typescript": "catalog:"
  }
@@ -1,108 +0,0 @@
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-
-import { handshakeAsync } from "@homarr/redis";
-
-import { waitForRedisAsync } from "./main";
-
-const { mockLogger } = vi.hoisted(() => ({
-  mockLogger: {
-    info: vi.fn(),
-    warn: vi.fn(),
-    error: vi.fn(),
-    debug: vi.fn(),
-  },
-}));
-
-vi.mock("./overrides", () => ({}));
-
-vi.mock("@homarr/core/infrastructure/logs", () => ({
-  createLogger: () => mockLogger,
-}));
-
-vi.mock("@homarr/redis", () => ({
-  handshakeAsync: vi.fn(),
-}));
-
-vi.mock("@homarr/cron-jobs", () => ({
-  jobGroup: {
-    initializeAsync: vi.fn().mockResolvedValue(undefined),
-    startAllAsync: vi.fn().mockResolvedValue(undefined),
-  },
-}));
-
-vi.mock("./on-start", () => ({
-  onStartAsync: vi.fn().mockResolvedValue(undefined),
-}));
-
-describe("waitForRedisAsync", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  test("succeeds on first attempt", async () => {
-    vi.mocked(handshakeAsync).mockResolvedValueOnce(undefined);
-
-    await waitForRedisAsync();
-
-    expect(handshakeAsync).toHaveBeenCalledOnce();
-    expect(mockLogger.info).toHaveBeenCalledWith("Redis connection established");
-  });
-
-  test("retries on failure then succeeds", async () => {
-    vi.mocked(handshakeAsync)
-      .mockRejectedValueOnce(new Error("ECONNREFUSED"))
-      .mockRejectedValueOnce(new Error("ECONNREFUSED"))
-      .mockResolvedValueOnce(undefined);
-
-    const promise = waitForRedisAsync();
-
-    await vi.advanceTimersByTimeAsync(500);
-    await vi.advanceTimersByTimeAsync(500);
-    await promise;
-
-    expect(handshakeAsync).toHaveBeenCalledTimes(3);
-    expect(mockLogger.warn).toHaveBeenCalledTimes(2);
-    expect(mockLogger.info).toHaveBeenCalledWith("Redis connection established");
-  });
-
-  test("logs error and proceeds after max retries exhausted", async () => {
-    vi.mocked(handshakeAsync).mockRejectedValue(new Error("ECONNREFUSED"));
-
-    const promise = waitForRedisAsync();
-
-    for (let index = 0; index < 10; index++) {
-      await vi.advanceTimersByTimeAsync(500);
-    }
-    await promise;
-
-    expect(handshakeAsync).toHaveBeenCalledTimes(10);
-    expect(mockLogger.error).toHaveBeenCalledWith("Redis did not become ready after retries, proceeding anyway");
-    expect(mockLogger.info).not.toHaveBeenCalled();
-  });
-
-  test("warns with attempt count on each retry", async () => {
-    vi.mocked(handshakeAsync).mockRejectedValueOnce(new Error("fail")).mockResolvedValueOnce(undefined);
-
-    const promise = waitForRedisAsync();
-
-    await vi.advanceTimersByTimeAsync(500);
-    await promise;
-
-    expect(mockLogger.warn).toHaveBeenCalledWith("Redis not ready, retrying (1/10)...");
-  });
-
-  test("does not retry after success", async () => {
-    vi.mocked(handshakeAsync).mockResolvedValueOnce(undefined);
-
-    await waitForRedisAsync();
-
-    expect(handshakeAsync).toHaveBeenCalledOnce();
-    expect(mockLogger.warn).not.toHaveBeenCalled();
-    expect(mockLogger.error).not.toHaveBeenCalled();
-  });
-});
@@ -1,33 +1,11 @@
 // This import has to be the first import in the file so that the agent is overridden before any other modules are imported.
 import "./overrides";

-import { createLogger } from "@homarr/core/infrastructure/logs";
 import { jobGroup } from "@homarr/cron-jobs";
-import { handshakeAsync } from "@homarr/redis";

 import { onStartAsync } from "./on-start";

-const logger = createLogger({ module: "tasks" });
-
-const MAX_RETRIES = 10;
-const RETRY_DELAY_MS = 500;
-
-export const waitForRedisAsync = async () => {
-  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
-    try {
-      await handshakeAsync();
-      logger.info("Redis connection established");
-      return;
-    } catch {
-      logger.warn(`Redis not ready, retrying (${attempt}/${MAX_RETRIES})...`);
-      await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS));
-    }
-  }
-  logger.error("Redis did not become ready after retries, proceeding anyway");
-};
-
 void (async () => {
-  await waitForRedisAsync();
  await onStartAsync();
  await jobGroup.initializeAsync();
  await jobGroup.startAllAsync();
@@ -1,9 +0,0 @@
-import baseConfig from "@homarr/eslint-config/base";
-
-/** @type {import('typescript-eslint').Config} */
-export default [
-  {
-    ignores: ["wssServer.cjs"],
-  },
-  ...baseConfig,
-];
@@ -4,20 +4,19 @@
  "private": true,
  "license": "Apache-2.0",
  "type": "module",
+  "main": "./src/main.ts",
+  "types": "./src/main.ts",
  "exports": {
    ".": "./src/main.ts"
  },
-  "main": "./src/main.ts",
-  "types": "./src/main.ts",
  "scripts": {
    "clean": "rm -rf .turbo node_modules",
    "dev": "pnpm with-env tsx ./src/main.ts",
-    "format": "prettier --check . --ignore-path ../../.gitignore",
-    "lint": "eslint",
+    "format": "oxfmt --check .",
+    "lint": "oxlint",
    "typecheck": "tsc --noEmit",
    "with-env": "dotenv -e ../../.env --"
  },
-  "prettier": "@homarr/prettier-config",
  "dependencies": {
    "@homarr/api": "workspace:^0.1.0",
    "@homarr/auth": "workspace:^0.1.0",
@@ -32,13 +31,9 @@
    "ws": "catalog:"
  },
  "devDependencies": {
-    "@homarr/eslint-config": "workspace:^0.2.0",
-    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
    "@types/ws": "catalog:",
    "esbuild": "catalog:",
-    "eslint": "catalog:",
-    "prettier": "catalog:",
    "typescript": "catalog:"
  }
 }
@@ -1,4 +1,4 @@
-FROM node:24.15.0-trixie AS base
+FROM node:24.16.0-trixie AS base
 WORKDIR /app
 COPY package.json .
 COPY pnpm-lock.yaml .
@@ -4,11 +4,11 @@
  "dependencies": {
    "better-sqlite3": "^12.10.0"
  },
-  "packageManager": "pnpm@10.33.4",
  "engines": {
-    "node": ">=24.15.0",
+    "node": ">=24.16.0",
    "pnpm": ">=10.33.4"
  },
+  "packageManager": "pnpm@10.33.4",
  "pnpm": {
    "onlyBuiltDependencies": [
      "better-sqlite3"
@@ -51,4 +51,4 @@ services:

 volumes:
  mysql_data:
-  postgresql_data:
+  postgresql_data:
Author	SHA1	Message	Date
ajnart	4361ccf7f0	style: auto-fix lint and format	2026-05-28 08:59:26 +00:00
Thomas	d5fd6905ea	Merge branch 'dev' into feat/impeccable-uiux-fixes	2026-05-28 10:58:29 +02:00
Thomas	c252b4f9ac	feat(manage): unified management page layout (#5758 )	2026-05-28 10:56:46 +02:00
homarr-renovate[bot]	4f2b3cf3ee	chore(deps): update node.js to v24.16.0 (#5790 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-28 08:09:15 +00:00
Vivaan Dhawan	b19549b601	fix: parse Speedtest Tracker created_at as local time (#5751 )	2026-05-28 07:48:00 +00:00
homarr-renovate[bot]	a0cc68798d	chore(deps): update mantine monorepo to ^9.2.1 (#5801 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-28 03:50:55 +00:00
homarr-renovate[bot]	9a538941ee	chore(deps): update dependency ws to ^8.21.0 (#5804 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-27 23:20:59 +00:00
homarr-renovate[bot]	fc12500b3e	chore(deps): update tanstack-query monorepo to ^5.100.13 (#5803 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-27 21:45:28 +00:00
homarr-renovate[bot]	64dccec362	chore(deps): update dependency oxfmt to ^0.51.0 (#5799 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-27 16:46:40 +00:00
homarr-renovate[bot]andThomas Camlong	f7ea1b33a0	chore(deps): update mantine monorepo to v9 (#5411 ) Co-authored-by: Thomas Camlong <thomas@ajnart.fr>	2026-05-27 17:29:52 +02:00
homarr-renovate[bot]	fe3cebb902	chore(deps): update dependency hono@<4.6.5 to >=4.12.22 (#5797 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-27 13:06:33 +00:00
homarr-renovate[bot]	ba1d213870	chore(deps): update dependency oxlint to ^1.66.0 (#5798 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-27 10:00:11 +00:00
Thomas	8f03a38de5	perf(boards): parallelize board page data fetching (#5736 )	2026-05-27 07:44:37 +00:00
Thomas Meier Lukas Meierschlumpf	605af19cd8	refactor: replace ESLint + Prettier with OXC (oxlint + oxfmt) (#5741 ) Co-authored-by: Meier Lukas <meierschlumpf@gmail.com> Co-authored-by: Meierschlumpf <63781622+Meierschlumpf@users.noreply.github.com>	2026-05-27 09:37:44 +02:00
homarr-renovate[bot]	b4921af60d	chore(deps): update dependency sass to ^1.100.0 (#5795 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-27 05:24:00 +00:00
homarr-renovate[bot]	32385206ad	chore(deps): update tiptap monorepo to v3.23.6 (#5793 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-26 21:03:11 +00:00
homarr-renovate[bot]	7e59ba3d5e	chore(deps): update dependency vite@>=5.0.0 <=5.4.18 to >=8.0.14 (#5791 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-26 07:57:31 +00:00
homarr-renovate[bot]	81caaa9d6c	chore(deps): update vitest monorepo to ^4.1.7 (#5789 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-25 08:30:36 +00:00
homarr-renovate[bot]	09243148da	chore(deps): update dependency ldapts to v8.1.8 (#5788 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-25 04:03:12 +00:00
homarr-update-contributors[bot]	c7c57887cf	chore: update contributors (#5771 )	2026-05-24 22:44:36 +02:00
homarr-renovate[bot]	990a924631	chore(deps): update testcontainers-node monorepo to v12 (#5785 )	2026-05-24 22:09:13 +02:00
homarr-renovate[bot]	83caf3ef4b	chore(deps): update dependency @types/react to v19.2.15 (#5787 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-24 19:26:04 +00:00
homarr-renovate[bot]	991f07ae51	chore(deps): update tiptap monorepo to v3.23.5 (#5783 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-24 15:12:39 +00:00
homarr-renovate[bot]	bc05128cd4	chore(deps): update dependency hono@<4.6.5 to >=4.12.21 (#5782 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-24 13:34:35 +00:00
homarr-renovate[bot]	cf0fb8a879	chore(deps): update dependency hono@<4.6.5 to >=4.12.20 (#5780 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-24 11:25:35 +00:00
homarr-renovate[bot]	1f31735ee0	chore(deps): update dependency isomorphic-dompurify to ^3.14.0 (#5779 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-24 10:02:26 +00:00
homarr-crowdin[bot]	ff974bf343	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2026-05-24 02:04:49 +00:00
homarr-renovate[bot]	d42bbfce17	chore(deps): update tanstack-query monorepo to ^5.100.11 (#5777 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-23 20:13:50 +00:00
homarr-renovate[bot]	0130303e74	chore(deps): update dependency semver-parser to ^4.2.0 (#5766 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-23 15:08:34 +00:00
AustinandClaude Sonnet 4.6	66212b4e47	feat(board): persist category collapse state in localStorage for guests (#5714 ) * feat(board): persist category collapse state in localStorage for guests Authenticated users already had their collapse state saved server-side. This extends the same behaviour to unauthenticated (guest) users by reading/writing localStorage keyed by section ID. On mount, if the user is a guest, the stored value is applied to the disclosure. On toggle, guests write to localStorage instead of calling the protected API mutation. Closes #3355 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor: set localStorage value as useDisclosure default instead of useEffect Replaces the useEffect that read localStorage after mount with a direct initial value computation passed to useDisclosure. Removes the effect, the open/close destructuring, and the useEffect import. Note: initialCollapsed is computed during render rather than post-mount, which may cause a hydration mismatch on SSR if localStorage differs from the server-provided section.collapsed. The typeof window guard handles the SSR case. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-23 16:25:10 +02:00
Thomas	f10bb3ae23	feat: auto-open widget settings on add with all integrations pre-selected (#5767 ) When adding a widget from the "Choose item to add" modal, the widget edit modal now opens immediately after placement, allowing the user to configure options and integrations before the widget renders. All available integrations for the widget are selected by default.	2026-05-23 16:19:36 +02:00
homarr-renovate[bot]	af1991a4a3	chore(deps): update dependency pg to ^8.21.0 (#5776 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-23 13:35:11 +00:00
homarr-releases[bot]	9a9551130c	chore: update bug report template (#5775 ) Co-authored-by: Releases Homarr <175486441+homarr-releases[bot]@users.noreply.github.com>	2026-05-22 21:01:54 +00:00
Meier Lukas	a93f03eae4	Merge branch 'main' into dev	2026-05-22 22:46:15 +02:00
Thomas	df4b57bd41	perf(boards): remove loading overlay and show board immediately (#5735 )	2026-05-22 07:06:48 +00:00
Thomas Camlong	b99f28f8c1	chore: align with pr comments	2026-05-18 22:07:54 +02:00
Releases Homarr	48ef8eb6c0	chore(release): 1.61.1 [skip ci]	2026-05-18 19:45:44 +00:00
Austin	e9142c0dbc	fix(downloads-widget): increase name column default width ratio	2026-05-18 21:44:47 +02:00
Thomas Camlong	1d7c121dad	chore: fix formatting	2026-05-18 13:46:19 +02:00
Thomas Camlong	0a4a9f98ab	fix: matine ui fixes for concistency	2026-05-18 11:00:37 +02:00
Thomas Camlong	f902ca439d	fix: matine ui fixes for concistency	2026-05-18 11:00:24 +02:00
@@ -1 +1 @@
 .15.0
 .16.0