feat: auto-open widget settings on add with all integrations pre-selected

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.

.deepsource.toml

@@ -3,6 +3,9 @@ version = 1
 [[analyzers]]
 name = "javascript"
 
-[analyzers.meta]
-plugins = ["react"]
-environment = ["nodejs"]
+  [analyzers.meta]
+  plugins = ["react"]
+  environment = ["nodejs"]
+
+[[transformers]]
+name = "prettier"

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -33,7 +33,6 @@ 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

.github/workflows/code-quality.yml

@@ -24,38 +24,6 @@ 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
@@ -86,7 +54,7 @@ jobs:
         uses: ./tooling/github/setup
 
       - name: Format
-        run: pnpm turbo format --affected --continue
+        run: pnpm turbo format --affected --continue -- --cache --cache-location node_modules/.cache/.prettiercache
 
   typecheck:
     runs-on: ubuntu-latest

.github/workflows/deployment-docker-image.yml

@@ -66,7 +66,7 @@ jobs:
       - uses: actions/setup-node@v6
         if: env.SKIP_RELEASE == 'false'
         with:
-          node-version: 24.16.0
+          node-version: 24.15.0
           package-manager-cache: false
       - run: npm i -g pnpm
         if: env.SKIP_RELEASE == 'false'

.nvmrc

@@ -1 +1 @@
-24.16.0
+24.15.0

.oxfmtrc.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "printWidth": 120,
-  "endOfLine": "lf",
-  "sortPackageJson": true,
-  "ignorePatterns": ["**/*.cjs", "**/lang/**", "static-data/**", "CHANGELOG.md"]
-}

.oxlintrc.json

@@ -1,37 +0,0 @@
-{
-  "$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" }
-  }
-}

.vscode/i18n-ally-custom-framework.yml

@@ -31,5 +31,6 @@ 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

.vscode/launch.json

@@ -15,7 +15,9 @@
       "request": "launch",
       "command": "pnpm docker:dev",
       "cwd": "${workspaceFolder}",
-      "skipFiles": ["<node_internals>/**"]
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
     },
     {
       "name": "lint fix",
@@ -23,7 +25,9 @@
       "request": "launch",
       "command": "pnpm lint:fix",
       "cwd": "${workspaceFolder}",
-      "skipFiles": ["<node_internals>/**"]
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
     },
     {
       "name": "format fix",
@@ -31,7 +35,9 @@
       "request": "launch",
       "command": "pnpm format:fix",
       "cwd": "${workspaceFolder}",
-      "skipFiles": ["<node_internals>/**"]
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
     },
     {
       "name": "db push",
@@ -63,7 +69,9 @@
       "request": "launch",
       "command": "pnpm test",
       "cwd": "${workspaceFolder}",
-      "skipFiles": ["<node_internals>/**"]
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
     },
     {
       "name": "test ui",
@@ -71,7 +79,9 @@
       "request": "launch",
       "command": "pnpm test:ui",
       "cwd": "${workspaceFolder}",
-      "skipFiles": ["<node_internals>/**"]
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
     }
   ]
 }

.vscode/settings.json

@@ -1,6 +1,13 @@
 {
+  "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",
@@ -27,7 +34,11 @@
   ],
   "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",
 }

CHANGELOG.md

@@ -1,9 +1,3 @@
-## [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

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24.16.0-alpine AS base
+FROM node:24.15.0-alpine AS base
 
 FROM base AS builder
 RUN apk add --no-cache libc6-compat

apps/nextjs/eslint.config.js

@@ -0,0 +1,30 @@
+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",
+    },
+  },
+];

apps/nextjs/package.json

@@ -7,12 +7,13 @@
     "build": "pnpm with-env next build",
     "clean": "git clean -xdf .next .turbo node_modules",
     "dev": "pnpm with-env next dev",
-    "format": "oxfmt .",
-    "lint": "oxlint",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
     "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:",
@@ -91,6 +92,8 @@
     "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:",
@@ -99,7 +102,9 @@
     "@types/react-dom": "catalog:",
     "@types/swagger-ui-react": "catalog:",
     "concurrently": "catalog:",
+    "eslint": "catalog:",
     "node-loader": "catalog:",
+    "prettier": "catalog:",
     "typescript": "catalog:"
   }
 }

apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx

@@ -2,14 +2,13 @@
 
 import type { PropsWithChildren } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { DirectionProvider, MantineProvider } from "@mantine/core";
