2026-09-12 08:39:00 +02:00 · 2026-09-12 08:39:00 +02:00 · 38d4899b07
commit 38d4899b07
parent 6e12720ad6
18 changed files with 1170 additions and 322 deletions
--- a/PLAN_NEXT.md
+++ b/PLAN_NEXT.md
@ -103,6 +103,17 @@ auth` + the LFX/stack repair commit:
  `npm run build` green, routes + `/api` proxy return 200, served schema
  validates under JSON-Schema Draft 7.

+## 0.3 Frontend design pass (Mantine)
+
+Plain-HTML UI replaced with a coherent Mantine v9 design system:
+`@mantine/core` + `@mantine/hooks` + `@rjsf/mantine` (v6, matches core)
+ `@tabler/icons-react`. `src/theme.ts` (kirchenblau primary, system
+fonts only, serif display headings), `AppShell` header/nav, per-page
+`Card`/`Table`/`Alert`/`Badge` via shared `StatusBadge`, dark mode via
+localStorage manager + toggle + inline `ColorSchemeScript` equivalent.
+RJSF swap was import-only; SSR smoke test proved all 10 intake labels +
+textarea/password/checkbox/slider widgets render. `npm run build` green.
+
 ## 1. Locked decisions (do not re-ask)* Auth: SMTP magic-link, 15-min single-use tokens (`secrets.token_urlsafe`,
  store `sha256`, `used_at` set before session creation), session = opaque id
  in **DB table**, cookie `HttpOnly; Secure; SameSite=Lax; Path=/`.
--- a/frontend/index.html
+++ b/frontend/index.html
@ -3,7 +3,26 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1d4a79" />
+    <meta
+      name="description"
+      content="Kirche Einfach — KI-gestützte Verwaltungsplattform für Kirche"
+    />
    <title>Kirche Einfach</title>
+    <script>
+      try {
+        var s = localStorage.getItem("kirche-color-scheme");
+        if (
+          s === "dark" ||
+          (!s && matchMedia("(prefers-color-scheme: dark)").matches)
+        ) {
+          document.documentElement.setAttribute(
+            "data-mantine-color-scheme",
+            "dark",
+          );
+        }
+      } catch (e) {}
+    </script>
  </head>
  <body>
    <div id="root"></div>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -8,8 +8,12 @@
      "name": "kirche-einfach-frontend",
      "version": "0.1.0",
      "dependencies": {
+        "@mantine/core": "^9.6.1",
+        "@mantine/hooks": "^9.6.1",
        "@rjsf/core": "^6.10.0",
+        "@rjsf/mantine": "^6.10.0",
        "@rjsf/validator-ajv8": "^6.10.0",
+        "@tabler/icons-react": "^3.46.0",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-router-dom": "^7.18.3"
@ -746,6 +750,59 @@
        "node": ">=18"
      }
    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.27.20",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.20.tgz",
+      "integrity": "sha512-CMqMy7OaXl9W0eq1Uy7L7i2Y/anPvHmFmESd2CEw0t5YvZhcVCeo4MBevAmswRllX7Y2dEidA4ozGPunLSTQpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.9",
+        "@floating-ui/utils": "^0.2.12",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.9.tgz",
+      "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.8.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "license": "MIT"
+    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.13",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@ -796,6 +853,50 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@mantine/core": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-9.6.1.tgz",
+      "integrity": "sha512-UkcPo8Zq0uSdodvyXV62HVmfIfHCcrjFrFrH0TggTy6Wtp8a78znGP8RJOz8zC9XSPpJmKjBQjg0M+nOvIzftA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.27.20",
+        "clsx": "^2.1.1",
+        "react-number-format": "^5.4.5",
+        "react-remove-scroll": "^2.7.2",
+        "type-fest": "^5.8.0"
+      },
+      "peerDependencies": {
+        "@mantine/hooks": "9.6.1",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0"
+      }
+    },
+    "node_modules/@mantine/dates": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-9.6.1.tgz",
+      "integrity": "sha512-3NxfqrcwMuYB9wvxIhGhEhhazK3wcA2wG4AuNVFGJDd97ujWWAy+jGHqBF9jOusp/Mk4bn8u+3SuDICtLPDf5w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "@mantine/core": "9.6.1",
+        "@mantine/hooks": "9.6.1",
+        "dayjs": ">=1.0.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0"
+      }
+    },
+    "node_modules/@mantine/hooks": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-9.6.1.tgz",
+      "integrity": "sha512-pfxM95WozngB0ZALw6h99QV1TQ0qniOkFhzi0+dmSnKpxkVSR0xeNsvPpGDj9Teu+M69fRoE4IkzyMnu5Xld3w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^19.2.0"
+      }
+    },
    "node_modules/@napi-rs/lzma-linux-x64-gnu": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
@ -829,6 +930,26 @@
        "react": ">=18"
      }
    },
+    "node_modules/@rjsf/mantine": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@rjsf/mantine/-/mantine-6.10.0.tgz",
+      "integrity": "sha512-tqD2v7rCEaI5Dme66MiaIMem/zTuKJBn9+B1d5J8cVCOh77FmEyn1neVvB6rPK+jXNVY6jJD8DRW8vAzK6OPRQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dayjs": "^1.11.21"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@mantine/core": ">=8",
+        "@mantine/dates": ">=8",
+        "@mantine/hooks": ">=8",
+        "@rjsf/core": "^6.10.0",
+        "@rjsf/utils": "^6.10.0",
+        "react": ">=18"
+      }
+    },
    "node_modules/@rjsf/utils": {
      "version": "6.10.0",
      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-6.10.0.tgz",
@ -1222,6 +1343,32 @@
        "win32"
      ]
    },
+    "node_modules/@tabler/icons": {
+      "version": "3.46.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.46.0.tgz",
+      "integrity": "sha512-f2RYFl3fzPwj5WO82x6en0dmkjefxEfOm16D1ByM6cj/McNiwOkL4VaPUoP9VVIrXAD9WnTSVFr70px703b//A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.46.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.46.0.tgz",
+      "integrity": "sha512-CCm7xJWhDT2PH4ZIFkP6AgYKtVhq0gpYkjUN+GVh1AzmIQaa77OW0bQPBPQiTE0PsXMR9oSxFqA3qBglzPyrVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.46.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@ -1285,7 +1432,7 @@
      "version": "19.2.18",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "csstype": "^3.2.2"
@ -1449,6 +1596,15 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@ -1473,7 +1629,13 @@
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.23",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.23.tgz",
+      "integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==",
      "license": "MIT"
    },
    "node_modules/debug": {
@ -1494,6 +1656,12 @@
        }
      }
    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.420",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.420.tgz",
@ -1629,6 +1797,15 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -1829,6 +2006,16 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/react-number-format": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.5.tgz",
+      "integrity": "sha512-y8O2yHHj3w0aE9XO8d2BCcUOOdQTRSVq+WIuMlLVucAm5XNjJAy+BoOJiuQMldVYVOKTMyvVNfnbl2Oqp+YxGw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@ -1839,6 +2026,53 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-router": {
      "version": "7.18.3",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.3.tgz",
@ -1877,6 +2111,28 @@
        "react-dom": ">=18"
      }
    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/require-from-string": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@ -1964,6 +2220,24 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/tabbable": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.5.0.tgz",
+      "integrity": "sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==",
+      "license": "MIT"
+    },
+    "node_modules/tagged-tag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
+      "integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.17",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@ -1981,6 +2255,27 @@
        "url": "https://github.com/sponsors/SuperchupuDev"
      }
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-fest": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.9.0.tgz",
+      "integrity": "sha512-yANm3Jr3GiJ1qgJlxGAVxTOIcEOk1rhQHamlXtnrCK7EHP4HeM9OGxtMg/W7HFdrVzw/ZWJKGVIJusVH85sLtw==",
+      "license": "(MIT OR CC0-1.0)",
+      "dependencies": {
+        "tagged-tag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/typescript": {
      "version": "5.6.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
@ -2026,6 +2321,49 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/vite": {
      "version": "6.4.3",
      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -9,8 +9,12 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@mantine/core": "^9.6.1",
+    "@mantine/hooks": "^9.6.1",
    "@rjsf/core": "^6.10.0",
+    "@rjsf/mantine": "^6.10.0",
    "@rjsf/validator-ajv8": "^6.10.0",
+    "@tabler/icons-react": "^3.46.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.18.3"
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -1,5 +1,17 @@
 import { Link, Route, Routes, useNavigate } from "react-router-dom";
+import {
+  Anchor,
+  AppShell,
+  Button,
+  Center,
+  Container,
+  Group,
+  Loader,
+  Text,
+  Title,
+} from "@mantine/core";
 import { AuthProvider, useAuth } from "./auth";
+import SchemeToggle from "./components/SchemeToggle";
 import StartPage from "./pages/StartPage";
 import AccessPage from "./pages/AccessPage";
 import LoginPage from "./pages/LoginPage";
@ -7,15 +19,8 @@ import WorkflowsPage from "./pages/WorkflowsPage";
 import TasksPage from "./pages/TasksPage";
 import AdminPage from "./pages/AdminPage";

-const navStyle: React.CSSProperties = {
-  display: "flex",
-  gap: 12,
-  marginBottom: 16,
-  alignItems: "center",
-};
-
-function Shell() {
-  const { me, loading, logout } = useAuth();
+function Nav() {
+  const { me, logout } = useAuth();
  const navigate = useNavigate();

  async function onLogout() {
@ -24,24 +29,75 @@ function Shell() {
  }

  return (
-    <div style={{ maxWidth: 900, margin: "0 auto", padding: 16 }}>
-      <h1>Kirche Einfach</h1>
-      <p>KI-gestützte Verwaltungsplattform für Kirche</p>
-      <nav style={navStyle}>
-        <Link to="/">Start</Link>
-        {!me && <Link to="/access">Zugang</Link>}
+    <Group gap="md">
+      <Anchor component={Link} to="/">
+        Start
+      </Anchor>
+      {!me && (
+        <Anchor component={Link} to="/access">
+          Zugang
+        </Anchor>
+      )}
      {me && (
        <>
-            <Link to="/app/workflows">Workflows</Link>
-            <Link to="/app/tasks">Aufgaben</Link>
-            <Link to="/app/admin">Verwaltung</Link>
-            <span style={{ marginLeft: "auto" }}>{me.email}</span>
-            <button onClick={() => void onLogout()}>Abmelden</button>
+          <Anchor component={Link} to="/app/workflows">
+            Workflows
+          </Anchor>
+          <Anchor component={Link} to="/app/tasks">
+            Aufgaben
+          </Anchor>
+          <Anchor component={Link} to="/app/admin">
+            Verwaltung
+          </Anchor>
        </>
      )}
-      </nav>
+      <SchemeToggle />
+      {me && (
+        <>
+          <Text size="sm" c="dimmed">
+            {me.email}
+          </Text>
+          <Button variant="subtle" size="compact-md" onClick={() => void onLogout()}>
+            Abmelden
+          </Button>
+        </>
+      )}
+    </Group>
+  );
+}
+
+function Shell() {
+  const { loading } = useAuth();
+
+  return (
+    <AppShell header={{ height: 64 }} padding="md">
+      <AppShell.Header>
+        <Container
+          h="100%"
+          style={{ display: "flex", alignItems: "center", gap: 16 }}
+        >
+          <Anchor
+            component={Link}
+            to="/"
+            underline="never"
+            style={{ color: "inherit" }}
+          >
+            <Title order={3}>Kirche Einfach</Title>
+          </Anchor>
+          <div style={{ marginLeft: "auto" }}>
+            <Nav />
+          </div>
+        </Container>
+      </AppShell.Header>
+      <AppShell.Main>
+        <Container>
+          <Text size="sm" c="dimmed" mb="md">
+            KI-gestützte Verwaltungsplattform für Kirche
+          </Text>
          {loading ? (
-        <p>Wird geladen …</p>
+            <Center mt="xl">
+              <Loader />
+            </Center>
          ) : (
            <Routes>
              <Route path="/" element={<StartPage />} />
@ -53,7 +109,9 @@ function Shell() {
              <Route path="*" element={<StartPage />} />
            </Routes>
          )}
-    </div>
+        </Container>
+      </AppShell.Main>
+    </AppShell>
  );
 }

--- a/frontend/src/components/AccessQueue.tsx
+++ b/frontend/src/components/AccessQueue.tsx
@ -1,5 +1,19 @@
 import { useCallback, useEffect, useState } from "react";
+import {
+  Alert,
+  Button,
+  Card,
+  Group,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
+  IconAlertCircle,
+  IconCheck,
+} from "@tabler/icons-react";
 import { ApiError, api, type AccessRequest } from "../api";
+import StatusBadge from "./StatusBadge";

 export default function AccessQueue() {
  const [requests, setRequests] = useState<AccessRequest[]>([]);
@ -43,46 +57,72 @@ export default function AccessQueue() {

  return (
    <div>
-      <h3>Zugangsanfragen</h3>
-      {error && <p style={{ color: "crimson" }}>{error}</p>}
-      {info && <p style={{ color: "green" }}>{info}</p>}
-      {pending.length === 0 && <p>Keine offenen Anfragen.</p>}
-      <ul>
-        {pending.map((r) => (
-          <li key={r.id} style={{ marginBottom: 8 }}>
-            <strong>{r.name}</strong> · {r.email}
-            {r.reason && (
-              <>
-                <br />
-                {r.reason}
-              </>
+      <Title order={3} mb="xs">
+        Zugangsanfragen
+      </Title>
+      {error && (
+        <Alert color="red" icon={<IconAlertCircle size={18} />} mb="md">
+          {error}
+        </Alert>
      )}
-            <br />
-            <button
+      {info && (
+        <Alert color="green" icon={<IconCheck size={18} />} mb="md">
+          {info}
+        </Alert>
+      )}
+      {pending.length === 0 && (
+        <Text c="dimmed" mb="md">
+          Keine offenen Anfragen.
+        </Text>
+      )}
+      <Stack mb="md">
+        {pending.map((r) => (
+          <Card withBorder padding="md" key={r.id}>
+            <Group gap="xs" mb="xs">
+              <StatusBadge status={r.status} />
+              <strong>{r.name}</strong>
+              <Text size="sm" c="dimmed">
+                {r.email}
+              </Text>
+            </Group>
+            {r.reason && (
+              <Text size="sm" mb="sm">
+                {r.reason}
+              </Text>
+            )}
+            <Group>
+              <Button
+                color="green"
+                loading={busyId === r.id}
                onClick={() => void decide(r.id, true)}
-              disabled={busyId === r.id}
              >
                Genehmigen
-            </button>{" "}
-            <button
+              </Button>
+              <Button
+                color="red"
+                variant="light"
+                loading={busyId === r.id}
                onClick={() => void decide(r.id, false)}
-              disabled={busyId === r.id}
              >
                Ablehnen
-            </button>
-          </li>
+              </Button>
+            </Group>
+          </Card>
        ))}
-      </ul>
+      </Stack>
      {done.length > 0 && (
        <>
-          <h4>Entschieden ({done.length})</h4>
-          <ul>
+          <Title order={4} mb="xs">
+            Entschieden ({done.length})
+          </Title>
          {done.map((r) => (
-              <li key={r.id}>
-                <strong>{r.status}</strong> · {r.name} · {r.email}
-              </li>
+            <Group key={r.id} gap="xs" mb={4}>
+              <StatusBadge status={r.status} />
+              <Text size="sm">
+                {r.name} · {r.email}
+              </Text>
+            </Group>
          ))}
-          </ul>
        </>
      )}
    </div>
--- a/frontend/src/components/AdminTab.tsx
+++ b/frontend/src/components/AdminTab.tsx
@ -1,4 +1,22 @@
 import { useCallback, useEffect, useState } from "react";
+import {
+  Alert,
+  Anchor,
+  Button,
+  Card,
+  Group,
+  Table,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import {
+  IconAlertCircle,
+  IconCheck,
+  IconExternalLink,
+  IconRefresh,
+  IconUpload,
+} from "@tabler/icons-react";
 import {
  ApiError,
  LANGFLOW_URL,
@ -6,6 +24,7 @@ import {
  type FlowDefinition,
  type FlowVersion,
 } from "../api";
+import StatusBadge from "./StatusBadge";

 export default function AdminTab() {
  const [flows, setFlows] = useState<FlowDefinition[]>([]);
@ -86,61 +105,110 @@ export default function AdminTab() {

  return (
    <div>
-      <h2>Administration</h2>
-      {error && <p style={{ color: "crimson" }}>{error}</p>}
-      {info && <p style={{ color: "green" }}>{info}</p>}
-      <p>
+      <Title order={3} mb="xs">
+        Flows & Versionen
+      </Title>
+      {error && (
+        <Alert color="red" icon={<IconAlertCircle size={18} />} mb="md">
+          {error}
+        </Alert>
+      )}
+      {info && (
+        <Alert color="green" icon={<IconCheck size={18} />} mb="md">
+          {info}
+        </Alert>
+      )}
+      <Card withBorder padding="md" mb="md">
+        <Text mb="xs">
          Flows werden visuell in Langflow entworfen:{" "}
-        <a href={LANGFLOW_URL} target="_blank" rel="noreferrer">
-          Langflow öffnen
-        </a>
-      </p>
-      <h3>Import aus Langflow</h3>
-      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
-        <input
+          <Anchor href={LANGFLOW_URL} target="_blank" rel="noreferrer">
+            Langflow öffnen <IconExternalLink size={14} />
+          </Anchor>
+        </Text>
+        <Group align="flex-end">
+          <TextInput
+            label="Langflow Flow-ID (UUID)"
            value={langflowId}
            onChange={(e) => setLangflowId(e.target.value)}
-          placeholder="Langflow Flow-ID (UUID)"
-          style={{ flex: 1, fontFamily: "monospace" }}
+            style={{ flex: 1 }}
+            styles={{ input: { fontFamily: "monospace" } }}
          />
-        <input
+          <TextInput
+            label="Name (optional)"
            value={importName}
            onChange={(e) => setImportName(e.target.value)}
-          placeholder="Name (optional)"
          />
-        <button onClick={() => void onImport()} disabled={!langflowId.trim()}>
+          <Button
+            leftSection={<IconUpload size={16} />}
+            onClick={() => void onImport()}
+            disabled={!langflowId.trim()}
+          >
            Importieren + Deployen
-        </button>
-      </div>
-      <h3>Flows + Versionen</h3>
-      <div style={{ marginBottom: 12 }}>
-        <button onClick={() => void onSync()}>
+          </Button>
+        </Group>
+      </Card>
+      <Card withBorder padding="md" mb="md">
+        <Group>
+          <Button
+            variant="light"
+            leftSection={<IconRefresh size={16} />}
+            onClick={() => void onSync()}
+          >
            Aus backend/flows synchronisieren
-        </button>
-      </div>
-      {flows.length === 0 && <p>Keine Flows vorhanden.</p>}
-      <ul>
-        {flows.map((f) => (
-          <li key={f.id} style={{ marginBottom: 8 }}>
+          </Button>
+        </Group>
+      </Card>
+      {flows.length === 0 ? (
+        <Text c="dimmed">Keine Flows vorhanden.</Text>
+      ) : (
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Flow</Table.Th>
+              <Table.Th>Version</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>Autor</Table.Th>
+              <Table.Th></Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {flows.map((f) =>
+              (versions[f.id] ?? []).map((v, i) => (
+                <Table.Tr key={v.id}>
+                  <Table.Td>
+                    {i === 0 && (
+                      <>
                        <strong>{f.name}</strong>{" "}
-            <span style={{ fontFamily: "monospace", fontSize: "0.85em" }}>
+                        <Text size="xs" c="dimmed" component="span">
                          {f.source_path ? `(${f.source_path})` : "(API)"}
-            </span>
-            <ul>
-              {(versions[f.id] ?? []).map((v) => (
-                <li key={v.id}>
-                  v{v.version_no} ·{" "}
-                  {v.deployed_at ? `deployed (${v.lfx_flow_id})` : "nicht deployed"} ·{" "}
-                  {v.author || "–"}{" "}
-                  <button onClick={() => void onDeploy(f.id, v.version_no)}>
+                        </Text>
+                      </>
+                    )}
+                  </Table.Td>
+                  <Table.Td>v{v.version_no}</Table.Td>
+                  <Table.Td>
+                    {v.deployed_at ? (
+                      <StatusBadge status="deployed" />
+                    ) : (
+                      <StatusBadge status="pending" />
+                    )}
+                  </Table.Td>
+                  <Table.Td>{v.author || "–"}</Table.Td>
+                  <Table.Td>
+                    <Button
+                      size="compact-sm"
+                      variant="light"
+                      onClick={() => void onDeploy(f.id, v.version_no)}
+                    >
                      Deployen
-                  </button>
-                </li>
-              ))}
-            </ul>
-          </li>
-        ))}
-      </ul>
+                    </Button>
+                  </Table.Td>
+                </Table.Tr>
+              )),
+            )}
+          </Table.Tbody>
+        </Table>
+      )}
    </div>
  );
 }
--- a/frontend/src/components/ApprovalsTab.tsx
+++ b/frontend/src/components/ApprovalsTab.tsx
@ -1,5 +1,18 @@
 import { useCallback, useEffect, useState } from "react";
+import {
+  Alert,
+  Button,
+  Card,
+  Code,
+  Group,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { IconAlertCircle, IconCheck, IconRefresh, IconX } from "@tabler/icons-react";
 import { ApiError, api, type ApprovalTask } from "../api";
+import StatusBadge from "./StatusBadge";

 export default function ApprovalsTab() {
  const [tasks, setTasks] = useState<ApprovalTask[]>([]);
@ -40,56 +53,89 @@ export default function ApprovalsTab() {

  return (
    <div>
-      <h2>Freigaben</h2>
-      {error && <p style={{ color: "crimson" }}>{error}</p>}
-      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
-        <input
+      <Title order={3} mb="xs">
+        Freigaben
+      </Title>
+      {error && (
+        <Alert color="red" icon={<IconAlertCircle size={18} />} mb="md">
+          {error}
+        </Alert>
+      )}
+      <Group mb="md" align="flex-end">
+        <TextInput
+          label="Name (Bearbeiter)"
          value={approver}
          onChange={(e) => setApprover(e.target.value)}
-          placeholder="Name (Bearbeiter)"
        />
-        <input
+        <TextInput
+          label="Notiz"
          value={note}
          onChange={(e) => setNote(e.target.value)}
-          placeholder="Notiz"
          style={{ flex: 1 }}
        />
-        <button onClick={() => void load()}>Aktualisieren</button>
-      </div>
-      <h3>Offen ({open.length})</h3>
-      {open.length === 0 && <p>Keine offenen Freigaben.</p>}
-      <ul>
+        <Button
+          variant="light"
+          leftSection={<IconRefresh size={16} />}
+          onClick={() => void load()}
+        >
+          Aktualisieren
+        </Button>
+      </Group>
+      <Title order={4} mb="xs">
+        Offen ({open.length})
+      </Title>
+      {open.length === 0 && (
+        <Text c="dimmed" mb="md">
+          Keine offenen Freigaben.
+        </Text>
+      )}
+      <Stack mb="md">
        {open.map((t) => (
-          <li key={t.id} style={{ marginBottom: 8 }}>
-            <strong>{t.title || t.id}</strong> · {t.tenant_id}
-            <br />
-            <code>{JSON.stringify(t.payload)}</code>
-            <br />
-            <button
+          <Card withBorder padding="md" key={t.id}>
+            <Group gap="xs" mb="xs">
+              <StatusBadge status={t.status} />
+              <strong>{t.title || t.id}</strong>
+              <Text size="sm" c="dimmed">
+                {t.tenant_id}
+              </Text>
+            </Group>
+            <Code block mb="sm">
+              {JSON.stringify(t.payload)}
+            </Code>
+            <Group>
+              <Button
+                color="green"
+                leftSection={<IconCheck size={16} />}
+                loading={busyId === t.id}
                onClick={() => void decide(t.id, "approve")}
-              disabled={busyId === t.id}
              >
                Freigeben
-            </button>{" "}
-            <button
+              </Button>
+              <Button
+                color="red"
+                variant="light"
+                leftSection={<IconX size={16} />}
+                loading={busyId === t.id}
                onClick={() => void decide(t.id, "reject")}
-              disabled={busyId === t.id}
              >
                Ablehnen
-            </button>
-          </li>
+              </Button>
+            </Group>
+          </Card>
        ))}
-      </ul>
-      <h3>Entschieden ({done.length})</h3>
-      <ul>
+      </Stack>
+      <Title order={4} mb="xs">
+        Entschieden ({done.length})
+      </Title>
      {done.map((t) => (
-          <li key={t.id}>
-            <strong>{t.status}</strong> · {t.title || t.id} ·{" "}
-            {t.approver ?? "–"}
+        <Group key={t.id} gap="xs" mb={4}>
+          <StatusBadge status={t.status} />
+          <Text size="sm">
+            {t.title || t.id} · {t.approver ?? "–"}
            {t.decision_note ? ` · „${t.decision_note}“` : ""}
-          </li>
+          </Text>
+        </Group>
      ))}
-      </ul>
    </div>
  );
 }
--- a/frontend/src/components/SchemeToggle.tsx
+++ b/frontend/src/components/SchemeToggle.tsx
@ -0,0 +1,18 @@
+import { ActionIcon, useMantineColorScheme } from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+
+export default function SchemeToggle() {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const dark = colorScheme === "dark";
+  return (
+    <ActionIcon
+      variant="subtle"
+      size="lg"
+      onClick={() => toggleColorScheme()}
+      aria-label={dark ? "Zum hellen Modus" : "Zum dunklen Modus"}
+      title={dark ? "Zum hellen Modus" : "Zum dunklen Modus"}
+    >
+      {dark ? <IconSun size={20} /> : <IconMoon size={20} />}
+    </ActionIcon>
+  );
+}
--- a/frontend/src/components/StatusBadge.tsx
+++ b/frontend/src/components/StatusBadge.tsx
@ -0,0 +1,21 @@
+import { Badge } from "@mantine/core";
+
+/* Single color language for every status in the app. */
+
+const COLORS: Record<string, string> = {
+  completed: "green",
+  approved: "green",
+  genehmigt: "green",
+  deployed: "green",
+  running: "blue",
+  open: "yellow",
+  pending: "yellow",
+  pending_approval: "yellow",
+  failed: "red",
+  rejected: "red",
+  abgelehnt: "red",
+};
+
+export default function StatusBadge({ status }: { status: string }) {
+  return <Badge color={COLORS[status] ?? "gray"}>{status}</Badge>;
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@ -1,12 +1,21 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
 import App from "./App";
+import { colorSchemeManager, theme } from "./theme";

 createRoot(document.getElementById("root")!).render(
  <StrictMode>
+    <MantineProvider
+      theme={theme}
+      colorSchemeManager={colorSchemeManager}
+      defaultColorScheme="light"
+    >
      <BrowserRouter>
        <App />
      </BrowserRouter>
+    </MantineProvider>
  </StrictMode>,
 );
--- a/frontend/src/pages/AccessPage.tsx
+++ b/frontend/src/pages/AccessPage.tsx
@ -1,4 +1,15 @@
 import { useState } from "react";
+import {
+  Alert,
+  Button,
+  Card,
+  Stack,
+  Text,
+  Textarea,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { IconAlertCircle, IconCheck } from "@tabler/icons-react";
 import { ApiError, api } from "../api";

 export default function AccessPage() {
@ -29,60 +40,54 @@ export default function AccessPage() {
    }
  }

-  if (done) {
  return (
-      <div>
-        <h2>Zugang</h2>
-        <p>
+    <Card withBorder padding="xl" maw={560}>
+      <Title order={2} mb="md">
+        Zugang anfragen
+      </Title>
+      {done ? (
+        <Alert color="green" icon={<IconCheck size={18} />} title="Angefragt">
          Danke! Ihre Anfrage ist eingegangen. Sie erhalten eine E-Mail, sobald
          sie freigegeben wurde.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <h2>Zugang anfragen</h2>
-      {error && <p style={{ color: "crimson" }}>{error}</p>}
-      <form
-        onSubmit={(e) => void onSubmit(e)}
-        style={{ display: "grid", gap: 8, maxWidth: 480 }}
-      >
-        <label>
-          Name
-          <input
+        </Alert>
+      ) : (
+        <form onSubmit={(e) => void onSubmit(e)}>
+          <Stack>
+            {error && (
+              <Alert color="red" icon={<IconAlertCircle size={18} />}>
+                {error}
+              </Alert>
+            )}
+            <TextInput
+              label="Name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
              maxLength={200}
-            style={{ width: "100%" }}
            />
-        </label>
-        <label>
-          E-Mail
-          <input
+            <TextInput
+              label="E-Mail"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              maxLength={320}
-            style={{ width: "100%" }}
            />
-        </label>
-        <label>
-          Wofür brauchen Sie Zugang?
-          <textarea
+            <Textarea
+              label="Wofür brauchen Sie Zugang?"
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              rows={4}
-            style={{ width: "100%" }}
            />
-        </label>
-        <button type="submit" disabled={busy}>
-          {busy ? "Wird gesendet …" : "Anfragen"}
-        </button>
+            <Button type="submit" loading={busy}>
+              Anfragen
+            </Button>
+            <Text size="xs" c="dimmed">
+              Ihre Angaben werden ausschließlich zur Zugangsfreigabe verwendet.
+            </Text>
+          </Stack>
        </form>
-    </div>
+      )}
+    </Card>
  );
 }
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@ -1,3 +1,5 @@
+import { Alert, Stack, Title } from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
 import AdminTab from "../components/AdminTab";
 import ApprovalsTab from "../components/ApprovalsTab";
 import AccessQueue from "../components/AccessQueue";
@ -8,25 +10,37 @@ export default function AdminPage() {
  if (!me) {
    return (
      <div>
-        <h2>Verwaltung</h2>
-        <p>Bitte melden Sie sich an, um die Verwaltung zu nutzen.</p>
+        <Title order={2} mb="md">
+          Verwaltung
+        </Title>
+        <Alert color="blue">
+          Bitte melden Sie sich an, um die Verwaltung zu nutzen.
+        </Alert>
      </div>
    );
  }
  if (me.role !== "admin") {
    return (
      <div>
-        <h2>Verwaltung</h2>
-        <p>Nur für Administratoren. Ihr Konto hat die Rolle „{me.role}“.</p>
+        <Title order={2} mb="md">
+          Verwaltung
+        </Title>
+        <Alert color="red" icon={<IconAlertCircle size={18} />}>
+          Nur für Administratoren. Ihr Konto hat die Rolle „{me.role}“.
+        </Alert>
      </div>
    );
  }
  return (
    <div>
-      <h2>Verwaltung</h2>
+      <Title order={2} mb="md">
+        Verwaltung
+      </Title>
+      <Stack gap="xl">
        <AccessQueue />
        <ApprovalsTab />
        <AdminTab />
+      </Stack>
    </div>
  );
 }
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 import { Link, Navigate, useSearchParams } from "react-router-dom";
+import { Alert, Anchor, Card, Center, Loader, Title } from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
 import { ApiError, api } from "../api";
 import { useAuth } from "../auth";

@ -29,16 +31,30 @@ export default function LoginPage() {
  if (me) return <Navigate to="/app/workflows" replace />;

  return (
-    <div>
-      <h2>Login</h2>
-      {busy && <p>Link wird geprüft …</p>}
-      {error && <p style={{ color: "crimson" }}>{error}</p>}
-      {!token && !error && (
-        <p>
-          Kein Link vorhanden. <Link to="/access">Zugang anfragen</Link> — der
-          Login-Link kommt per E-Mail.
-        </p>
+    <Center>
+      <Card withBorder padding="xl" maw={480} w="100%">
+        <Title order={2} mb="md">
+          Login
+        </Title>
+        {busy && (
+          <Center>
+            <Loader />
+          </Center>
        )}
-    </div>
+        {error && (
+          <Alert color="red" icon={<IconAlertCircle size={18} />}>
+            {error}
+          </Alert>
+        )}
+        {!token && !error && (
+          <Alert color="blue" title="Kein Link vorhanden">
+            <Anchor component={Link} to="/access">
+              Zugang anfragen
+            </Anchor>{" "}
+            — der Login-Link kommt per E-Mail.
+          </Alert>
+        )}
+      </Card>
+    </Center>
  );
 }
--- a/frontend/src/pages/StartPage.tsx
+++ b/frontend/src/pages/StartPage.tsx
@ -1,26 +1,71 @@
 import { Link } from "react-router-dom";
+import { Button, Card, Grid, Group, Text, Title } from "@mantine/core";
+import {
+  IconClipboardCheck,
+  IconInbox,
+  IconKey,
+  IconSparkles,
+} from "@tabler/icons-react";
 import { useAuth } from "../auth";

+const actions = [
+  {
+    to: "/access",
+    icon: <IconKey size={28} />,
+    title: "Zugang anfragen",
+    text: "Neu hier? Fordern Sie Ihren persönlichen Zugang an.",
+  },
+  {
+    to: "/app/workflows",
+    icon: <IconSparkles size={28} />,
+    title: "Workflows",
+    text: "Vorgänge über Formulare starten und verfolgen.",
+  },
+  {
+    to: "/app/tasks",
+    icon: <IconInbox size={28} />,
+    title: "Aufgaben",
+    text: "Eigene Läufe und offene Freigaben im Blick.",
+  },
+];
+
 export default function StartPage() {
  const { me } = useAuth();
  return (
    <div>
-      <h2>Willkommen</h2>
-      <p>
+      <Card withBorder padding="xl" mb="lg">
+        <Group gap="sm" mb="xs">
+          <IconClipboardCheck size={32} />
+          <Title order={2}>Willkommen</Title>
+        </Group>
+        <Text>
          Kirche Einfach unterstützt die Verwaltung Ihrer Gemeinde: Vorgänge
          starten, Freigaben erteilen, Zugänge verwalten.
-      </p>
-      {me ? (
-        <p>
-          Angemeldet als <strong>{me.email}</strong> ({me.tenant_id}). Weiter zu{" "}
-          <Link to="/app/workflows">Workflows</Link>.
-        </p>
-      ) : (
-        <p>
-          <Link to="/access">Zugang anfragen</Link>, um loszulegen. Mit
-          Einladungslink geht es direkt zum <Link to="/login">Login</Link>.
-        </p>
+        </Text>
+        {me && (
+          <Text mt="sm">
+            Angemeldet als <strong>{me.email}</strong> ({me.tenant_id}).
+          </Text>
        )}
+      </Card>
+      <Grid>
+        {actions.map((a) => (
+          <Grid.Col key={a.to} span={{ base: 12, sm: 4 }}>
+            <Card withBorder padding="lg" h="100%">
+              {a.icon}
+              <Title order={4} mt="sm">
+                {a.title}
+              </Title>
+              <Text size="sm" c="dimmed" mt="xs" mb="md">
+                {a.text}
+              </Text>
+              <Button component={Link} to={a.to} variant="light" fullWidth>
+                Öffnen
+              </Button>
+            </Card>
+          </Grid.Col>
+        ))}
+      </Grid>
    </div>
  );
 }
--- a/frontend/src/pages/TasksPage.tsx
+++ b/frontend/src/pages/TasksPage.tsx
@ -1,6 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
+import { Alert, Code, Table, Text, Title } from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
 import { ApiError, api, type Run } from "../api";
 import ApprovalsTab from "../components/ApprovalsTab";
+import StatusBadge from "../components/StatusBadge";

 export default function TasksPage() {
  const [runs, setRuns] = useState<{ flow: string; run: Run }[]>([]);
@ -27,18 +30,45 @@ export default function TasksPage() {

  return (
    <div>
-      <h2>Aufgaben</h2>
-      {error && <p style={{ color: "crimson" }}>{error}</p>}
-      <h3>Eigene Läufe</h3>
-      {runs.length === 0 && <p>Noch keine Läufe.</p>}
-      <ul>
+      <Title order={2} mb="md">
+        Aufgaben
+      </Title>
+      {error && (
+        <Alert color="red" icon={<IconAlertCircle size={18} />} mb="md">
+          {error}
+        </Alert>
+      )}
+      <Title order={3} mb="xs">
+        Eigene Läufe
+      </Title>
+      {runs.length === 0 ? (
+        <Text c="dimmed" mb="md">
+          Noch keine Läufe.
+        </Text>
+      ) : (
+        <Table striped highlightOnHover mb="md">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>Flow</Table.Th>
+              <Table.Th>Ergebnis</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
            {runs.map(({ flow, run }) => (
-          <li key={run.id}>
-            <strong>{run.status}</strong> · {flow} ·{" "}
-            <code>{run.output?.result ?? run.output?.error ?? "–"}</code>
-          </li>
+              <Table.Tr key={run.id}>
+                <Table.Td>
+                  <StatusBadge status={run.status} />
+                </Table.Td>
+                <Table.Td>{flow}</Table.Td>
+                <Table.Td>
+                  <Code>{run.output?.result ?? run.output?.error ?? "–"}</Code>
+                </Table.Td>
+              </Table.Tr>
            ))}
-      </ul>
+          </Table.Tbody>
+        </Table>
+      )}
      <ApprovalsTab />
    </div>
  );
--- a/frontend/src/pages/WorkflowsPage.tsx
+++ b/frontend/src/pages/WorkflowsPage.tsx
@ -1,9 +1,22 @@
 import { useCallback, useEffect, useState } from "react";
-import Form from "@rjsf/core";
+import Form from "@rjsf/mantine";
 import validator from "@rjsf/validator-ajv8";
 import type { RJSFSchema, UiSchema } from "@rjsf/utils";
+import {
+  Alert,
+  Button,
+  Card,
+  Code,
+  Select,
+  Table,
+  Text,
+  Textarea,
+  Title,
+} from "@mantine/core";
+import { IconAlertCircle, IconPlayerPlay } from "@tabler/icons-react";
 import { ApiError, api, type FlowDefinition, type InputSchema, type Run } from "../api";
 import { useAuth } from "../auth";
+import StatusBadge from "../components/StatusBadge";

 export default function WorkflowsPage() {
  const { me } = useAuth();
@ -70,37 +83,49 @@ export default function WorkflowsPage() {

  return (
    <div>
-      <h2>Workflows</h2>
-      {!me && <p>Sie sind nicht angemeldet — Läufe nutzen den Standard-Mandanten.</p>}
-      {error && <p style={{ color: "crimson" }}>{error}</p>}
-      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
-        <select value={flowId} onChange={(e) => setFlowId(e.target.value)}>
-          <option value="">— Flow wählen —</option>
-          {flows.map((f) => (
-            <option key={f.id} value={f.id}>
-              {f.name}
-            </option>
-          ))}
-        </select>
-      </div>
+      <Title order={2} mb="md">
+        Workflows
+      </Title>
+      {!me && (
+        <Alert color="blue" mb="md">
+          Sie sind nicht angemeldet — Läufe nutzen den Standard-Mandanten.
+        </Alert>
+      )}
+      {error && (
+        <Alert color="red" icon={<IconAlertCircle size={18} />} mb="md">
+          {error}
+        </Alert>
+      )}
+      <Select
+        label="Flow"
+        placeholder="— Flow wählen —"
+        value={flowId}
+        onChange={(v) => setFlowId(v ?? "")}
+        data={flows.map((f) => ({ value: f.id, label: f.name }))}
+        mb="md"
+        maw={480}
+      />
      {schema && schema.fallback && (
-        <div>
-          <textarea
+        <Card withBorder padding="lg" mb="md">
+          <Textarea
+            label="Freitext-Eingabe"
            rows={6}
-            style={{ width: "100%", fontFamily: "monospace" }}
            value={freeText}
            onChange={(e) => setFreeText(e.target.value)}
-            placeholder="Freitext-Eingabe"
+            mb="sm"
          />
-          <button
+          <Button
+            leftSection={<IconPlayerPlay size={16} />}
+            loading={busy}
+            disabled={!flowId}
            onClick={() => void onRun({ text: freeText })}
-            disabled={!flowId || busy}
          >
-            {busy ? "Läuft …" : "Starten"}
-          </button>
-        </div>
+            Starten
+          </Button>
+        </Card>
      )}
      {schema && !schema.fallback && (
+        <Card withBorder padding="lg" mb="md">
          <Form
            schema={schema.json_schema as RJSFSchema}
            uiSchema={schema.ui_schema as UiSchema}
@ -111,27 +136,54 @@ export default function WorkflowsPage() {
            }
            onSubmit={(e) => void onRun(e.formData)}
          >
-          <button type="submit" disabled={busy}>
-            {busy ? "Läuft …" : "Starten"}
-          </button>
+            <Button
+              type="submit"
+              leftSection={<IconPlayerPlay size={16} />}
+              loading={busy}
+              mt="sm"
+            >
+              Starten
+            </Button>
          </Form>
+        </Card>
      )}
      {result && (
-        <div>
-          <h3>Ergebnis</h3>
-          <pre style={{ whiteSpace: "pre-wrap" }}>{result}</pre>
-        </div>
+        <Card withBorder padding="lg" mb="md">
+          <Title order={3} mb="xs">
+            Ergebnis
+          </Title>
+          <Code block>{result}</Code>
+        </Card>
      )}
-      <h3>Letzte Läufe</h3>
-      {runs.length === 0 && <p>Noch keine Läufe.</p>}
-      <ul>
+      <Title order={3} mb="xs">
+        Letzte Läufe
+      </Title>
+      {runs.length === 0 ? (
+        <Text c="dimmed">Noch keine Läufe.</Text>
+      ) : (
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>Mandant</Table.Th>
+              <Table.Th>Ergebnis</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
            {runs.map((r) => (
-          <li key={r.id}>
-            <strong>{r.status}</strong> · {r.tenant_id} ·{" "}
-            <code>{r.output?.result ?? r.output?.error ?? "–"}</code>
-          </li>
+              <Table.Tr key={r.id}>
+                <Table.Td>
+                  <StatusBadge status={r.status} />
+                </Table.Td>
+                <Table.Td>{r.tenant_id}</Table.Td>
+                <Table.Td>
+                  <Code>{r.output?.result ?? r.output?.error ?? "–"}</Code>
+                </Table.Td>
+              </Table.Tr>
            ))}
-      </ul>
+          </Table.Tbody>
+        </Table>
+      )}
    </div>
  );
 }
--- a/frontend/src/theme.ts
+++ b/frontend/src/theme.ts
@ -0,0 +1,54 @@
+import {
+  createTheme,
+  localStorageColorSchemeManager,
+  type MantineColorSchemeManager,
+} from "@mantine/core";
+
+/* Calm-traditional direction: deep kirchenblau primary, warm paper
+ * neutrals in light mode, deep slate in dark mode. System font stacks
+ * only — no external requests (privacy). Serif display for headings. */
+
+const kirchenblau: [
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+] = [
+  "#eef4fb",
+  "#d9e6f5",
+  "#b3cbe9",
+  "#84add9",
+  "#548bc6",
+  "#356fae",
+  "#245a93",
+  "#1d4a79",
+  "#1a3f65",
+  "#162f4c",
+];
+
+export const colorSchemeManager: MantineColorSchemeManager =
+  localStorageColorSchemeManager({ key: "kirche-color-scheme" });
+
+export const theme = createTheme({
+  primaryColor: "kirchenblau",
+  colors: { kirchenblau },
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  headings: {
+    fontFamily:
+      'Georgia, "Times New Roman", "Noto Serif", serif',
+  },
+  defaultRadius: "md",
+  focusRing: "auto",
+  components: {
+    Container: {
+      defaultProps: { size: 960 },
+    },
+  },
+});