fix(turbo): include test files in typecheck cache inputs

Test files must be typechecked — excluding them from typecheck inputs caused changed tests to skip type validation.
fix(turbo): remove runtime env vars from build cache key
2026-05-21 14:00:47 +02:00 · 2026-05-21 14:00:34 +02:00 · 2026-05-21 14:00:34 +02:00 · 2026-05-21 14:00:34 +02:00 · 2026-05-21 14:00:33 +02:00 · 2026-05-21 14:00:33 +02:00
309 changed files with 6135 additions and 4995 deletions
@@ -1,2 +0,0 @@
-P ubuntu-latest=catthehacker/ubuntu:act-latest
--container-architecture linux/amd64
@@ -3,6 +3,9 @@ version = 1
 [[analyzers]]
 name = "javascript"

-[analyzers.meta]
-plugins = ["react"]
-environment = ["nodejs"]
+  [analyzers.meta]
+  plugins = ["react"]
+  environment = ["nodejs"]
+
+[[transformers]]
+name = "prettier"
@@ -10,7 +10,6 @@ README.md
 dev
 .build
 e2e
-apps/nextjs/.next
 .env
 .env.*
-!.env.example
+!.env.example
@@ -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
@@ -19,10 +19,7 @@ body:
  - type: textarea
    attributes:
      label: Additional information