+import { createTheme, 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,
@@ -18,7 +17,14 @@ export const CustomMantineProvider = ({
   const manager = useColorSchemeManager();
   return (
     <DirectionProvider>
-      <MantineProvider defaultColorScheme={defaultColorScheme} colorSchemeManager={manager} theme={theme}>
+      <MantineProvider
+        defaultColorScheme={defaultColorScheme}
+        colorSchemeManager={manager}
+        theme={createTheme({
+          primaryColor: "red",
+          autoContrast: true,
+        })}
+      >
         {children}
       </MantineProvider>
     </DirectionProvider>

apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx

@@ -59,7 +59,7 @@ export default async function InviteUsagePage(props: InviteUsagePageProps) {
             {t("subtitle")}
           </Text>
         </Stack>
-        <Card w={64 * 6} maw="90vw">
+        <Card withBorder w={64 * 6} maw="90vw">
           <RegistrationForm invite={invite} />
         </Card>
         <Text size="xs" c="gray.5" ta="center">

apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx

@@ -9,7 +9,7 @@ import { z } from "zod/v4";
 
 import { signIn } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import type { UseFormReturnType } from "@homarr/form";
+import type { useForm } 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: UseFormReturnType<FormType>;
+  form: ReturnType<typeof useForm<FormType, (values: FormType) => FormType>>;
   provider: "credentials" | "ldap";
 }
 
@@ -198,7 +198,7 @@ const PasswordForgottenCollapse = ({ username }: PasswordForgottenCollapseProps)
         {tForgotPassword("label")}
       </Anchor>
 
-      <Collapse expanded={visible}>
+      <Collapse in={visible}>
         <Card>
           <Stack gap="xs">
             <Text size="sm">{tForgotPassword("description")}</Text>

apps/nextjs/src/app/[locale]/auth/login/page.tsx

@@ -37,7 +37,7 @@ export default async function Login(props: LoginProps) {
             {t("subtitle")}
           </Text>
         </Stack>
-        <Card w={64 * 6} maw="90vw">
+        <Card withBorder w={64 * 6} maw="90vw">
           <LoginForm
             providers={env.AUTH_PROVIDERS}
             oidcClientName={env.AUTH_OIDC_CLIENT_NAME}

apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx

@@ -1,27 +1,70 @@
 "use client";
 
-import { Box, Stack } from "@mantine/core";
+import { useCallback, useRef } from "react";
+import { Box, LoadingOverlay, 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 />
-      <Stack h="100%">
+      <LoadingOverlay
+        visible={!isReady}
+        transitionProps={{ duration: 500 }}
+        loaderProps={{ size: "lg" }}
+        h={fullHeightWithoutHeaderAndFooter}
+      />
+      <Stack ref={ref} h="100%" style={{ visibility: isReady ? "visible" : "hidden" }}>
         {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} />

apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx

@@ -41,11 +41,13 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
     }),
     // eslint-disable-next-line no-restricted-syntax
     page: async ({ params }: { params: Promise<TParams> }) => {
-      const resolvedParams = await params;
+      const session = await auth();
+      const integrations = await getIntegrationsWithPermissionsAsync(session);
+
+      const board = await getInitialBoard(await params);
       const queryClient = getQueryClient();
 
-      const [board, session] = await Promise.all([getInitialBoard(resolvedParams), auth()]);
-
+      // Prefetch item data
       const itemsMap = board.items.reduce((acc, item) => {
         const existing = acc.get(item.kind);
         if (existing) {
@@ -56,20 +58,17 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
         return acc;
       }, new Map<WidgetKind, Item[]>());
 
-      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 },
-              ),
-            );
-          }),
-        ),
-      ]);
+      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 },
+            ),
+          );
+        });
+      }
 
       return (
         <HydrationBoundary state={dehydrate(queryClient)}>

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -109,7 +109,7 @@ const AddMenu = () => {
   }, [openAppSelectModal, createItem]);
 
   return (
-    <Menu position="bottom-end">
+    <Menu position="bottom-end" withArrow>
       <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">
+    <Menu position="bottom-end" withArrow>
       <Menu.Target>
         <HeaderButton w="auto" px={4}>
           <IconReplace stroke={1.5} />

apps/nextjs/src/app/[locale]/boards/(content)/_ready-context.tsx

@@ -1,19 +1,42 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { createContext, useCallback, useContext } 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";
 
 const BoardReadyContext = createContext<{
+  isReady: boolean;
   markAsReady: (id: string) => void;
 } | null>(null);
 
 export const BoardReadyProvider = ({ children }: PropsWithChildren) => {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  const markAsReady = useCallback((_id: string) => {}, []);
+  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]));
+  }, []);
 
   return (
     <BoardReadyContext.Provider
       value={{
+        isReady: board.sections.length === readySections.length,
         markAsReady,
       }}
     >
@@ -31,3 +54,13 @@ export const useMarkSectionAsReady = () => {
 
   return context.markAsReady;
 };
+
+export const useIsBoardReady = () => {
+  const context = useContext(BoardReadyContext);
+
+  if (!context) {
+    throw new Error("BoardReadyProvider is required");
+  }
+
+  return context.isReady;
+};

apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx

@@ -24,7 +24,6 @@ export const BoardMantineProvider = ({
     },
     primaryColor: "primaryColor",
     autoContrast: true,
-    defaultRadius: "sm",
     fontSizes: {
       "2xl": rem(24),
       "3xl": rem(28),

apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx

@@ -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 expanded={showPreview}>
+            <Collapse in={showPreview}>
               <Stack>
                 <ColorsPreview previewColor={form.values.primaryColor} />
                 <ColorsPreview previewColor={form.values.secondaryColor} />

apps/nextjs/src/app/[locale]/init/_steps/finish/init-finish.tsx

@@ -15,7 +15,7 @@ export const InitFinish = async () => {
   const tFinish = await getScopedI18n("init.step.finish");
 
   return (
-    <Card w={64 * 6} maw="90vw">
+    <Card w={64 * 6} maw="90vw" withBorder>
       <Stack>
         <Text>{tFinish("description")}</Text>
 

apps/nextjs/src/app/[locale]/init/_steps/group/init-group.tsx

@@ -34,7 +34,7 @@ export const InitGroup = () => {
   };
 
   return (
-    <Card w={64 * 6} maw="90vw">
+    <Card w={64 * 6} maw="90vw" withBorder>
       <form onSubmit={form.onSubmit(handleSubmitAsync)}>
         <Stack>
           <TextInput

apps/nextjs/src/app/[locale]/init/_steps/import/file-info-card.tsx

@@ -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" withBorder={false}>
+    <Card w={64 * 12 + 8} maw="90vw">
       <Group justify="space-between" align="center" wrap="nowrap">
         <Group>
           <Text fw={500} lineClamp={1} style={{ wordBreak: "break-all" }}>

apps/nextjs/src/app/[locale]/init/_steps/import/init-import.tsx

@@ -20,7 +20,7 @@ export const InitImport = () => {
 
   if (!file) {
     return (
-      <Card w={64 * 12 + 8} maw="90vw">
+      <Card w={64 * 12 + 8} maw="90vw" withBorder>
         <ImportDropZone
           loading={isPending}
           updateFile={(file) => {

apps/nextjs/src/app/[locale]/init/_steps/settings/init-settings.tsx

@@ -30,7 +30,7 @@ export const InitSettings = () => {
   return (
     <form onSubmit={form.onSubmit(handleSubmitAsync)}>
       <Stack>
-        <Card w={64 * 12 + 8} maw="90vw">
+        <Card w={64 * 12 + 8} maw="90vw" withBorder>
           <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">
+        <Card w={64 * 12 + 8} maw="90vw" withBorder>
           <Stack gap="sm">
             <Text fw={500}>{tSection("crawlingAndIndexing.title")}</Text>
 

apps/nextjs/src/app/[locale]/init/_steps/start/init-start.tsx

@@ -10,7 +10,7 @@ export const InitStart = async () => {
   const tStart = await getScopedI18n("init.step.start");
 
   return (
-    <Card w={64 * 6} maw="90vw">
+    <Card w={64 * 6} maw="90vw" withBorder>
       <Stack>
         <Text>{tStart("description")}</Text>
 

apps/nextjs/src/app/[locale]/init/_steps/user/init-user.tsx

@@ -4,7 +4,7 @@ import { InitUserForm } from "./init-user-form";
 
 export const InitUser = () => {
   return (
-    <Card w={64 * 6} maw="90vw">
+    <Card w={64 * 6} maw="90vw" withBorder>
       <InitUserForm />
     </Card>
   );

apps/nextjs/src/app/[locale]/layout.tsx

@@ -44,13 +44,13 @@ const fontSans = Inter({
 export const generateMetadata = async (): Promise<Metadata> => ({
   title: "Homarr",
   description:
-    "A self-hosted dashboard for the *arr stack and your entire homelab. Integrates with 50+ services, real-time widgets, no config files.",
+    "Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips.",
   openGraph: {
     title: "Homarr Dashboard",
     description:
-      "A self-hosted dashboard for the *arr stack and your entire homelab. Integrates with 50+ services, real-time widgets, no config files.",
+      "Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips.",
     url: "https://homarr.dev",
-    siteName: "Homarr",
+    siteName: "Homarr Documentation",
   },
   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 pauseResetOnHover="notification" />
+          <Notifications />
           <ServiceWorkerRegistration />
           {props.children}
         </StackedProvider>

apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx

@@ -45,6 +45,7 @@ export const HeroBanner = async () => {
                     <Image
                       key={`grid-column-${columnIndex}-scroll-1-${index}`}
                       src={icon}
+                      radius="md"
                       fit={"contain"}
                       w={50}
                       h={50}
@@ -56,6 +57,7 @@ export const HeroBanner = async () => {
                     <Image
                       key={`grid-column-${columnIndex}-scroll-2-${index}`}
                       src={icon}
+                      radius="md"
                       fit={"contain"}
                       w={50}
                       h={50}

apps/nextjs/src/app/[locale]/manage/about/page.tsx

@@ -90,7 +90,9 @@ export default async function AboutPage() {
         <Group py="lg">
           <Image src={homarrLogoPath} width={100} height={100} alt="" />
           <Stack gap={0}>
-            <Title order={1}>Homarr</Title>
+            <Title order={1} tt="uppercase">
+              Homarr
+            </Title>
             <Title order={2}>{t("version", { version })}</Title>
           </Stack>
         </Group>
@@ -193,9 +195,9 @@ export default async function AboutPage() {
                     href={`https://www.npmjs.com/package/${name}`}
                     target="_blank"
                   >
-                    <Card radius="md" p="xs" className={classes.dependencyCard}>
+                    <Card withBorder radius="md" p="xs" className={classes.dependencyCard}>
                       <Group gap="sm" wrap="nowrap">
-                        <ThemeIcon variant="light" size="lg">
+                        <ThemeIcon variant="light" size="lg" radius="md">
                           <IconPackage size="1.5rem" stroke={1.5} />
                         </ThemeIcon>
 

apps/nextjs/src/app/[locale]/manage/apps/page.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from "react";
 import { redirect } from "next/navigation";
-import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text } from "@mantine/core";
+import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
 import { IconBox, IconPencil } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
@@ -11,8 +11,9 @@ import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { Link, SearchInput, TablePagination } from "@homarr/ui";
 
-import { ManagePageLayout } from "~/components/manage/manage-page-layout";
+import { ManageContainer } from "~/components/manage/manage-container";
 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";
 
@@ -38,31 +39,34 @@ export default async function AppsPage(props: AppsPageProps) {
   const { items: apps, totalCount } = await api.app.getPaginated(searchParams);
   const t = await getScopedI18n("app");
 
-  const canCreate = session.user.permissions.includes("app-create");
-
   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>
+    <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>
+        )}
+
+        {/* Added margin to not hide pagination behind affix-button */}
+        <Group justify="end" mb={48}>
+          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
+        </Group>
+      </Stack>
+    </ManageContainer>
   );
 }
 
@@ -75,7 +79,7 @@ const AppCard = async ({ app }: AppCardProps) => {
   const session = await auth();
 
   return (
-    <Card>
+    <Card withBorder>
       <Group justify="space-between" wrap="nowrap">
         <Group align="top" justify="start" wrap="nowrap" style={{ flex: "1" }}>
           <Avatar

apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx

@@ -1,38 +1,43 @@
 "use client";
 
-import { Button, Menu } from "@mantine/core";
+import { Affix, 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 (
-    <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>
+    <>
+      <Button.Group visibleFrom="md">{buttonGroupContent}</Button.Group>
+      <Affix hiddenFrom="md" position={{ bottom: 20, right: 20 }}>
+        <Button.Group>{buttonGroupContent}</Button.Group>
+      </Affix>
+    </>
   );
 };

apps/nextjs/src/app/[locale]/manage/boards/page.tsx

@@ -9,17 +9,12 @@ import {
   Group,
   Menu,
   MenuTarget,
+  Stack,
   Text,
+  Title,
   Tooltip,
 } from "@mantine/core";
-import {
-  IconDeviceMobile,
-  IconDotsVertical,
-  IconHomeFilled,
-  IconLayoutDashboard,
-  IconLock,
-  IconWorld,
-} from "@tabler/icons-react";
+import { IconDeviceMobile, IconDotsVertical, IconHomeFilled, IconLock, IconWorld } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -28,8 +23,8 @@ import { getScopedI18n } from "@homarr/translation/server";
 import { Link, UserAvatar } from "@homarr/ui";
 
 import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
-import { ManagePageLayout } from "~/components/manage/manage-page-layout";
-import { NoResults } from "~/components/no-results";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { BoardCardMenuDropdown } from "./_components/board-card-menu-dropdown";
 import { CreateBoardButton } from "./_components/create-board-button";
 
@@ -40,22 +35,23 @@ export default async function ManageBoardsPage() {
   const canCreateBoards = session?.user.permissions.includes("board-create");
 
   return (
-    <ManagePageLayout
-      title={t("title")}
-      primaryAction={canCreateBoards ? <CreateBoardButton /> : undefined}
-      floatingPrimaryAction={canCreateBoards}
-    >
-      {boards.length === 0 && <NoResults icon={IconLayoutDashboard} title={t("noResults.title")} />}
-      {boards.length > 0 && (
-        <Grid>
+    <ManageContainer>
+      <DynamicBreadcrumb />
+      <Stack>
+        <Group justify="space-between">
+          <Title mb="md">{t("title")}</Title>
+          {canCreateBoards && <CreateBoardButton />}
+        </Group>
+
+        <Grid mb={{ base: "xl", md: 0 }}>
           {boards.map((board) => (
             <GridCol span={{ base: 12, md: 6 }} key={board.id}>
               <BoardCard board={board} />
             </GridCol>
           ))}
         </Grid>
-      )}
-    </ManagePageLayout>
+      </Stack>
+    </ManageContainer>
   );
 }
 
@@ -70,14 +66,16 @@ const BoardCard = async ({ board }: BoardCardProps) => {
   const VisibilityIcon = board.isPublic ? IconWorld : IconLock;
 
   return (
-    <Card>
+    <Card radius="lg" withBorder>
       <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={700}>{board.name}</Text>
+            <Text fw="bolder" tt="uppercase">
+              {board.name}
+            </Text>
           </Group>
 
           <Group>
@@ -125,7 +123,6 @@ 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>

apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx

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

apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-segmented-control.tsx

@@ -12,7 +12,7 @@ interface FormType {
 interface SecretKindsSegmentedControlProps<TFormType extends FormType> {
   defaultKinds?: IntegrationSecretKind[];
   secretKinds: IntegrationSecretKind[][];
-  form: UseFormReturnType<TFormType, TFormType>;
+  form: UseFormReturnType<TFormType, (values: TFormType) => TFormType>;
 }
 
 export const SecretKindsSegmentedControl = <TFormType extends FormType>({

apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/integration-test-connection-error.tsx

@@ -18,7 +18,7 @@ export const IntegrationTestConnectionError = ({ error, url }: IntegrationTestCo
   const causeArray = useMemo(() => toCauseArray(error.cause), [error.cause]);
 
   return (
-    <Card style={{ borderColor: getMantineColor("red", 8) }}>
+    <Card withBorder style={{ borderColor: getMantineColor("red", 8) }}>
       <Stack>
         <Stack gap="sm">
           <Text size="lg" fw={500} c="red.8">

apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/test-connection-certificate.tsx

@@ -216,7 +216,7 @@ export const CertificateDetailsCard = ({ certificate }: CertificateDetailsProps)
   const tCertificateField = useScopedI18n("certificate.field");
 
   return (
-    <Card>
+    <Card withBorder>
       <Text fw={500}>{tDetails("title")}</Text>
       <Group justify="space-between">
         <Text size="sm" c="dimmed">

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx

@@ -226,7 +226,7 @@ const AppForm = ({ form, canCreateApps }: { form: UseFormReturnType<FormType>; c
         description={t("integration.field.createApp.description")}
       />
 
-      <Collapse expanded={form.values.hasApp}>
+      <Collapse in={form.values.hasApp}>
         <Fieldset legend={t("integration.field.app.sectionTitle")}>
           <Stack gap="sm">
             {canCreateApps && (

apps/nextjs/src/app/[locale]/manage/integrations/page.module.css

@@ -8,7 +8,7 @@
   border: 1px solid transparent;
   position: relative;
   z-index: 0;
-  transition: background-color 150ms ease;
+  transition: transform 150ms ease;
   overflow: hidden;
 
   &[data-first="true"] {
@@ -20,9 +20,11 @@
   }
 
   &[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);
   }
 }

apps/nextjs/src/app/[locale]/manage/integrations/page.tsx

@@ -7,7 +7,9 @@ import {
   AccordionPanel,
   ActionIcon,
   ActionIconGroup,
+  Affix,
   Anchor,
+  Box,
   Button,
   Divider,
   Group,
@@ -22,8 +24,9 @@ import {
   TableThead,
   TableTr,
   Text,
+  Title,
 } from "@mantine/core";
-import { IconChevronDown, IconPencil, IconPlugX } from "@tabler/icons-react";
+import { IconChevronDown, IconChevronUp, IconPencil, IconPlugX } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -34,8 +37,8 @@ import { getIntegrationName } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 import { CountBadge, IntegrationAvatar, Link } from "@homarr/ui";
 
-import { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action";
-import { ManagePageLayout } from "~/components/manage/manage-page-layout";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NoResults } from "~/components/no-results";
 import { env } from "~/env";
 import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
@@ -63,23 +66,38 @@ export default async function IntegrationsPage(props: IntegrationsPageProps) {
   const canCreateIntegrations = session.user.permissions.includes("integration-create");
 
   return (
-    <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>
+    <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>
   );
 }
 

apps/nextjs/src/app/[locale]/manage/medias/page.tsx

@@ -4,15 +4,17 @@ import {
   Anchor,
   Group,
   Image,
+  Stack,
   Table,
   TableTbody,
   TableTd,
   TableTh,
   TableThead,
   TableTr,
+  Title,
   Tooltip,
 } from "@mantine/core";
-import { IconExternalLink, IconPhoto } from "@tabler/icons-react";
+import { IconExternalLink } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -24,9 +26,8 @@ import { createLocalImageUrl } from "@homarr/icons/local";
 import { getI18n } from "@homarr/translation/server";
 import { Link, SearchInput, TablePagination, UserAvatar } from "@homarr/ui";
 
-import { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action";
-import { ManagePageLayout } from "~/components/manage/manage-page-layout";
-import { NoResults } from "~/components/no-results";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { CopyMedia } from "./_actions/copy-media";
 import { DeleteMedia } from "./_actions/delete-media";
 import { IncludeFromAllUsersSwitch } from "./_actions/show-all";
@@ -47,7 +48,7 @@ interface MediaListPageProps {
   searchParams: Promise<inferSearchParamsFromSchema<typeof searchParamsSchema>>;
 }
 
-export default async function MediaListPage(props: MediaListPageProps) {
+export default async function GroupsListPage(props: MediaListPageProps) {
   const session = await auth();
 
   if (!session) {
@@ -57,31 +58,22 @@ export default async function MediaListPage(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 (
-    <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} />
-          )}
+    <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 />}
         </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>
@@ -98,8 +90,13 @@ export default async function MediaListPage(props: MediaListPageProps) {
             ))}
           </TableTbody>
         </Table>
-      )}
-    </ManagePageLayout>
+
+        {/* Added margin to not hide pagination behind affix-button */}
+        <Group justify="end" mb={48}>
+          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
+        </Group>
+      </Stack>
+    </ManageContainer>
   );
 }
 

apps/nextjs/src/app/[locale]/manage/not-found.tsx

@@ -7,7 +7,9 @@ export default async function NotFound() {
   return (
     <Center h="100%">
       <Stack align="center">
-        <Title order={1}>{t("title")}</Title>
+        <Title order={1} tt="uppercase">
+          {t("title")}
+        </Title>
         <Text>{t("text")}</Text>
       </Stack>
     </Center>

apps/nextjs/src/app/[locale]/manage/page.tsx

@@ -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}>
+          <Card component={Link} href={statistic.path} key={statistic.path} radius="lg">
             <Group justify="space-between" wrap="nowrap">
               <Group wrap="nowrap">
-                <Text size="xl" fw={700}>
+                <Text size="2.4rem" fw="bolder">
                   {statistic.count}
                 </Text>
                 <Stack gap={0}>
-                  <Text c="dimmed" size="xs">
+                  <Text c="red" size="xs">
                     {t(`statisticLabel.${statistic.subtitleKey}`)}
                   </Text>
-                  <Text fw={600}>{t(`statistic.${statistic.titleKey}`)}</Text>
+                  <Text fw="bold">{t(`statistic.${statistic.titleKey}`)}</Text>
                 </Stack>
               </Group>
-              <IconArrowRight size={16} stroke={1.5} color="var(--mantine-color-dimmed)" />
+              <IconArrowRight />
             </Group>
           </Card>
         ))}

apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
-import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text } from "@mantine/core";
+import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
 import { IconPencil, IconSearch } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
@@ -10,8 +10,9 @@ import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { Link, SearchInput, TablePagination } from "@homarr/ui";
 
-import { ManagePageLayout } from "~/components/manage/manage-page-layout";
+import { ManageContainer } from "~/components/manage/manage-container";
 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";
 
@@ -37,31 +38,34 @@ export default async function SearchEnginesPage(props: SearchEnginesPageProps) {
 
   const tEngine = await getScopedI18n("search.engine");
 
-  const canCreate = session.user.permissions.includes("search-engine-create");
-
   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>
+    <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>
+        )}
+
+        {/* Added margin to not hide pagination behind affix-button */}
+        <Group justify="end" mb={48}>
+          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
+        </Group>
+      </Stack>
+    </ManageContainer>
   );
 }
 
@@ -74,7 +78,7 @@ const SearchEngineCard = async ({ searchEngine }: SearchEngineCardProps) => {
   const session = await auth();
 
   return (
-    <Card>
+    <Card withBorder>
       <Group justify="space-between" wrap="nowrap">
         <Group align="top" justify="start" wrap="nowrap" style={{ flex: 1 }}>
           <Avatar

apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx

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

apps/nextjs/src/app/[locale]/manage/settings/_components/crawling-and-indexing.settings.tsx

@@ -41,11 +41,11 @@ export const CrawlingAndIndexingSettings = ({ initialData }: CrawlingAndIndexing
     <>
       <Title order={2}>{t("title")}</Title>
 
-      <Card pos="relative">
+      <Card pos="relative" withBorder>
         <Text c={"dimmed"} mb={"lg"}>
           {t("warning")}
         </Text>
-        <LoadingOverlay visible={isPending} />
+        <LoadingOverlay visible={isPending} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
         <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")} />

apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx

@@ -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;
     }

apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx

@@ -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}>
+            <Card key={cert.fileName} withBorder>
               <Group wrap="nowrap">
                 {cert.isError ? (
                   <IconAlertTriangle

apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx

@@ -107,23 +107,6 @@ export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"
     refetchOnReconnect: false,
   });
   const relativeTime = useTimeAgo(data.timestamp);
-  const utils = clientApi.useUtils();
-  const { mutate, isPending } = clientApi.docker.invalidate.useMutation({
-    async onSuccess() {
-      await utils.docker.getContainers.invalidate();
-      showSuccessNotification({
-        title: tDocker("action.refresh.notification.success.title"),
-        message: tDocker("action.refresh.notification.success.message"),
-      });
-    },
-    onError() {
-      showErrorNotification({
-        title: tDocker("action.refresh.notification.error.title"),
-        message: tDocker("action.refresh.notification.error.message"),
-      });
-    },
-  });
-
   const table = useTranslatedMantineReactTable({
     data: data.containers,
     enableDensityToggle: false,
@@ -142,11 +125,35 @@ export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"
     },
 
     initialState: { density: "xs", showGlobalFilter: true },
-    renderTopToolbarCustomActions: () => (
-      <Button variant="default" rightSection={<IconRefresh size="1rem" />} onClick={() => mutate()} loading={isPending}>
-        {tDocker("action.refresh.label")}
-      </Button>
-    ),
+    renderTopToolbarCustomActions: () => {
+      const utils = clientApi.useUtils();
+      const { mutate, isPending } = clientApi.docker.invalidate.useMutation({
+        async onSuccess() {
+          await utils.docker.getContainers.invalidate();
+          showSuccessNotification({
+            title: tDocker("action.refresh.notification.success.title"),
+            message: tDocker("action.refresh.notification.success.message"),
+          });
+        },
+        onError() {
+          showErrorNotification({
+            title: tDocker("action.refresh.notification.error.title"),
+            message: tDocker("action.refresh.notification.error.message"),
+          });
+        },
+      });
+
+      return (
+        <Button
+          variant="default"
+          rightSection={<IconRefresh size="1rem" />}
+          onClick={() => mutate()}
+          loading={isPending}
+        >
+          {tDocker("action.refresh.label")}
+        </Button>
+      );
+    },
     renderToolbarAlertBannerContent: ({ groupedAlert, table }) => {
       const dockerContainers = table.getSelectedRowModel().rows.map((row) => row.original);
       return (
@@ -195,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">
+      <Button leftSection={<IconCategoryPlus />} color={"red"} onClick={handleClick} variant="light" radius="md">
         {t("addToHomarr.label")}
       </Button>
     </Group>
@@ -246,6 +253,7 @@ const ContainerActionBarButton = (props: ContainerActionBarButtonProps) => {
       onClick={handleClickAsync}
       loading={isPending}
       variant="light"
+      radius="md"
     >
       {t(`${props.action}.label`)}
     </Button>

apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card.module.css

@@ -4,16 +4,28 @@
   overflow: hidden;
   padding: var(--mantine-spacing-xs);
   padding-left: calc(var(--mantine-spacing-xs) * 2);
-  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 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));
+  }
 
   @mixin rtl {
     padding-left: var(--mantine-spacing-xs);
     padding-right: calc(var(--mantine-spacing-xs) * 2);
-    border-left: none;
-    border-right: 1px solid var(--mantine-color-blue-6);
+
+    &::before {
+      left: unset;
+      right: 0;
+    }
   }
 }

apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card.tsx

@@ -23,6 +23,7 @@ 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,

apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-gauge/resource-gauge.tsx

@@ -8,8 +8,6 @@ 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;
 }
@@ -20,8 +18,8 @@ export function ResourceGauge(props: KubernetesResourceGaugeProps) {
   const isRTL = Boolean(isLocaleRTL(currentLocale));
 
   return (
-    <Paper className={classes.paper} mt={20}>
-      <ThemeIcon className={classes.icon} size={60} radius={60} bg={KUBERNETES_BRAND_COLOR}>
+    <Paper radius="md" withBorder className={classes.paper} mt={20}>
+      <ThemeIcon className={classes.icon} size={60} radius={60} bg={"#326ce5"}>
         <ResourceIcon type={props.kubernetesCapacity.type} />
       </ThemeIcon>
 

apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-tile/resource-tile.tsx

@@ -17,7 +17,12 @@ interface ResourceTileProps {
 export function ResourceTile(props: ResourceTileProps) {
   const t = useI18n();
   return (
-    <Card component={Link} href={`/manage/tools/kubernetes/${props.label}`} className={classes.cardContainer}>
+    <Card
+      withBorder
+      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">

apps/nextjs/src/app/[locale]/manage/tools/logs/level-selection.tsx

@@ -2,14 +2,12 @@
 
 import { Select } from "@mantine/core";
 
-import { logLevelConfiguration, logLevels } from "@homarr/core/infrastructure/logs/constants";
 import type { LogLevel } from "@homarr/core/infrastructure/logs/constants";
+import { logLevelConfiguration, logLevels } 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();
@@ -21,12 +19,7 @@ export const LogLevelSelection = () => {
         label: `${logLevelConfiguration[level].prefix} ${t(`log.level.option.${level}`)}`,
       }))}
       value={level}
-      onChange={(value) => {
-        const nextLevel = value && levelByValue[value];
-        if (nextLevel) {
-          setLevel(nextLevel);
-        }
-      }}
+      onChange={(value) => setLevel(value as LogLevel)}
       checkIconPosition="right"
     />
   );

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-home-board.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { Button, Group, Stack } from "@mantine/core";
+import type { z } from "zod/v4";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { userChangeHomeBoardsSchema } from "@homarr/validation/user";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+import { BoardSelect } from "~/components/board/board-select";
+
+interface ChangeHomeBoardFormProps {
+  user: RouterOutputs["user"]["getById"];
+  boardsData: Pick<Board, "id" | "name" | "logoImageUrl">[];
+}
+
+export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormProps) => {
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.user.changeHomeBoards.useMutation({
+    async onSettled() {
+      await revalidatePathActionAsync(`/manage/users/${user.id}`);
+    },
+    onSuccess(_, variables) {
+      form.setInitialValues({
+        homeBoardId: variables.homeBoardId,
+        mobileHomeBoardId: variables.mobileHomeBoardId,
+      });
+      showSuccessNotification({
+        message: t("user.action.changeHomeBoard.notification.success.message"),
+      });
+    },
+    onError() {
+      showErrorNotification({
+        message: t("user.action.changeHomeBoard.notification.error.message"),
+      });
+    },
+  });
+  const form = useZodForm(userChangeHomeBoardsSchema, {
+    initialValues: {
+      homeBoardId: user.homeBoardId,
+      mobileHomeBoardId: user.mobileHomeBoardId,
+    },
+  });
+
+  const handleSubmit = (values: FormType) => {
+    mutate({
+      userId: user.id,
+      ...values,
+    });
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack gap="md">
+        <BoardSelect
+          label={t("management.page.user.setting.general.item.board.type.general")}
+          clearable
+          boards={boardsData}
+          w="100%"
+          {...form.getInputProps("homeBoardId")}
+        />
+        <BoardSelect
+          label={t("management.page.user.setting.general.item.board.type.mobile")}
+          clearable
+          boards={boardsData}
+          w="100%"
+          {...form.getInputProps("mobileHomeBoardId")}
+        />
+
+        <Group justify="end">
+          <Button type="submit" loading={isPending}>
+            {t("common.action.save")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+type FormType = z.infer<typeof userChangeHomeBoardsSchema>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-search-preferences.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Button, Group, Select, Stack, Switch } from "@mantine/core";
+import type { z } from "zod/v4";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { userChangeSearchPreferencesSchema } from "@homarr/validation/user";
+
+interface ChangeSearchPreferencesFormProps {
+  user: RouterOutputs["user"]["getById"];
+  searchEnginesData: { value: string; label: string }[];
+}
+
+export const ChangeSearchPreferencesForm = ({ user, searchEnginesData }: ChangeSearchPreferencesFormProps) => {
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.user.changeSearchPreferences.useMutation({
+    async onSettled() {
+      await revalidatePathActionAsync(`/manage/users/${user.id}`);
+    },
+    onSuccess(_, variables) {
+      form.setInitialValues({
+        defaultSearchEngineId: variables.defaultSearchEngineId,
+        openInNewTab: variables.openInNewTab,
+        ddgBangsEnabled: variables.ddgBangsEnabled,
+      });
+      showSuccessNotification({
+        message: t("user.action.changeSearchPreferences.notification.success.message"),
+      });
+    },
+    onError() {
+      showErrorNotification({
+        message: t("user.action.changeSearchPreferences.notification.error.message"),
+      });
+    },
+  });
+  const form = useZodForm(userChangeSearchPreferencesSchema, {
+    initialValues: {
+      defaultSearchEngineId: user.defaultSearchEngineId,
+      openInNewTab: user.openSearchInNewTab,
+      ddgBangsEnabled: user.ddgBangs,
+    },
+  });
+
+  const handleSubmit = (values: FormType) => {
+    mutate({
+      userId: user.id,
+      ...values,
+    });
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack gap="md">
+        <Select
+          label={t("user.field.defaultSearchEngine.label")}
+          w="100%"
+          data={searchEnginesData}
+          {...form.getInputProps("defaultSearchEngineId")}
+        />
+        <Switch
+          label={t("user.field.openSearchInNewTab.label")}
+          {...form.getInputProps("openInNewTab", { type: "checkbox" })}
+        />
+        <Switch
+          label={t("user.field.ddgBangs.label")}
+          {...form.getInputProps("ddgBangsEnabled", { type: "checkbox" })}
+        />
+
+        <Group justify="end">
+          <Button type="submit" loading={isPending}>
+            {t("common.action.save")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+type FormType = z.infer<typeof userChangeSearchPreferencesSchema>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_first-day-of-week.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Button, Group, Radio, Stack } from "@mantine/core";
+import type { DayOfWeek } from "@mantine/dates";
+import dayjs from "dayjs";
+import localeData from "dayjs/plugin/localeData";
+import type { z } from "zod/v4";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { userFirstDayOfWeekSchema } from "@homarr/validation/user";
+
+dayjs.extend(localeData);
+
+interface FirstDayOfWeekProps {
+  user: RouterOutputs["user"]["getById"];
+}
+
+const weekDays = dayjs.weekdays(false);
+
+export const FirstDayOfWeek = ({ user }: FirstDayOfWeekProps) => {
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.user.changeFirstDayOfWeek.useMutation({
+    async onSettled() {
+      await revalidatePathActionAsync(`/manage/users/${user.id}`);
+    },
+    onSuccess(_, variables) {
+      form.setInitialValues({
+        firstDayOfWeek: variables.firstDayOfWeek as DayOfWeek,
+      });
+      showSuccessNotification({
+        message: t("user.action.changeFirstDayOfWeek.notification.success.message"),
+      });
+    },
+    onError() {
+      showErrorNotification({
+        message: t("user.action.changeFirstDayOfWeek.notification.error.message"),
+      });
+    },
+  });
+  const form = useZodForm(userFirstDayOfWeekSchema, {
+    initialValues: {
+      firstDayOfWeek: user.firstDayOfWeek as DayOfWeek,
+    },
+  });
+
+  const handleSubmit = (values: FormType) => {
+    mutate({
+      id: user.id,
+      ...values,
+    });
+  };
+
+  const inputProps = form.getInputProps("firstDayOfWeek");
+  const onChange = inputProps.onChange as (value: number) => void;
+  const value = (inputProps.value as number).toString();
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack gap="md">
+        <Radio.Group {...inputProps} value={value} onChange={(value) => onChange(parseInt(value))}>
+          <Group mt="xs">
+            <Radio value="1" label={weekDays[1]} />
+            <Radio value="6" label={weekDays[6]} />
+            <Radio value="0" label={weekDays[0]} />
+          </Group>
+        </Radio.Group>
+
+        <Group justify="end">
+          <Button type="submit" loading={isPending}>
+            {t("common.action.save")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+type FormType = z.infer<typeof userFirstDayOfWeekSchema>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_general-settings-form.tsx

@@ -1,332 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useRef } from "react";
-import {
-  Button,
-  Card,
-  Divider,
-  Group,
-  Radio,
-  Select,
-  SimpleGrid,
-  Stack,
-  Switch,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
-import type { DayOfWeek } from "@mantine/dates";
-import dayjs from "dayjs";
-import localeData from "dayjs/plugin/localeData";
-import { z } from "zod/v4";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { env } from "@homarr/common/env";
-import { useZodForm } from "@homarr/form";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import {
-  userChangeHomeBoardsSchema,
-  userChangeSearchPreferencesSchema,
-  userEditProfileSchema,
-  userFirstDayOfWeekSchema,
-  userPingIconsEnabledSchema,
-} from "@homarr/validation/user";
-
-import type { Board } from "~/app/[locale]/boards/_types";
-import { BoardSelect } from "~/components/board/board-select";
-import { CurrentLanguageCombobox } from "~/components/language/current-language-combobox";
-
-dayjs.extend(localeData);
-
-const userGeneralSettingsSchema = z.object({
-  name: userEditProfileSchema.shape.name,
-  email: userEditProfileSchema.shape.email,
-  homeBoardId: userChangeHomeBoardsSchema.shape.homeBoardId,
-  mobileHomeBoardId: userChangeHomeBoardsSchema.shape.mobileHomeBoardId,
-  defaultSearchEngineId: userChangeSearchPreferencesSchema.shape.defaultSearchEngineId,
-  openInNewTab: userChangeSearchPreferencesSchema.shape.openInNewTab,
-  ddgBangsEnabled: userChangeSearchPreferencesSchema.shape.ddgBangsEnabled,
-  firstDayOfWeek: userFirstDayOfWeekSchema.shape.firstDayOfWeek,
-  pingIconsEnabled: userPingIconsEnabledSchema.shape.pingIconsEnabled,
-});
-
-type FormValues = z.infer<typeof userGeneralSettingsSchema>;
-
-const FIRST_DAY_OPTIONS: { value: DayOfWeek; labelKey: number }[] = [
-  { value: 1, labelKey: 1 },
-  { value: 6, labelKey: 6 },
-  { value: 0, labelKey: 0 },
-];
-
-interface UserGeneralSettingsFormProps {
-  user: RouterOutputs["user"]["getById"];
-  boardsData: Pick<Board, "id" | "name" | "logoImageUrl">[];
-  searchEnginesData: { value: string; label: string }[];
-  showLanguageSelector?: boolean;
-}
-
-const buildInitialValues = (user: RouterOutputs["user"]["getById"]): FormValues => ({
-  name: user.name ?? "",
-  email: user.email ?? "",
-  homeBoardId: user.homeBoardId,
-  mobileHomeBoardId: user.mobileHomeBoardId,
-  defaultSearchEngineId: user.defaultSearchEngineId,
-  openInNewTab: user.openSearchInNewTab,
-  ddgBangsEnabled: user.ddgBangs,
-  firstDayOfWeek: user.firstDayOfWeek as DayOfWeek,
-  pingIconsEnabled: user.pingIconsEnabled,
-});
-
-export const UserGeneralSettingsForm = ({
-  user,
-  boardsData,
-  searchEnginesData,
-  showLanguageSelector = false,
-}: UserGeneralSettingsFormProps) => {
-  const t = useI18n();
-  const tGeneral = useScopedI18n("management.page.user.setting.general");
-  const isCredentialsUser = user.provider === "credentials";
-
-  const editProfileMutation = clientApi.user.editProfile.useMutation();
-  const changeHomeBoardsMutation = clientApi.user.changeHomeBoards.useMutation();
-  const changeSearchPreferencesMutation = clientApi.user.changeSearchPreferences.useMutation();
-  const changeFirstDayOfWeekMutation = clientApi.user.changeFirstDayOfWeek.useMutation();
-  const changePingIconsEnabledMutation = clientApi.user.changePingIconsEnabled.useMutation();
-
-  const initialValues = buildInitialValues(user);
-  const initialValuesRef = useRef(initialValues);
-
-  const form = useZodForm(userGeneralSettingsSchema, {
-    initialValues,
-  });
-
-  const isDirtyRef = useRef(false);
-  isDirtyRef.current = form.isDirty();
-
-  const weekDays = useMemo(() => dayjs.weekdays(false), []);
-
-  const mutations = [
-    editProfileMutation,
-    changeHomeBoardsMutation,
-    changeSearchPreferencesMutation,
-    changeFirstDayOfWeekMutation,
-    changePingIconsEnabledMutation,
-  ];
-  const isPending = mutations.some((m) => m.isPending);
-
-  useEffect(() => {
-    const handler = (e: BeforeUnloadEvent) => {
-      if (env.NODE_ENV === "development") return;
-      if (isDirtyRef.current) e.preventDefault();
-    };
-    window.addEventListener("beforeunload", handler);
-    return () => window.removeEventListener("beforeunload", handler);
-  }, []);
-
-  const handleSubmitAsync = async (values: FormValues) => {
-    const parsed = userGeneralSettingsSchema.safeParse(values);
-    if (!parsed.success) return;
-
-    const defaults = initialValuesRef.current;
-    const changed = <K extends keyof FormValues>(...fields: K[]) =>
-      fields.some((f) => (f === "email" ? (values[f] || null) !== (defaults[f] || null) : values[f] !== defaults[f]));
-
-    const saveActions: { when: boolean; action: () => Promise<unknown> }[] = [
-      {
-        when: isCredentialsUser && changed("name", "email"),
-        action: () =>
-          editProfileMutation.mutateAsync({ id: user.id, name: parsed.data.name, email: parsed.data.email ?? "" }),
-      },
-      {
-        when: changed("homeBoardId", "mobileHomeBoardId"),
-        action: () =>
-          changeHomeBoardsMutation.mutateAsync({
-            userId: user.id,
-            homeBoardId: parsed.data.homeBoardId,
-            mobileHomeBoardId: parsed.data.mobileHomeBoardId,
-          }),
-      },
-      {
-        when: changed("defaultSearchEngineId", "openInNewTab", "ddgBangsEnabled"),
-        action: () =>
-          changeSearchPreferencesMutation.mutateAsync({
-            userId: user.id,
-            defaultSearchEngineId: parsed.data.defaultSearchEngineId,
-            openInNewTab: parsed.data.openInNewTab,
-            ddgBangsEnabled: parsed.data.ddgBangsEnabled,
-          }),
-      },
-      {
-        when: changed("firstDayOfWeek"),
-        action: () =>
-          changeFirstDayOfWeekMutation.mutateAsync({ id: user.id, firstDayOfWeek: parsed.data.firstDayOfWeek }),
-      },
-      {
-        when: changed("pingIconsEnabled"),
-        action: () =>
-          changePingIconsEnabledMutation.mutateAsync({ id: user.id, pingIconsEnabled: parsed.data.pingIconsEnabled }),
-      },
-    ];
-
-    const promises = saveActions.filter((s) => s.when).map((s) => s.action());
-    if (promises.length === 0) return;
-
-    try {
-      await Promise.all(promises);
-      const newValues = { ...parsed.data, email: parsed.data.email ?? "" };
-      initialValuesRef.current = newValues;
-      form.setInitialValues(newValues);
-      form.resetDirty();
-      await revalidatePathActionAsync(`/manage/users/${user.id}`);
-      showSuccessNotification({
-        title: t("common.notification.update.success"),
-        message: t("common.notification.update.success"),
-      });
-    } catch {
-      showErrorNotification({
-        title: t("common.notification.update.error"),
-        message: t("common.notification.update.error"),
-      });
-    }
-  };
-
-  const handleDiscard = () => {
-    form.setValues(initialValuesRef.current);
-    form.resetDirty();
-  };
-
-  const firstDayOfWeekInputProps = form.getInputProps("firstDayOfWeek");
-  const firstDayOfWeekOnChange = firstDayOfWeekInputProps.onChange as (value: number) => void;
-  const firstDayOfWeekValue = (firstDayOfWeekInputProps.value as number).toString();
-
-  return (
-    <form onSubmit={form.onSubmit(handleSubmitAsync)}>
-      <Stack gap="lg">
-        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg" verticalSpacing="lg">
-          <Card withBorder bg="transparent">
-            <Stack gap="md">
-              <Stack gap={2}>
-                <Title order={3}>{t("user.name")}</Title>
-                {!isCredentialsUser && (
-                  <Text c="dimmed" size="sm">
-                    {t("management.page.user.fieldsDisabledExternalProvider")}
-                  </Text>
-                )}
-              </Stack>
-              <Divider />
-              <TextInput
-                disabled={!isCredentialsUser}
-                label={t("user.field.username.label")}
-                withAsterisk
-                {...form.getInputProps("name")}
-              />
-              <TextInput
-                disabled={!isCredentialsUser}
-                label={t("user.field.email.label")}
-                {...form.getInputProps("email")}
-              />
-            </Stack>
-          </Card>
-
-          <Card withBorder bg="transparent">
-            <Stack gap="md">
-              <Stack gap={2}>
-                <Title order={3}>{tGeneral("item.board.title")}</Title>
-              </Stack>
-              <Divider />
-              <BoardSelect
-                label={tGeneral("item.board.type.general")}
-                clearable
-                boards={boardsData}
-                w="100%"
-                withinPortal
-                {...form.getInputProps("homeBoardId")}
-              />
-              <BoardSelect
-                label={tGeneral("item.board.type.mobile")}
-                clearable
-                boards={boardsData}
-                w="100%"
-                withinPortal
-                {...form.getInputProps("mobileHomeBoardId")}
-              />
-            </Stack>
-          </Card>
-
-          <Card withBorder bg="transparent">
-            <Stack gap="md">
-              <Stack gap={2}>
-                <Title order={3}>{tGeneral("item.search")}</Title>
-              </Stack>
-              <Divider />
-              <Select
-                label={t("user.field.defaultSearchEngine.label")}
-                w="100%"
-                data={searchEnginesData}
-                comboboxProps={{ withinPortal: true }}
-                {...form.getInputProps("defaultSearchEngineId")}
-              />
-              <Switch
-                label={t("user.field.openSearchInNewTab.label")}
-                {...form.getInputProps("openInNewTab", { type: "checkbox" })}
-              />
-              <Switch
-                label={t("user.field.ddgBangs.label")}
-                {...form.getInputProps("ddgBangsEnabled", { type: "checkbox" })}
-              />
-            </Stack>
-          </Card>
-
-          <Card withBorder bg="transparent">
-            <Stack gap="md">
-              <Stack gap={2}>
-                <Title order={3}>{tGeneral("item.language")}</Title>
-              </Stack>
-              <Divider />
-              {showLanguageSelector && <CurrentLanguageCombobox withinPortal />}
-              <Title order={4}>{tGeneral("item.firstDayOfWeek")}</Title>
-              <Radio.Group
-                {...firstDayOfWeekInputProps}
-                value={firstDayOfWeekValue}
-                onChange={(nextValue: string) => firstDayOfWeekOnChange(parseInt(nextValue, 10))}
-              >
-                <Group mt="xs" wrap="wrap">
-                  {FIRST_DAY_OPTIONS.map(({ value: dayValue, labelKey }) => (
-                    <Radio key={dayValue} value={dayValue.toString()} label={weekDays[labelKey]} />
-                  ))}
-                </Group>
-              </Radio.Group>
-              <Divider my="xs" />
-              <Title order={4}>{tGeneral("item.accessibility")}</Title>
-              <Switch
-                label={t("user.field.pingIconsEnabled.label")}
-                {...form.getInputProps("pingIconsEnabled", { type: "checkbox" })}
-              />
-            </Stack>
-          </Card>
-        </SimpleGrid>
-
-        <div style={{ position: "sticky", bottom: 20 }}>
-          {form.isDirty() && (
-            <Card withBorder>
-              <Group justify="space-between" wrap="wrap">
-                <Text fw={500}>{t("common.unsavedChanges")}</Text>
-                <Group>
-                  <Button disabled={isPending} variant="default" onClick={handleDiscard}>
-                    {t("common.action.discard")}
-                  </Button>
-                  <Button loading={isPending} type="submit" disabled={!form.isValid()}>
-                    {t("common.action.saveChanges")}
-                  </Button>
-                </Group>
-              </Group>
-            </Card>
-          )}
-        </div>
-      </Stack>
-    </form>
-  );
-};

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_ping-icons-enabled.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Button, Group, Stack, Switch } from "@mantine/core";
+import type { z } from "zod/v4";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { userPingIconsEnabledSchema } from "@homarr/validation/user";
+
+interface PingIconsEnabledProps {
+  user: RouterOutputs["user"]["getById"];
+}
+
+export const PingIconsEnabled = ({ user }: PingIconsEnabledProps) => {
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.user.changePingIconsEnabled.useMutation({
+    async onSettled() {
+      await revalidatePathActionAsync(`/manage/users/${user.id}`);
+    },
+    onSuccess(_, variables) {
+      form.setInitialValues({
+        pingIconsEnabled: variables.pingIconsEnabled,
+      });
+      showSuccessNotification({
+        message: t("user.action.changePingIconsEnabled.notification.success.message"),
+      });
+    },
+    onError() {
+      showErrorNotification({
+        message: t("user.action.changePingIconsEnabled.notification.error.message"),
+      });
+    },
+  });
+  const form = useZodForm(userPingIconsEnabledSchema, {
+    initialValues: {
+      pingIconsEnabled: user.pingIconsEnabled,
+    },
+  });
+
+  const handleSubmit = (values: FormType) => {
+    mutate({
+      id: user.id,
+      ...values,
+    });
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack gap="md">
+        <Switch
+          {...form.getInputProps("pingIconsEnabled", { type: "checkbox" })}
+          label={t("user.field.pingIconsEnabled.label")}
+        />
+
+        <Group justify="end">
+          <Button type="submit" loading={isPending}>
+            {t("common.action.save")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+type FormType = z.infer<typeof userPingIconsEnabledSchema>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback } from "react";
 import { Box, Button, FileButton, Menu, UnstyledButton } from "@mantine/core";
-import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import { useDisclosure } from "@mantine/hooks";
 import { IconPencil, IconPhotoEdit, IconPhotoX } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -25,7 +25,6 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
     },
   });
   const [opened, { toggle }] = useDisclosure(false);
-  const isMobile = useMediaQuery("(max-width: 48em)");
   const { openConfirmModal } = useConfirmModal();
   const t = useI18n();
   const tManageAvatar = useScopedI18n("user.action.manageAvatar");
@@ -95,11 +94,11 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
   }, [mutate, user.id, openConfirmModal, tManageAvatar]);
 
   return (
-    <Box pos="relative" display="flex" style={{ justifyContent: isMobile ? "center" : undefined }}>
-      <Menu opened={opened} keepMounted onChange={toggle} position="bottom-start" withArrow withinPortal>
+    <Box pos="relative">
+      <Menu opened={opened} keepMounted onChange={toggle} position="bottom-start" withArrow>
         <Menu.Target>
           <UnstyledButton onClick={toggle}>
-            <UserAvatar user={user} size={isMobile ? 120 : 200} />
+            <UserAvatar user={user} size={200} />
             <Button
               component="div"
               pos="absolute"

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useCallback } from "react";
+import { Button, Group, Stack, TextInput } from "@mantine/core";
+
+import type { RouterInputs, RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { userEditProfileSchema } from "@homarr/validation/user";
+
+interface UserProfileFormProps {
+  user: RouterOutputs["user"]["getById"];
+}
+
+export const UserProfileForm = ({ user }: UserProfileFormProps) => {
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.user.editProfile.useMutation({
+    async onSettled() {
+      await revalidatePathActionAsync("/manage/users");
+    },
+    onSuccess(_, variables) {
+      // Reset form initial values to reset dirty state
+      form.setInitialValues({
+        name: variables.name,
+        email: variables.email ?? "",
+      });
+      showSuccessNotification({
+        title: t("common.notification.update.success"),
+        message: t("user.action.editProfile.notification.success.message"),
+      });
+    },
+    onError(error) {
+      const message =
+        error.data?.code === "CONFLICT"
+          ? t("user.error.usernameTaken")
+          : t("user.action.editProfile.notification.error.message");
+      showErrorNotification({
+        title: t("common.notification.update.error"),
+        message,
+      });
+    },
+  });
+  const form = useZodForm(userEditProfileSchema.omit({ id: true }), {
+    initialValues: {
+      name: user.name ?? "",
+      email: user.email ?? "",
+    },
+  });
+
+  // Only credentials users can edit their profile
+  const isProviderCredentials = user.provider === "credentials";
+
+  const handleSubmit = useCallback(
+    (values: FormType) => {
+      if (!isProviderCredentials) return;
+      mutate({
+        ...values,
+        id: user.id,
+      });
+    },
+    [isProviderCredentials, mutate, user.id],
+  );
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack>
+        <TextInput
+          disabled={!isProviderCredentials}
+          label={t("user.field.username.label")}
+          withAsterisk
+          {...form.getInputProps("name")}
+        />
+        <TextInput
+          disabled={!isProviderCredentials}
+          label={t("user.field.email.label")}
+          {...form.getInputProps("email")}
+        />
+
+        {isProviderCredentials && (
+          <Group justify="end">
+            <Button type="submit" disabled={!form.isDirty()} loading={isPending}>
+              {t("common.action.saveChanges")}
+            </Button>
+          </Group>
+        )}
+      </Stack>
+    </form>
+  );
+};
+
+type FormType = Omit<RouterInputs["user"]["editProfile"], "id">;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx

@@ -6,13 +6,18 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 
+import { CurrentLanguageCombobox } from "~/components/language/current-language-combobox";
 import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
 import { catchTrpcNotFound } from "~/errors/trpc-catch-error";
 import { createMetaTitle } from "~/metadata";
 import { canAccessUserEditPage } from "../access";
+import { ChangeHomeBoardForm } from "./_components/_change-home-board";
+import { ChangeSearchPreferencesForm } from "./_components/_change-search-preferences";
 import { DeleteUserButton } from "./_components/_delete-user-button";
-import { UserGeneralSettingsForm } from "./_components/_general-settings-form";
+import { FirstDayOfWeek } from "./_components/_first-day-of-week";
+import { PingIconsEnabled } from "./_components/_ping-icons-enabled";
 import { UserProfileAvatarForm } from "./_components/_profile-avatar-form";
+import { UserProfileForm } from "./_components/_profile-form";
 
 interface Props {
   params: Promise<{
@@ -58,7 +63,7 @@ export default async function EditUserPage(props: Props) {
 
   const boards = await api.board.getAllBoards();
   const searchEngines = await api.searchEngine.getSelectable();
-  const isSelf = session?.user.id === user.id;
+
   const isCredentialsUser = user.provider === "credentials";
 
   return (
@@ -68,25 +73,51 @@ export default async function EditUserPage(props: Props) {
           {t("management.page.user.fieldsDisabledExternalProvider")}
         </Alert>
       )}
+
       <Title>{tGeneral("title")}</Title>
-      <Group gap="xl" align="flex-start" wrap="wrap">
-        <Box flex={1} miw={{ base: "100%", md: 540 }}>
-          <UserGeneralSettingsForm
-            user={user}
-            boardsData={boards.map((board) => ({
-              id: board.id,
-              name: board.name,
-              logoImageUrl: board.logoImageUrl,
-            }))}
-            searchEnginesData={searchEngines}
-            showLanguageSelector={isSelf}
-          />
+      <Group gap="xl">
+        <Box flex={1}>
+          <UserProfileForm user={user} />
         </Box>
-        <Box w={{ base: "100%", lg: 260 }}>
+        <Box w={{ base: "100%", lg: 200 }}>
           <UserProfileAvatarForm user={user} />
         </Box>
       </Group>
 
+      {session?.user.id === user.id && (
+        <Stack mb="lg">
+          <Title order={2}>{tGeneral("item.language")}</Title>
+          <CurrentLanguageCombobox />
+        </Stack>
+      )}
+
+      <Stack mb="lg">
+        <Title order={2}>{tGeneral("item.board.title")}</Title>
+        <ChangeHomeBoardForm
+          user={user}
+          boardsData={boards.map((board) => ({
+            id: board.id,
+            name: board.name,
+            logoImageUrl: board.logoImageUrl,
+          }))}
+        />
+      </Stack>
+
+      <Stack mb="lg">
+        <Title order={2}>{tGeneral("item.search")}</Title>
+        <ChangeSearchPreferencesForm user={user} searchEnginesData={searchEngines} />
+      </Stack>
+
+      <Stack mb="lg">
+        <Title order={2}>{tGeneral("item.firstDayOfWeek")}</Title>
+        <FirstDayOfWeek user={user} />
+      </Stack>
+
+      <Stack mb="lg">
+        <Title order={2}>{tGeneral("item.accessibility")}</Title>
+        <PingIconsEnabled user={user} />
+      </Stack>
+
       <DangerZoneRoot>
         <DangerZoneItem
           label={t("user.action.delete.label")}

apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx

@@ -1,22 +1,24 @@
 "use client";
 
 import { useMemo } from "react";
-import { Anchor, Group, Text, Tooltip } from "@mantine/core";
+import { Anchor, Button, Group, Text, Title, 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 } from "@homarr/translation/client";
+import { useI18n, useScopedI18n } 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 }: UserListComponentProps) => {
+export const UserListComponent = ({ initialUserList, credentialsProviderEnabled }: UserListComponentProps) => {
+  const tUserList = useScopedI18n("management.page.user.list");
   const t = useI18n();
   const { data, isLoading } = clientApi.user.getAll.useQuery(undefined, {
     initialData: initialUserList,
@@ -67,10 +69,21 @@ export const UserListComponent = ({ initialUserList }: UserListComponentProps) =
     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 <MantineReactTable table={table} />;
+  return (
+    <>
+      <Title mb="md">{tUserList("title")}</Title>
+      <MantineReactTable table={table} />
+    </>
+  );
 };

apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx

@@ -149,7 +149,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
           color={!generalForm.isValid() ? "red" : undefined}
         >
           <form>
-            <Card p="xl">
+            <Card p="xl" shadow="md" withBorder>
               <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">
+            <Card p="xl" shadow="md" withBorder>
               <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">
+          <Card p="xl" shadow="md" withBorder>
             <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">
+          <Card p="xl" shadow="md" withBorder>
             <Stack maw={300} align="center" mx="auto">
               <UserAvatar
                 size="xl"
                 user={{ name: generalForm.values.username, email: generalForm.values.email ?? null, image: null }}
               />
-              <Text fw={700} size="xl">
+              <Text tt="uppercase" fw="bolder" size="xl">
                 {generalForm.values.username}
               </Text>
             </Stack>
           </Card>
         </Stepper.Step>
         <Stepper.Completed>
-          <Card p="xl">
+          <Card p="xl" shadow="md" withBorder>
             <Stack align="center" maw={300} mx="auto">
               <IconUserCheck size="3rem" />
               <Title order={2}>{t("step.completed.title")}</Title>

apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.tsx

@@ -25,7 +25,7 @@ export const StepperNavigationComponent = ({
 }: StepperNavigationComponentProps) => {
   const t = useI18n();
   return (
-    <Card>
+    <Card shadow="md" withBorder>
       {!isComplete ? (
         <Group justify="space-between" wrap="nowrap">
           <Button

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/_group-permission-form.tsx

@@ -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}>
+          <Card style={transitionStyles} withBorder>
             <Group justify="space-between">
               <Text fw={500}>{tForm("unsavedChanges")}</Text>
               <Group>

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx

@@ -68,6 +68,7 @@ const PermissionCard = async ({ group, isDanger }: PermissionCardProps) => {
   return (
     <Card
       p="md"
+      withBorder
       style={{
         borderColor: isDanger ? "var(--mantine-color-red-8)" : undefined,
       }}

apps/nextjs/src/app/[locale]/manage/users/groups/_client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import { TextInput } from "@mantine/core";
+import { useCallback, useMemo, useState } from "react";
+import { Group, TextInput } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -33,20 +33,29 @@ export const GroupsList = ({ groups }: GroupsListProps) => {
 
   return (
     <>
-      <TextInput
-        leftSection={<IconSearch size={20} stroke={1.5} />}
-        value={search}
-        onChange={(event) => setSearch(event.currentTarget.value)}
-        placeholder={`${t("group.search")}...`}
-      />
+      <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>
+
       <GroupsTable groups={filteredGroups} initialGroupIds={initialGroupIds} hasFilter={search.length !== 0} />
     </>
   );
 };
 
-export const AddGroupButton = () => {
+const AddGroup = () => {
   const t = useI18n();
   const { openModal } = useModalAction(AddGroupModal);
 
-  return <MobileAffixButton onClick={() => openModal()}>{t("group.action.create.label")}</MobileAffixButton>;
+  const handleAddGroup = useCallback(() => {
+    openModal();
+  }, [openModal]);
+
+  return <MobileAffixButton onClick={handleAddGroup}>{t("group.action.create.label")}</MobileAffixButton>;
 };

apps/nextjs/src/app/[locale]/manage/users/groups/_groups-table.tsx

@@ -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}>
+          <Card style={transitionStyles} withBorder>
             <Group justify="space-between">
               <Text fw={500}>{t("common.unsavedChanges")}</Text>
               <Group>

apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx

@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation";
-import { Card, Group, Stack, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
+import { Card, Group, Stack, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
 import { IconChevronRight, IconUsersGroup } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
@@ -8,8 +8,9 @@ import { everyoneGroup } from "@homarr/definitions";
 import { getI18n } from "@homarr/translation/server";
 import { Link } from "@homarr/ui";
 
-import { ManagePageLayout } from "~/components/manage/manage-page-layout";
-import { AddGroupButton, GroupsList } from "./_client";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { GroupsList } from "./_client";
 import classes from "./groups.module.css";
 
 export default async function GroupsListPage() {
@@ -25,8 +26,11 @@ export default async function GroupsListPage() {
   const groupsWithoutEveryone = groups.filter((group) => group.name !== everyoneGroup);
 
   return (
-    <ManagePageLayout title={t("group.title")} primaryAction={<AddGroupButton />} floatingPrimaryAction>
+    <ManageContainer size="xl">
+      <DynamicBreadcrumb />
       <Stack>
+        <Title>{t("group.title")}</Title>
+
         {dbEveryoneGroup && (
           <UnstyledButton component={Link} href={`/manage/users/groups/${dbEveryoneGroup.id}`}>
             <Card className={classes.everyoneGroup}>
@@ -49,6 +53,6 @@ export default async function GroupsListPage() {
 
         <GroupsList groups={groupsWithoutEveryone} />
       </Stack>
-    </ManagePageLayout>
+    </ManageContainer>
   );
 }

apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-create-button.tsx

@@ -1,20 +0,0 @@
-"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>
-  );
-};

apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useMemo } from "react";
-import { ActionIcon } from "@mantine/core";
+import { ActionIcon, Button, Title } from "@mantine/core";
 import { IconTrash } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -10,7 +10,8 @@ import { MantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { useConfirmModal } from "@homarr/modals";
+import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { InviteCreateModal } from "@homarr/modals-collection";
 import { useScopedI18n } from "@homarr/translation/client";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
@@ -64,6 +65,7 @@ export const InviteListComponent = ({ initialInvites }: InviteListComponentProps
     enableFullScreenToggle: false,
     layoutMode: "grid-no-grow",
     getRowId: (row) => row.id,
+    renderTopToolbarCustomActions: RenderTopToolbarCustomActions,
     state: {
       isLoading,
     },
@@ -72,7 +74,22 @@ export const InviteListComponent = ({ initialInvites }: InviteListComponentProps
     },
   });
 
-  return <MantineReactTable table={table} />;
+  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>;
 };
 
 const RenderRowActions = ({ row }: { row: MRT_Row<RouterOutputs["invite"]["getAll"][number]> }) => {

apps/nextjs/src/app/[locale]/manage/users/invites/page.tsx

@@ -3,11 +3,8 @@ 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 { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action";
-import { ManagePageLayout } from "~/components/manage/manage-page-layout";
-import { InviteCreateButton } from "./_components/invite-create-button";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { InviteListComponent } from "./_components/invite-list";
 
 export default async function InvitesOverviewPage() {
@@ -20,20 +17,11 @@ export default async function InvitesOverviewPage() {
     return notFound();
   }
 
-  const t = await getScopedI18n("management.page.user.invite");
   const initialInvites = await api.invite.getAll();
-
   return (
-    <ManagePageLayout
-      title={t("title")}
-      primaryAction={
-        <ManageMobilePrimaryAction>
-          <InviteCreateButton />
-        </ManageMobilePrimaryAction>
-      }
-      floatingPrimaryAction
-    >
+    <>
+      <DynamicBreadcrumb />
       <InviteListComponent initialInvites={initialInvites} />
-    </ManagePageLayout>
+    </>
   );
 }

apps/nextjs/src/app/[locale]/manage/users/page.tsx

@@ -4,10 +4,8 @@ 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 { ManagePageLayout } from "~/components/manage/manage-page-layout";
-import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { createMetaTitle } from "~/metadata";
 import { UserListComponent } from "./_components/user-list";
 
@@ -29,23 +27,13 @@ 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 (
-    <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>
+    <>
+      <DynamicBreadcrumb />
+      <UserListComponent initialUserList={userList} credentialsProviderEnabled={credentialsProviderEnabled} />
+    </>
   );
 }

apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx

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

apps/nextjs/src/components/board/items/item-content.tsx

@@ -42,6 +42,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
           item.advancedOptions.customCssClasses.join(" "),
         )}
         radius={board.itemRadius}
+        withBorder
         styles={{
           root: {
             "--opacity": board.opacity / 100,

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -105,17 +105,9 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
   };
 
   return (
-    <Menu withinPortal position="right-start" arrowPosition="center">
+    <Menu withinPortal withArrow position="right-start" arrowPosition="center">
       <Menu.Target>
-        <ActionIcon
-          variant="default"
-          radius={"xl"}
-          pos="absolute"
-          top={offset}
-          right={offset}
-          style={{ zIndex: 10 }}
-          aria-label={tItem("menu.label.settings")}
-        >
+        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={offset} right={offset} style={{ zIndex: 10 }}>
           <IconDotsVertical size={"1rem"} />
         </ActionIcon>
       </Menu.Target>

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -145,7 +145,7 @@ const WidgetItem = ({
             </Text>
           </Stack>
           <SupportedIntegrations mt="auto" integrations={item.supportedIntegrations} />
-          <Button onClick={onSelect} variant="light" size="xs" fullWidth>
+          <Button onClick={onSelect} variant="light" size="xs" radius="md" fullWidth>
             {t(`item.create.addToBoard`)}
           </Button>
         </Stack>
@@ -170,7 +170,7 @@ const SupportedIntegrations = ({ integrations, mt }: SupportedIntegrationsProps)
 
   return (
     <Center mt={mt}>
-      <Tooltip.Group closeDelay={100}>
+      <Tooltip.Group openDelay={300} closeDelay={100}>
         <Group gap={2}>
           {integrations.slice(0, countToShow).map((integration) => (
             <Tooltip key={integration} label={getIntegrationName(integration)} withArrow>

apps/nextjs/src/components/board/sections/category-section.tsx

@@ -3,7 +3,6 @@ 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";
@@ -11,41 +10,30 @@ 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 initialCollapsed =
-    typeof window !== "undefined"
-      ? (localStorage.getItem(localStorageKey(section.id)) ?? String(section.collapsed)) === "true"
-      : section.collapsed;
-
-  const [opened, { toggle }] = useDisclosure(initialCollapsed, {
+  const [opened, { toggle }] = useDisclosure(section.collapsed, {
     onOpen() {
-      if (status === "authenticated") {
-        mutate({ sectionId: section.id, collapsed: true });
-      } else if (status === "unauthenticated") {
-        localStorage.setItem(localStorageKey(section.id), "true");
-      }
+      mutate({ sectionId: section.id, collapsed: true });
     },
     onClose() {
-      if (status === "authenticated") {
-        mutate({ sectionId: section.id, collapsed: false });
-      } else if (status === "unauthenticated") {
-        localStorage.setItem(localStorageKey(section.id), "false");
-      }
+      mutate({ sectionId: section.id, collapsed: false });
     },
   });
 
   return (
-    <Card style={{ "--opacity": board.opacity / 100 }} radius={board.itemRadius} p={0} className={classes.itemCard}>
+    <Card
+      style={{ "--opacity": board.opacity / 100 }}
+      radius={board.itemRadius}
+      withBorder
+      p={0}
+      className={classes.itemCard}
+    >
       <Stack>
         <Group wrap="nowrap" gap="sm">
           <UnstyledButton w="100%" p="sm" onClick={toggle}>
@@ -56,7 +44,7 @@ export const BoardCategorySection = ({ section }: Props) => {
           </UnstyledButton>
           <CategoryMenu category={section} />
         </Group>
-        <Collapse expanded={opened} p="sm" pt={0}>
+        <Collapse in={opened} p="sm" pt={0}>
           <GridStack section={section} />
         </Collapse>
       </Stack>

apps/nextjs/src/components/board/sections/category/category-menu.tsx

@@ -30,9 +30,9 @@ export const CategoryMenu = ({ category }: Props) => {
   const t = useScopedI18n("section.category");
 
   return (
-    <Menu>
+    <Menu withArrow>
       <Menu.Target>
-        <ActionIcon mr="sm" variant="transparent" aria-label={t("menu.label.settings")}>
+        <ActionIcon mr="sm" variant="transparent">
           <IconDotsVertical size={20} />
         </ActionIcon>
       </Menu.Target>

apps/nextjs/src/components/board/sections/dynamic-section.tsx

@@ -28,6 +28,7 @@ export const BoardDynamicSection = ({ section }: Props) => {
         className={combineClasses(classes.itemCard, section.options.customCssClasses.join(" "))}
         w="100%"
         h="100%"
+        withBorder
         styles={{
           root: {
             overflow: "visible",

apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx

@@ -43,17 +43,9 @@ export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSectionIt
   };
 
   return (
-    <Menu withinPortal position="right-start" arrowPosition="center">
+    <Menu withinPortal withArrow position="right-start" arrowPosition="center">
       <Menu.Target>
-        <ActionIcon
-          variant="default"
-          radius={"xl"}
-          pos="absolute"
-          top={4}
-          right={4}
-          style={{ zIndex: 10 }}
-          aria-label={tItem("menu.label.settings")}
-        >
+        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={4} right={4} style={{ zIndex: 10 }}>
           <IconDotsVertical size={"1rem"} />
         </ActionIcon>
       </Menu.Target>

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -1,6 +1,6 @@
-import type { Ref, RefObject } from "react";
+import type { RefObject } from "react";
 import { createRef, useCallback, useEffect, useRef } from "react";
-import { useElementSize, useMergedRef } from "@mantine/hooks";
+import { useElementSize } 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: Ref<HTMLDivElement | null>;
+  wrapper: RefObject<HTMLDivElement | null>;
   items: RefObject<Record<string, RefObject<GridItemHTMLElement | null>>>;
   gridstack: RefObject<GridStack | null>;
 }
@@ -59,9 +59,8 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
   const { moveAndResizeItem, moveItemToSection } = useItemActions();
   const { moveAndResizeInnerSection, moveInnerSectionToSection } = useSectionActions();
 
-  const wrapperElementRef = useRef<HTMLDivElement | null>(null);
-  const { ref: measureWrapperRef, width, height } = useElementSize<HTMLDivElement>();
-  const wrapperRef = useMergedRef(measureWrapperRef, wrapperElementRef);
+  // define reference for wrapper - is used to calculate the width of the wrapper
+  const { ref: wrapperRef, width, height } = useElementSize<HTMLDivElement>();
   // 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
@@ -194,7 +193,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
       itemIds,
       refs: {
         items: itemRefs,
-        wrapper: wrapperElementRef,
+        wrapper: wrapperRef,
         gridstack: gridRef,
       },
       sectionColumnCount: columnCount,
@@ -277,7 +276,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
   useCssVariableConfiguration({
     columnCount,
     gridRef,
-    wrapperRef: wrapperElementRef,
+    wrapperRef,
     width,
     height,
     isDynamic: section.kind === "dynamic",
@@ -294,7 +293,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
 
 interface UseCssVariableConfiguration {
   gridRef: UseGridstackRefs["gridstack"];
-  wrapperRef: RefObject<HTMLDivElement | null>;
+  wrapperRef: UseGridstackRefs["wrapper"];
   width: number;
   height: number;
   columnCount: number;

apps/nextjs/src/components/language/current-language-combobox.tsx

@@ -6,20 +6,11 @@ import { LanguageCombobox } from "./language-combobox";
 
 interface CurrentLanguageComboboxProps {
   width?: string;
-  withinPortal?: boolean;
 }
 
-export const CurrentLanguageCombobox = ({ width, withinPortal }: CurrentLanguageComboboxProps) => {
+export const CurrentLanguageCombobox = ({ width }: CurrentLanguageComboboxProps) => {
   const currentLocale = useCurrentLocale();
   const { changeLocale, isPending } = useChangeLocale();
 
-  return (
-    <LanguageCombobox
-      value={currentLocale}
-      onChange={changeLocale}
-      isPending={isPending}
-      width={width}
-      withinPortal={withinPortal}
-    />
-  );
+  return <LanguageCombobox value={currentLocale} onChange={changeLocale} isPending={isPending} width={width} />;
 };

apps/nextjs/src/components/language/language-combobox.tsx

@@ -16,17 +16,9 @@ interface LanguageComboboxProps {
   onChange: (value: SupportedLanguage) => void;
   isPending?: boolean;
   width?: string;
-  withinPortal?: boolean;
 }
 
-export const LanguageCombobox = ({
-  label,
-  value,
-  onChange,
-  isPending,
-  width,
-  withinPortal = false,
-}: LanguageComboboxProps) => {
+export const LanguageCombobox = ({ label, value, onChange, isPending, width }: LanguageComboboxProps) => {
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption(),
   });
@@ -47,7 +39,7 @@ export const LanguageCombobox = ({
   }, [combobox]);
 
   return (
-    <Combobox store={combobox} withinPortal={withinPortal} onOptionSubmit={handleOnOptionSubmit}>
+    <Combobox store={combobox} onOptionSubmit={handleOnOptionSubmit}>
       <Combobox.Target>
         <InputBase
           component="button"

apps/nextjs/src/components/layout/background.tsx

@@ -44,7 +44,6 @@ export const BoardBackgroundVideo = () => {
       muted
       loop
       playsInline
-      aria-hidden="true"
       style={{
         position: "fixed",
         width: "100vw",

apps/nextjs/src/components/layout/navigation-link.tsx

@@ -12,7 +12,16 @@ 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} target="_blank" />
+    <NavLink
+      component="a"
+      label={props.label}
+      leftSection={props.icon}
+      href={props.href}
+      style={{
+        borderRadius: 5,
+      }}
+      target="_blank"
+    />
   ) : (
     <NavLink
       component={Link}
@@ -20,6 +29,9 @@ const NavLinkHref = (props: NavigationLinkHref) => {
       leftSection={props.icon}
       href={props.href}
       active={pathname === props.href}
+      style={{
+        borderRadius: 5,
+      }}
     />
   );
 };
@@ -28,7 +40,14 @@ const NavLinkWithItems = (props: NavigationLinkWithItems) => {
   const pathname = usePathname();
   const isActive = props.items.some((item) => item.href === pathname);
   return (
-    <NavLink label={props.label} leftSection={props.icon} defaultOpened={isActive}>
+    <NavLink
+      style={{
+        borderRadius: 5,
+      }}
+      label={props.label}
+      leftSection={props.icon}
+      defaultOpened={isActive}
+    >
       {props.items.map((item) => (
         <NavLinkHref key={item.label} {...item} />
       ))}

apps/nextjs/src/components/manage/danger-zone.tsx

@@ -15,7 +15,7 @@ export const DangerZoneRoot = async ({ children }: DangerZoneRootProps) => {
       <Title c="red.8" order={2}>
         {t("common.dangerZone")}
       </Title>
-      <Card style={{ borderColor: "var(--mantine-color-red-8)", borderWidth: 3 }}>
+      <Card withBorder style={{ borderColor: "var(--mantine-color-red-8)", borderWidth: 3 }}>
         <Stack gap="sm">
           {Array.isArray(children)
             ? children.map((child, index) => (

apps/nextjs/src/components/manage/manage-mobile-primary-action.tsx

@@ -1,15 +0,0 @@
-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>
-  </>
-);

apps/nextjs/src/components/manage/manage-page-layout.tsx

@@ -1,44 +0,0 @@
-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>
-  );
-};

apps/nextjs/src/components/manage/manage-page.constants.ts

@@ -1,5 +0,0 @@
-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;

apps/nextjs/src/components/manage/mobile-affix-button.tsx

@@ -2,15 +2,13 @@ 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" miw={MANAGE_ACTION_BUTTON_MIN_WIDTH} {...props} />
-      <Affix hiddenFrom="md" position={MANAGE_AFFIX_POSITION}>
+      <Button ref={ref} visibleFrom="md" {...props} />
+      <Affix hiddenFrom="md" position={{ bottom: 20, right: 20 }}>
         <Button ref={ref} {...props} />
       </Affix>
     </>

apps/nextjs/src/components/no-results.tsx

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

apps/nextjs/src/components/user-avatar-menu.tsx

@@ -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} withinPortal keepMounted>
+    <Menu width={300} withArrow withinPortal keepMounted>
       <Menu.Dropdown>
         <AvailableUpdatesMenuItem availableUpdatesPromise={availableUpdatesPromise} />
         <Menu.Item component={Link} href="/boards" leftSection={<IconHome size="1rem" />}>

apps/tasks/eslint.config.js

@@ -0,0 +1,9 @@
+import baseConfig from "@homarr/eslint-config/base";
+
+/** @type {import('typescript-eslint').Config} */
+export default [
+  {
+    ignores: ["tasks.cjs"],
+  },
+  ...baseConfig,
+];

apps/tasks/package.json

@@ -4,19 +4,20 @@
   "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": "oxfmt .",
-    "lint": "oxlint",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
     "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",
@@ -42,10 +43,14 @@
     "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:"
   }