-      description: |
-        Add any other information related to the integration.
-
-        After your integration is merged to `dev`, a bot PR updates [CODEOWNERS](https://github.com/homarr-labs/homarr/blob/dev/CODEOWNERS) so you are requested on future PRs touching your folders. Run `pnpm scripts:generate-codeowners` locally for faster updates. Add email mappings in `scripts/codeowners-overrides.json` if the generator cannot resolve your GitHub user.
+      description: Add any other information related to the integration.
  - type: dropdown
    attributes:
      label: Public API available?
@@ -19,10 +19,7 @@ body:
  - type: textarea
    attributes:
      label: Additional information
-      description: |
-        Add any other information related to the widget.
-
-        After your widget is merged to `dev`, a bot PR updates [CODEOWNERS](https://github.com/homarr-labs/homarr/blob/dev/CODEOWNERS) so you are requested on future PRs touching your folders. Run `pnpm scripts:generate-codeowners` locally for faster updates. Add email mappings in `scripts/codeowners-overrides.json` if the generator cannot resolve your GitHub user.
+      description: Add any other information related to the widget.
  - type: dropdown
    attributes:
      label: Are you willing to contribute this yourself?
@@ -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
@@ -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'
@@ -1,131 +0,0 @@
-name: Update CODEOWNERS
-
-on:
-  workflow_dispatch: {}
-  pull_request:
-    paths:
-      - CODEOWNERS
-      - packages/widgets/src/**
-      - packages/integrations/src/**
-      - packages/api/src/router/widgets/**
-      - packages/cron-jobs/src/jobs/**
-      - scripts/generate-codeowners.mts
-      - scripts/validate-codeowners.mts
-      - scripts/codeowners-overrides.json
-  push:
-    paths:
-      - packages/widgets/src/**
-      - packages/integrations/src/**
-      - packages/api/src/router/widgets/**
-      - packages/cron-jobs/src/jobs/**
-      - scripts/generate-codeowners.mts
-      - scripts/validate-codeowners.mts
-      - scripts/codeowners-overrides.json
-    branches:
-      - dev
-
-permissions:
-  contents: read
-  pull-requests: write
-
-jobs:
-  validate:
-    name: Validate CODEOWNERS
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-
-      - name: Use Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: .nvmrc
-
-      - uses: pnpm/action-setup@v6
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Check CODEOWNERS is up to date
-        run: pnpm exec tsx ./scripts/generate-codeowners.mts --check
-
-      - name: Validate CODEOWNERS
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-          GITHUB_REPOSITORY: ${{ github.repository }}
-        run: pnpm exec tsx ./scripts/validate-codeowners.mts
-
-  update:
-    name: Open CODEOWNERS update PR
-    needs: validate
-    if: github.event_name == 'push' && github.ref == 'refs/heads/dev'
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    concurrency:
-      group: update-codeowners
-      cancel-in-progress: false
-    steps:
-      - name: Obtain token
-        id: obtainToken
-        uses: actions/create-github-app-token@v3
-        with:
-          private-key: ${{ secrets.HOMARR_UPDATE_CONTRIBUTORS_PRIVATE_KEY }}
-          client-id: ${{ vars.HOMARR_UPDATE_CONTRIBUTORS_APP_ID }}
-          permission-contents: write
-          permission-pull-requests: write
-
-      - name: Checkout repository
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-
-      - name: Use Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: .nvmrc
-
-      - uses: pnpm/action-setup@v6
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Generate CODEOWNERS
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-        run: pnpm scripts:generate-codeowners
-
-      - name: Validate CODEOWNERS
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-          GITHUB_REPOSITORY: ${{ github.repository }}
-        run: pnpm exec tsx ./scripts/validate-codeowners.mts
-
-      - name: Create Pull Request
-        id: create-pull-request
-        uses: peter-evans/create-pull-request@v8
-        with:
-          token: ${{ steps.obtainToken.outputs.token }}
-          branch: update-codeowners
-          base: dev
-          title: "chore: update widget/integration CODEOWNERS"
-          delete-branch: true
-          commit-message: "chore: update widget/integration CODEOWNERS"
-          body: |
-            This PR updates per-widget and per-integration CODEOWNERS entries from git history.
-
-            Unmapped authors can be added in `scripts/codeowners-overrides.json`.
-
-      - name: Install GitHub CLI
-        run: sudo apt-get install -y gh
-
-      - name: Enable auto-merge
-        if: steps.create-pull-request.outputs.pull-request-number != ''
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-        run: |
-          gh pr merge ${{ steps.create-pull-request.outputs.pull-request-number }} --auto --squash
@@ -1 +1 @@
-24.16.0
+24.15.0
@@ -1,7 +0,0 @@
-{
-  "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "printWidth": 120,
-  "endOfLine": "lf",
-  "sortPackageJson": true,
-  "ignorePatterns": ["**/*.cjs", "**/lang/**", "static-data/**", "CHANGELOG.md"]
-}
@@ -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" }
-  }
-}
@@ -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
@@ -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>/**"
+      ]
    }
  ]
 }
@@ -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",
 }
@@ -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
@@ -11,86 +11,3 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 Dockerfile
 docker-compose.yml
-
-# BEGIN GENERATED widget/integration owners
-/packages/api/src/router/widgets/anchor-notes.ts /packages/integrations/src/anchor/ /packages/widgets/src/anchor-note/ @omariqbal
-/packages/api/src/router/widgets/app.ts /packages/widgets/src/app/ @manuel-rw
-/packages/api/src/router/widgets/calendar.ts /packages/widgets/src/calendar/ @manuel-rw
-/packages/api/src/router/widgets/coolify.ts /packages/integrations/src/coolify/ /packages/widgets/src/coolify/ @Rhiz3K
-/packages/api/src/router/widgets/dns-hole.ts /packages/cron-jobs/src/jobs/integrations/dns-hole.ts /packages/widgets/src/dns-hole/controls/ @manuel-rw
-/packages/api/src/router/widgets/dns-hole.ts /packages/cron-jobs/src/jobs/integrations/dns-hole.ts /packages/widgets/src/dns-hole/summary/ @manuel-rw
-/packages/api/src/router/widgets/downloads.ts /packages/cron-jobs/src/jobs/integrations/downloads.ts /packages/widgets/src/downloads/ @manuel-rw
-/packages/api/src/router/widgets/firewall.ts /packages/cron-jobs/src/jobs/integrations/firewall.ts /packages/widgets/src/firewall/ @Oupsman
-/packages/api/src/router/widgets/health-monitoring.ts /packages/cron-jobs/src/jobs/integrations/health-monitoring.ts /packages/widgets/src/health-monitoring/ @dgshue
-/packages/api/src/router/widgets/immich.ts /packages/integrations/src/immich/ /packages/widgets/src/immich/album-carousel/ @manuel-rw
-/packages/api/src/router/widgets/immich.ts /packages/integrations/src/immich/ /packages/widgets/src/immich/server-stats/ @manuel-rw
-/packages/api/src/router/widgets/indexer-manager.ts /packages/cron-jobs/src/jobs/integrations/indexer-manager.ts /packages/widgets/src/indexer-manager/ @manuel-rw
-/packages/api/src/router/widgets/media-release.ts /packages/widgets/src/media-releases/ @manuel-rw
-/packages/api/src/router/widgets/media-requests.ts /packages/cron-jobs/src/jobs/integrations/media-requests.ts /packages/widgets/src/media-requests/list/ @manuel-rw
-/packages/api/src/router/widgets/media-requests.ts /packages/cron-jobs/src/jobs/integrations/media-requests.ts /packages/widgets/src/media-requests/stats/ @manuel-rw
-/packages/api/src/router/widgets/media-server.ts /packages/cron-jobs/src/jobs/integrations/media-server.ts /packages/widgets/src/media-server/ @manuel-rw
-/packages/api/src/router/widgets/media-transcoding.ts /packages/cron-jobs/src/jobs/integrations/media-transcoding.ts /packages/integrations/src/media-transcoding/ /packages/widgets/src/media-transcoding/ @manuel-rw
-/packages/api/src/router/widgets/minecraft.ts /packages/widgets/src/minecraft/server-status/ @manuel-rw
-/packages/api/src/router/widgets/network-controller.ts /packages/cron-jobs/src/jobs/integrations/network-controller.ts /packages/widgets/src/network-controller/network-status/ @pitschi
-/packages/api/src/router/widgets/network-controller.ts /packages/cron-jobs/src/jobs/integrations/network-controller.ts /packages/widgets/src/network-controller/summary/ @pitschi
-/packages/api/src/router/widgets/notebook.ts /packages/widgets/src/notebook/ @manuel-rw
-/packages/api/src/router/widgets/notifications.ts /packages/cron-jobs/src/jobs/integrations/notifications.ts /packages/widgets/src/notifications/ @itzTheMeow
-/packages/api/src/router/widgets/releases.ts /packages/widgets/src/releases/ @Aandree5
-/packages/api/src/router/widgets/rssFeed.ts /packages/widgets/src/rssFeed/ @manuel-rw
-/packages/api/src/router/widgets/smart-home.ts /packages/cron-jobs/src/jobs/integrations/home-assistant.ts /packages/widgets/src/smart-home/entity-state/ @manuel-rw
-/packages/api/src/router/widgets/smart-home.ts /packages/cron-jobs/src/jobs/integrations/home-assistant.ts /packages/widgets/src/smart-home/execute-automation/ @manuel-rw
-/packages/api/src/router/widgets/speedtest-tracker.ts /packages/integrations/src/speedtest-tracker/ /packages/widgets/src/speedtest-tracker/ @kylegrieder
-/packages/api/src/router/widgets/stocks.ts /packages/widgets/src/stocks/ @jackwellerreal
-/packages/api/src/router/widgets/timetable.ts /packages/cron-jobs/src/jobs/integrations/timetable.ts /packages/widgets/src/timetable/ @manuel-rw
-/packages/api/src/router/widgets/tracearr.ts /packages/cron-jobs/src/jobs/integrations/tracearr.ts /packages/integrations/src/tracearr/ /packages/widgets/src/tracearr/ @StrandedTurtle
-/packages/api/src/router/widgets/umami.ts /packages/cron-jobs/src/jobs/integrations/umami.ts /packages/integrations/src/umami/ /packages/widgets/src/umami/ @febrile42
-/packages/api/src/router/widgets/weather.ts /packages/cron-jobs/src/jobs/weather.ts /packages/widgets/src/weather/ @manuel-rw
-/packages/cron-jobs/src/jobs/docker.ts /packages/widgets/src/docker/ @ashtonbatty
-/packages/cron-jobs/src/jobs/integrations/dns-hole.ts /packages/integrations/src/pi-hole/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/downloads.ts /packages/integrations/src/download-client/aria2/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/downloads.ts /packages/integrations/src/download-client/deluge/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/downloads.ts /packages/integrations/src/download-client/nzbget/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/downloads.ts /packages/integrations/src/download-client/qbittorrent/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/downloads.ts /packages/integrations/src/download-client/sabnzbd/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/downloads.ts /packages/integrations/src/download-client/slskd/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/downloads.ts /packages/integrations/src/download-client/transmission/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/home-assistant.ts /packages/integrations/src/homeassistant/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/media-organizer.ts /packages/integrations/src/media-organizer/lidarr/ @NicolasNewman
-/packages/cron-jobs/src/jobs/integrations/media-organizer.ts /packages/integrations/src/media-organizer/radarr/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/media-organizer.ts /packages/integrations/src/media-organizer/readarr/ @manuel-rw
-/packages/cron-jobs/src/jobs/integrations/media-organizer.ts /packages/integrations/src/media-organizer/sonarr/ @manuel-rw
-/packages/integrations/src/adguard-home/ @manuel-rw
-/packages/integrations/src/codeberg/ @Aandree5
-/packages/integrations/src/dashdot/ @dgshue
-/packages/integrations/src/docker-hub/ @Aandree5
-/packages/integrations/src/emby/ @manuel-rw
-/packages/integrations/src/github-container-registry/ @manuel-rw
-/packages/integrations/src/github/ @manuel-rw
-/packages/integrations/src/gitlab/ @Aandree5
-/packages/integrations/src/glances/ @dgshue
-/packages/integrations/src/ical/ @NicolasNewman
-/packages/integrations/src/jellyfin/ @manuel-rw
-/packages/integrations/src/jellyseerr/ @manuel-rw
-/packages/integrations/src/linuxserverio/ @Aandree5
-/packages/integrations/src/nextcloud/ @manuel-rw
-/packages/integrations/src/npm/ @Aandree5
-/packages/integrations/src/ntfy/ @manuel-rw
-/packages/integrations/src/openmediavault/ @dgshue
-/packages/integrations/src/opnsense/ @manuel-rw
-/packages/integrations/src/overseerr/ @manuel-rw
-/packages/integrations/src/plex/ @manuel-rw
-/packages/integrations/src/prowlarr/ @manuel-rw
-/packages/integrations/src/proxmox/ @manuel-rw
-/packages/integrations/src/quay/ @Aandree5
-/packages/integrations/src/search-ch/ @manuel-rw
-/packages/integrations/src/seerr/ @manuel-rw
-/packages/integrations/src/truenas/ @dgshue
-/packages/integrations/src/unifi-controller/ @manuel-rw
-/packages/integrations/src/unraid/ @dgshue
-/packages/widgets/src/bookmarks/ @manuel-rw
-/packages/widgets/src/clock/ @manuel-rw
-/packages/widgets/src/iframe/ @manuel-rw
-/packages/widgets/src/system-disks/ @manuel-rw
-/packages/widgets/src/system-resources/ @kylegrieder
-/packages/widgets/src/video/ @manuel-rw
-# END GENERATED widget/integration owners
@@ -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
@@ -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",
+    },
+  },
+];
@@ -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:"
  }
 }
@@ -2,14 +2,13 @@

 import type { PropsWithChildren } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { DirectionProvider, MantineProvider, v8CssVariablesResolver } 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,
@@ -21,8 +20,10 @@ export const CustomMantineProvider = ({
      <MantineProvider
        defaultColorScheme={defaultColorScheme}
        colorSchemeManager={manager}
-        theme={theme}
-        cssVariablesResolver={v8CssVariablesResolver}
+        theme={createTheme({
+          primaryColor: "red",
+          autoContrast: true,
+        })}
      >
        {children}
      </MantineProvider>
@@ -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">
@@ -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>
@@ -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}
@@ -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} />
@@ -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)}>
@@ -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} />
@@ -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;
+};
@@ -2,7 +2,7 @@

 import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
-import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem, v8CssVariablesResolver } from "@mantine/core";
+import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem } from "@mantine/core";

 import { useRequiredBoard } from "@homarr/boards/context";
 import type { ColorScheme } from "@homarr/definitions";
@@ -24,7 +24,6 @@ export const BoardMantineProvider = ({
    },
    primaryColor: "primaryColor",
    autoContrast: true,
-    defaultRadius: "sm",
    fontSizes: {
      "2xl": rem(24),
      "3xl": rem(28),
@@ -33,12 +32,7 @@ export const BoardMantineProvider = ({
  });

  return (
-    <MantineProvider
-      defaultColorScheme={defaultColorScheme}
-      theme={theme}
-      colorSchemeManager={colorSchemeManager}
-      cssVariablesResolver={v8CssVariablesResolver}
-    >
+    <MantineProvider defaultColorScheme={defaultColorScheme} theme={theme} colorSchemeManager={colorSchemeManager}>
      {children}
    </MantineProvider>
  );
@@ -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} />
@@ -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>

@@ -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
@@ -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" }}>
@@ -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) => {
@@ -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>

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

@@ -1,15 +1,15 @@
 "use client";

-import { Button, Stack, TextInput } from "@mantine/core";
+import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
 import type { z } from "zod/v4";

 import { clientApi } from "@homarr/api/client";
 import { signIn } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
-import { UserCreatePasswordFields } from "@homarr/forms-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
+import { CustomPasswordInput } from "@homarr/ui";
 import { userInitSchema } from "@homarr/validation/user";

 export const InitUserForm = () => {
@@ -59,10 +59,12 @@ export const InitUserForm = () => {
      >
        <Stack gap="lg">
          <TextInput label={t("field.username.label")} {...form.getInputProps("username")} />
-          <UserCreatePasswordFields
-            passwordInputProps={form.getInputProps("password")}
-            confirmPasswordInputProps={form.getInputProps("confirmPassword")}
+          <CustomPasswordInput
+            withPasswordRequirements
+            label={t("field.password.label")}
+            {...form.getInputProps("password")}
          />
+          <PasswordInput label={t("field.passwordConfirm.label")} {...form.getInputProps("confirmPassword")} />
          <Button type="submit" fullWidth loading={isPending}>
            {t("action.create")}
          </Button>
@@ -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>
  );
@@ -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>
@@ -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}
@@ -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>

@@ -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
@@ -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>
+    </>
  );
 };
@@ -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>
@@ -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>
  );
@@ -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>({
@@ -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">
@@ -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">
@@ -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 && (
@@ -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);
  }
 }
@@ -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>
  );
 }

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

@@ -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>
@@ -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>
        ))}
@@ -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
@@ -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>
@@ -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")} />
@@ -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;
    }
@@ -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
@@ -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>
@@ -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;
+    }
  }
 }
@@ -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,
@@ -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>

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

 import { startTransition, useCallback, useState } from "react";
-import { Badge, Button, Card, Group, Stack, Stepper, Table, Text, TextInput, Title, Tooltip } from "@mantine/core";
+import {
+  Badge,
+  Button,
+  Card,
+  Group,
+  PasswordInput,
+  Stack,
+  Stepper,
+  Table,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from "@mantine/core";
 import { useListState } from "@mantine/hooks";
 import { IconPlus, IconUserCheck } from "@tabler/icons-react";
 import { z } from "zod/v4";
@@ -11,11 +24,10 @@ import type { GroupPermissionKey } from "@homarr/definitions";
 import { everyoneGroup, groupPermissions } from "@homarr/definitions";
 import type { IsValid } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
-import { UserCreatePasswordFields } from "@homarr/forms-collection";
 import { useModalAction } from "@homarr/modals";
 import { showErrorNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { UserAvatar } from "@homarr/ui";
+import { CustomPasswordInput, UserAvatar } from "@homarr/ui";
 import { createCustomErrorParams } from "@homarr/validation/form/i18n";
 import { userPasswordSchema } from "@homarr/validation/user";

@@ -137,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")}
@@ -153,19 +165,27 @@ 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">
-                <UserCreatePasswordFields
+                <CustomPasswordInput
+                  withPasswordRequirements
+                  label={tUserField("password.label")}
                  variant="filled"
-                  passwordInputProps={securityForm.getInputProps("password")}
-                  confirmPasswordInputProps={securityForm.getInputProps("confirmPassword")}
+                  withAsterisk
+                  {...securityForm.getInputProps("password")}
+                />
+                <PasswordInput
+                  label={tUserField("passwordConfirm.label")}
+                  variant="filled"
+                  withAsterisk
+                  {...securityForm.getInputProps("confirmPassword")}
                />
              </Stack>
            </Card>
          </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) =>
@@ -178,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>
@@ -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
@@ -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>
@@ -68,6 +68,7 @@ const PermissionCard = async ({ group, isDanger }: PermissionCardProps) => {
  return (
    <Card
      p="md"
+      withBorder
      style={{
        borderColor: isDanger ? "var(--mantine-color-red-8)" : undefined,
      }}
@@ -1,7 +1,7 @@
 "use client";

-import { 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>;
 };
@@ -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>
@@ -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>
  );
 }
@@ -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>
-  );
-};
@@ -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]> }) => {
@@ -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>
+    </>
  );
 }
@@ -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} />
+    </>
  );
 }
@@ -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>
@@ -8,14 +8,12 @@ import { getFirstEmptyPosition } from "./empty-position";
 import { getSectionElements } from "./section-elements";

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

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

    const widget = {
-      id: id ?? createId(),
+      id: createId(),
      kind,
      options,
      layouts: createItemLayouts(previous, firstSection),
-      integrationIds,
+      integrationIds: [],
      advancedOptions: {
        title: null,
        customCssClasses: [],
@@ -42,6 +42,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
          item.advancedOptions.customCssClasses.join(" "),
        )}
        radius={board.itemRadius}
+        withBorder
        styles={{
          root: {
            "--opacity": board.opacity / 100,
@@ -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>
@@ -2,26 +2,20 @@ import { useMemo, useState } from "react";
 import { Avatar, Button, Card, Center, Grid, Group, Input, Stack, Text, Tooltip } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";

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

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

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

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

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

  return (
@@ -145,7 +104,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 +129,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>
@@ -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>
@@ -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>
@@ -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",
@@ -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>
@@ -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;
@@ -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} />;
 };
@@ -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"
@@ -44,7 +44,6 @@ export const BoardBackgroundVideo = () => {
      muted
      loop
      playsInline
-      aria-hidden="true"
      style={{
        position: "fixed",
        width: "100vw",
@@ -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} />
      ))}
@@ -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) => (
Author	SHA1	Message	Date
Thomas Camlong	313758a47f	fix(turbo): include test files in typecheck cache inputs Test files must be typechecked — excluding them from typecheck inputs caused changed tests to skip type validation.	2026-05-21 14:00:47 +02:00
Thomas Camlong	33280a2059	fix(turbo): remove runtime env vars from build cache key These env vars (DB_, AUTH_, DOCKER_*, etc.) are all runtime configuration provided by users when running the Docker container. They don't influence the build output since Next.js standalone mode reads process.env at runtime and SKIP_ENV_VALIDATION=true skips validation during build. Listing them in build.env caused unnecessary cache busting in local dev. Also restores coverage report comments per review feedback.	2026-05-21 14:00:34 +02:00
Thomas Camlong	9b50700cb1	fix(turbo): disable remote cache signature verification The cache lives on a private CF worker, signature verification just adds noise without security benefit.	2026-05-21 14:00:34 +02:00
Thomas Camlong	037f8082bc	perf(turbo): scope topo task inputs to package.json only The topo virtual task had no explicit inputs, defaulting to all files. This caused any source change to cascade cache invalidation through all dependent packages via ^topo. Since topo is only for dependency ordering, its hash should only change when dependencies change.	2026-05-21 14:00:34 +02:00
Thomas Camlong	5528d27c8f	perf(typecheck): exclude bundled .cjs/.css from tsc websocket (835K lines) and tasks (755K lines) had bundled output files being typechecked due to `include: ["."]` in their tsconfig. Full typecheck drops from ~70s to ~26s.	2026-05-21 14:00:33 +02:00
Thomas Camlong	1b110b5d3e	fix(ci): set TURBO_SCM_BASE for --affected to work in PRs Turbo defaults to comparing against `main`, but PRs target `dev`. Without explicit base/head refs, --affected falls back to running all tasks. Use the PR base SHA for pull_requests, the before SHA for pushes, and HEAD~1 as a last resort.	2026-05-21 14:00:33 +02:00
Thomas Camlong	828d943ef7	ci: add Cloudflare remote cache for Turborepo Configure turborepo-remote-cache-cloudflare as the remote cache backend. This commit can be reverted independently to disable remote caching.	2026-05-21 14:00:33 +02:00
Thomas Camlong	3ed6baf6de	ci: add --affected filtering and fix Turbo cache invalidation - Remove globalDependencies **/.env which invalidated all caches on any .env change - Move 40+ env vars from globalEnv to build-specific env (lint/format/typecheck don't need DB_URL etc.) - Add per-task inputs with test file exclusions so test changes don't trigger build/typecheck - Enable affectedUsingTaskInputs for task-level --affected detection - Add --affected to all turbo commands in CI (lint, format, typecheck, build) - Add fetch-depth: 0 for proper git history comparison - Add Docker Buildx + GHA layer caching for E2E builds	2026-05-21 14:00:33 +02:00
@@ -1 +1 @@
 .16.0
 .15.0