diff --git a/app/globals.css b/app/globals.css
index a6c1aa7..226c508 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,132 +1,304 @@
 @import "tailwindcss";
 
-/* @plugin "tailwindcss-animate"; */
-
 @custom-variant dark (&:where(.dark, .dark *));
 
 :root {
-  /* --- Light Mode (Indigo/Slate) --- */
-  --background: #ffffff;
-  --foreground: #0f172a; /* Slate 900 */
-
-  --card: #ffffff;
-  --card-foreground: #0f172a;
-
-  --popover: #ffffff;
-  --popover-foreground: #0f172a;
-
-  /* Indigo 600 */
-  --primary: #4f46e5;
+  color-scheme: light;
+  --background: #f2f5f9;
+  --foreground: #172033;
+  --card: rgba(255, 255, 255, 0.72);
+  --card-strong: rgba(255, 255, 255, 0.92);
+  --card-foreground: #172033;
+  --popover: #fbfcff;
+  --popover-foreground: #172033;
+  --primary: #3568e8;
+  --primary-strong: #2454ca;
   --primary-foreground: #ffffff;
-
-  /* Slate 100 */
-  --secondary: #f1f5f9;
-  --secondary-foreground: #0f172a;
-
-  /* Slate 100 */
-  --muted: #f1f5f9;
-  --muted-foreground: #64748b; /* Slate 500 */
-
-  /* Slate 100 */
-  --accent: #f1f5f9;
-  --accent-foreground: #0f172a;
-
-  /* Red 500 */
-  --destructive: #ef4444;
+  --secondary: rgba(255, 255, 255, 0.58);
+  --secondary-foreground: #344158;
+  --muted: rgba(231, 236, 244, 0.72);
+  --muted-foreground: #68758a;
+  --accent: rgba(222, 232, 255, 0.76);
+  --accent-foreground: #2454ca;
+  --destructive: #d13f45;
   --destructive-foreground: #ffffff;
-
-  /* Slate 200 */
-  --border: #e2e8f0;
-  --input: #e2e8f0;
-  
-  /* Indigo 600 */
-  --ring: #4f46e5;
-
-  --radius: 0.5rem;
+  --destructive-soft: rgba(254, 226, 226, 0.76);
+  --success: #16845b;
+  --success-soft: rgba(209, 250, 229, 0.72);
+  --warning: #a75f08;
+  --warning-soft: rgba(254, 243, 199, 0.76);
+  --border: rgba(103, 120, 145, 0.16);
+  --border-strong: rgba(103, 120, 145, 0.26);
+  --input: rgba(255, 255, 255, 0.68);
+  --ring: rgba(53, 104, 232, 0.24);
+  --glass-border: rgba(255, 255, 255, 0.76);
+  --glass-highlight: rgba(255, 255, 255, 0.82);
+  --glass-shadow: rgba(33, 48, 76, 0.09);
+  --primary-glow: rgba(128, 171, 255, 0.24);
+  --secondary-glow: rgba(182, 225, 215, 0.2);
+  --radius-control: 0.75rem;
+  --radius-card: 1.5rem;
 }
 
-/* Dark Mode Override */
 .dark {
-  /* --- Dark Mode (Real Black Base) --- */
-  --background: #000000;
-  --foreground: #ededed;
-
-  --card: #000000;
-  --card-foreground: #ededed;
-
-  --popover: #000000;
-  --popover-foreground: #ededed;
-
-  /* Indigo 400 */
-  --primary: #818cf8;
-  --primary-foreground: #ffffff;
-
-  /* Zinc 900 */
-  --secondary: #18181b;
-  --secondary-foreground: #ededed;
-
-  /* Zinc 900 */
-  --muted: #18181b;
-  --muted-foreground: #a1a1aa; /* Zinc 400 */
-
-  /* Zinc 900 */
-  --accent: #18181b;
-  --accent-foreground: #ededed;
-
-  /* Red 900 */
-  --destructive: #7f1d1d;
-  --destructive-foreground: #ededed;
-
-  /* Zinc 800 */
-  --border: #27272a;
-  --input: #27272a;
-  
-  /* Indigo 500 */
-  --ring: #6366f1;
+  color-scheme: dark;
+  --background: #0b111c;
+  --foreground: #e8edf5;
+  --card: rgba(22, 31, 45, 0.76);
+  --card-strong: rgba(27, 38, 54, 0.94);
+  --card-foreground: #e8edf5;
+  --popover: #192333;
+  --popover-foreground: #e8edf5;
+  --primary: #7da2ff;
+  --primary-strong: #a7beff;
+  --primary-foreground: #0d1b36;
+  --secondary: rgba(30, 42, 59, 0.72);
+  --secondary-foreground: #dbe4f2;
+  --muted: rgba(30, 42, 59, 0.66);
+  --muted-foreground: #9baac0;
+  --accent: rgba(63, 91, 153, 0.34);
+  --accent-foreground: #b9ccff;
+  --destructive: #ff8589;
+  --destructive-foreground: #34070a;
+  --destructive-soft: rgba(127, 29, 29, 0.34);
+  --success: #71d5aa;
+  --success-soft: rgba(6, 78, 59, 0.35);
+  --warning: #f0b85c;
+  --warning-soft: rgba(120, 53, 15, 0.32);
+  --border: rgba(151, 169, 195, 0.18);
+  --border-strong: rgba(151, 169, 195, 0.3);
+  --input: rgba(12, 20, 32, 0.56);
+  --ring: rgba(125, 162, 255, 0.28);
+  --glass-border: rgba(170, 190, 220, 0.15);
+  --glass-highlight: rgba(255, 255, 255, 0.06);
+  --glass-shadow: rgba(0, 0, 0, 0.34);
+  --primary-glow: rgba(48, 91, 180, 0.2);
+  --secondary-glow: rgba(38, 116, 103, 0.13);
 }
 
-/* Map CSS variables to Tailwind Utility Classes */
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
-  
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
-  
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
-  
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
-  
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
-  
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
-  
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
-  
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-  
-  /* Fonts (Optional/Example) */
-  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
-  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
+  --radius-lg: var(--radius-control);
+  --radius-md: calc(var(--radius-control) - 0.125rem);
+  --radius-sm: calc(var(--radius-control) - 0.25rem);
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", monospace;
 }
 
-/* Base styles */
-body {
+* {
+  border-color: var(--border);
+}
+
+html {
+  min-width: 20rem;
+  scroll-behavior: smooth;
   background: var(--background);
+  font: 100%/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-optical-sizing: auto;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--foreground);
+  background:
+    radial-gradient(circle at 8% -4%, var(--primary-glow), transparent 31rem),
+    radial-gradient(circle at 92% 4%, var(--secondary-glow), transparent 29rem),
+    var(--background);
+  background-attachment: fixed;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  transition: color 220ms ease, background-color 220ms ease;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button:not(:disabled),
+[role="button"]:not([aria-disabled="true"]) {
+  cursor: pointer;
+}
+
+::selection {
+  color: var(--foreground);
+  background: var(--accent);
+}
+
+.glass-surface {
+  border: 1px solid var(--glass-border);
+  background: var(--card);
+  box-shadow:
+    inset 0 1px 0 var(--glass-highlight),
+    0 20px 60px var(--glass-shadow);
+  backdrop-filter: blur(24px) saturate(150%);
+  -webkit-backdrop-filter: blur(24px) saturate(150%);
+}
+
+.glass-popover {
+  border: 1px solid var(--glass-border);
+  background: var(--popover);
+  box-shadow:
+    inset 0 1px 0 var(--glass-highlight),
+    0 18px 48px var(--glass-shadow);
+  backdrop-filter: blur(28px) saturate(160%);
+  -webkit-backdrop-filter: blur(28px) saturate(160%);
+}
+
+.control-surface {
+  border: 1px solid var(--border);
+  background: var(--input);
+  box-shadow: 0 1px 2px rgba(22, 32, 51, 0.04);
+}
+
+.focus-ring:focus-visible,
+.ui-input:focus-visible,
+.ui-button:focus-visible {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 4px var(--ring);
+}
+
+.ui-input {
+  min-height: 2.75rem;
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--input);
   color: var(--foreground);
-  font-family: var(--font-sans);
-}
\ No newline at end of file
+  padding: 0.625rem 0.75rem;
+  box-shadow: 0 1px 2px rgba(22, 32, 51, 0.04);
+  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
+}
+
+.ui-input::placeholder {
+  color: var(--muted-foreground);
+}
+
+.ui-input:focus {
+  border-color: var(--primary);
+  background: var(--card-strong);
+  outline: none;
+  box-shadow: 0 0 0 4px var(--ring);
+}
+
+.ui-button {
+  min-height: 2.5rem;
+  border-radius: var(--radius-control);
+  font-size: 0.875rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  transition: transform 100ms ease-out, color 140ms ease, background-color 140ms ease,
+    border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ui-button:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+.ui-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  box-shadow: none;
+}
+
+.materialize {
+  animation: materialize 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  transform-origin: var(--material-origin, center top);
+}
+
+@keyframes materialize {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem) scale(0.98);
+    filter: blur(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+.subtle-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .ui-button:active:not(:disabled) {
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .glass-surface,
+  .glass-popover {
+    background: var(--card-strong);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+@media (prefers-contrast: more) {
+  .glass-surface,
+  .glass-popover,
+  .control-surface,
+  .ui-input {
+    border-color: currentColor;
+    background: var(--card-strong);
+  }
+}
+
+@media print {
+  @page {
+    size: landscape;
+    margin: 10mm;
+  }
+
+  body {
+    color: #111827;
+    background: #ffffff;
+  }
+
+  .print\:hidden {
+    display: none !important;
+  }
+
+  .glass-surface {
+    border: 0;
+    background: #ffffff;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index e362350..b62b37f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,22 +1,11 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { DialogProvider } from "@/components/DialogProvider";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "FSR Protokoll Editor",
+  description: "Sitzungsprotokolle gemeinsam, strukturiert und sicher erfassen.",
 };
 
 export default function RootLayout({
@@ -26,9 +15,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
diff --git a/components/CommandArgumentForm.tsx b/components/CommandArgumentForm.tsx
index aa084fe..bab4012 100644
--- a/components/CommandArgumentForm.tsx
+++ b/components/CommandArgumentForm.tsx
@@ -13,6 +13,7 @@ import type {
   ScalarCommandArgumentSchema,
 } from "@/common/sessionCommands";
 import { CommandArgumentListInput } from "@/components/CommandArgumentListInput";
+import { Badge, Button, FieldLabel } from "@/components/ui/Primitives";
 
 type Props = {
   command: RegisteredSessionCommand;
@@ -20,8 +21,7 @@ type Props = {
   onCancel: () => void;
 };
 
-const fieldClassName =
-  "w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:border-border dark:bg-zinc-950 dark:text-foreground dark:placeholder:text-muted-foreground dark:focus:border-primary dark:focus:ring-indigo-950";
+const fieldClassName = "ui-input text-sm";
 
 export function CommandArgumentForm({ command, onSubmit, onCancel }: Props) {
   const initialState = useMemo(() => createInitialFormState(command), [command]);
@@ -53,12 +53,10 @@ export function CommandArgumentForm({ command, onSubmit, onCancel }: Props) {
   const firstFocusableArgumentName = command.arguments[0]?.name ?? null;
 
   return (
-    <form onSubmit={submit} className="space-y-4">
-      <div>
-        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
-          /{command.name}
-        </p>
-        <p className="text-sm text-slate-500 dark:text-muted-foreground">
+    <form onSubmit={submit} className="space-y-5">
+      <div className="rounded-xl bg-accent p-4">
+        <Badge tone="accent">/{command.name}</Badge>
+        <p className="mt-2 text-sm leading-relaxed text-accent-foreground">
           {command.description}
         </p>
       </div>
@@ -70,11 +68,9 @@ export function CommandArgumentForm({ command, onSubmit, onCancel }: Props) {
 
             return (
               <div key={argument.name} className="block space-y-1.5">
-                <span className="text-sm font-medium text-slate-700 dark:text-slate-200">
-                  {argument.label}
-                </span>
+                <FieldLabel>{argument.label}</FieldLabel>
                 {argument.description && (
-                  <span className="block text-xs text-slate-500 dark:text-muted-foreground">
+                  <span className="block text-xs leading-relaxed text-muted-foreground">
                     {argument.description}
                   </span>
                 )}
@@ -131,19 +127,19 @@ export function CommandArgumentForm({ command, onSubmit, onCancel }: Props) {
       </div>
 
       <div className="flex justify-end gap-2 pt-2">
-        <button
+        <Button
           type="button"
           onClick={onCancel}
-          className="rounded-md px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-zinc-800"
+          variant="quiet"
         >
           Abbrechen
-        </button>
-        <button
+        </Button>
+        <Button
           type="submit"
-          className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:bg-primary dark:text-primary-foreground dark:hover:bg-indigo-400"
+          variant="primary"
         >
           Einfügen
-        </button>
+        </Button>
       </div>
     </form>
   );
@@ -164,11 +160,9 @@ function ScalarField({
 }) {
   return (
     <label className="block space-y-1.5">
-      <span className="text-sm font-medium text-slate-700 dark:text-slate-200">
-        {schema.label}
-      </span>
+      <FieldLabel className="mb-0">{schema.label}</FieldLabel>
       {schema.description && (
-        <span className="block text-xs text-slate-500 dark:text-muted-foreground">
+        <span className="block text-xs leading-relaxed text-muted-foreground">
           {schema.description}
         </span>
       )}
@@ -195,7 +189,7 @@ function ScalarField({
           className={fieldClassName}
         />
       )}
-      {error && <span className="text-xs text-red-500">{error}</span>}
+      {error && <span className="text-xs font-medium text-destructive" role="alert">{error}</span>}
     </label>
   );
 }
diff --git a/components/CommandArgumentListInput.tsx b/components/CommandArgumentListInput.tsx
index 4785281..9fc83ad 100644
--- a/components/CommandArgumentListInput.tsx
+++ b/components/CommandArgumentListInput.tsx
@@ -8,9 +8,9 @@ import {
   listErrorKey,
   type CommandArgumentFormErrors,
 } from "@/common/commandArguments";
+import { Button, FieldLabel } from "@/components/ui/Primitives";
 
-const fieldClassName =
-  "w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:border-border dark:bg-zinc-950 dark:text-foreground dark:placeholder:text-muted-foreground dark:focus:border-primary dark:focus:ring-indigo-950";
+const fieldClassName = "ui-input text-sm";
 
 type Props = {
   schema: ListCommandArgumentSchema;
@@ -62,27 +62,29 @@ export function CommandArgumentListInput({
   return (
     <div className="space-y-3">
       {errors[schema.name] && (
-        <span className="text-xs text-red-500">{errors[schema.name]}</span>
+        <span className="text-xs font-medium text-destructive" role="alert">{errors[schema.name]}</span>
       )}
 
       {items.map((item, itemIndex) => (
         <div
           key={itemIndex}
-          className="rounded-md border border-slate-200 p-3 dark:border-border"
+          className="rounded-xl border border-border bg-[color:var(--muted)]/35 p-3"
         >
           <div className="mb-2 flex items-center justify-between gap-2">
-            <span className="text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-muted-foreground">
+            <span className="text-[0.6875rem] font-bold uppercase tracking-[0.1em] text-muted-foreground">
               {itemLabel} {itemIndex + 1}
             </span>
             {canRemove && (
-              <button
+              <Button
                 type="button"
                 onClick={() => removeItem(itemIndex)}
-                className="text-slate-400 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-400"
+                variant="quiet"
+                size="icon"
+                className="h-8 min-h-8 w-8 text-muted-foreground hover:bg-[var(--destructive-soft)] hover:text-destructive"
                 aria-label={`${itemLabel} entfernen`}
               >
                 <Trash2 size={14} />
-              </button>
+              </Button>
             )}
           </div>
 
@@ -106,14 +108,16 @@ export function CommandArgumentListInput({
       ))}
 
       {canAdd && (
-        <button
+        <Button
           type="button"
           onClick={addItem}
-          className="flex items-center gap-1 text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
+          variant="quiet"
+          size="sm"
+          className="text-primary"
         >
           <Plus size={14} />
           {addLabel}
-        </button>
+        </Button>
       )}
     </div>
   );
@@ -134,9 +138,7 @@ function ListField({
 }) {
   return (
     <label className="block space-y-1">
-      <span className="text-xs font-medium text-slate-600 dark:text-slate-300">
-        {field.label}
-      </span>
+      <FieldLabel className="mb-0 text-xs">{field.label}</FieldLabel>
       <input
         ref={inputRef}
         type={getListFieldInputType(field)}
@@ -145,7 +147,7 @@ function ListField({
         placeholder={field.placeholder}
         className={fieldClassName}
       />
-      {error && <span className="text-xs text-red-500">{error}</span>}
+      {error && <span className="text-xs font-medium text-destructive" role="alert">{error}</span>}
     </label>
   );
 }
diff --git a/components/CommandSuggestions.tsx b/components/CommandSuggestions.tsx
index 34154f8..bd19f66 100644
--- a/components/CommandSuggestions.tsx
+++ b/components/CommandSuggestions.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { createPortal } from "react-dom";
 import { Terminal } from "lucide-react";
 import type { RegisteredSessionCommand } from "@/common/sessionCommands";
 
@@ -25,16 +26,16 @@ export function CommandSuggestions({
 }: Props) {
   if (!isOpen || commands.length === 0) return null;
 
-  return (
+  const palette = (
     <div
       ref={containerRef}
       style={{ position, ...style }}
       className={
         className ??
-        "bg-white dark:bg-zinc-900 border border-slate-200 dark:border-border rounded-lg shadow-lg z-20"
+        "glass-popover materialize z-20 rounded-xl p-1"
       }
     >
-      <div className="py-1">
+      <div>
         {commands.map((command, index) => {
           const isActive = index === activeIndex;
           return (
@@ -45,18 +46,18 @@ export function CommandSuggestions({
                 event.preventDefault();
                 onPick(command);
               }}
-              className={`w-full px-3 py-2 text-left flex items-start gap-3 transition-colors ${
+              className={`focus-ring flex min-h-12 w-full items-start gap-3 rounded-lg px-3 py-2 text-left transition-colors ${
                 isActive
-                  ? "bg-indigo-50 dark:bg-indigo-950/40 text-indigo-700 dark:text-indigo-200"
-                  : "text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-zinc-800"
+                  ? "bg-accent text-accent-foreground"
+                  : "text-secondary-foreground hover:bg-muted"
               }`}
             >
-              <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500 dark:bg-zinc-800 dark:text-zinc-300">
+              <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                 <Terminal size={14} />
               </span>
               <span className="min-w-0 flex-1">
                 <span className="block text-sm font-medium">/{command.name}</span>
-                <span className="block text-xs text-slate-500 dark:text-muted-foreground">
+                <span className="block text-xs text-muted-foreground">
                   {command.description}
                 </span>
               </span>
@@ -66,4 +67,10 @@ export function CommandSuggestions({
       </div>
     </div>
   );
+
+  if (position === "fixed" && typeof document !== "undefined") {
+    return createPortal(palette, document.body);
+  }
+
+  return palette;
 }
diff --git a/components/DialogProvider.tsx b/components/DialogProvider.tsx
index aa9f92e..a06e3b6 100644
--- a/components/DialogProvider.tsx
+++ b/components/DialogProvider.tsx
@@ -2,6 +2,7 @@
 
 import React, { createContext, useContext, useState, useCallback } from "react";
 import { Modal } from "@/components/Modal";
+import { Button } from "@/components/ui/Primitives";
 
 type DialogType = "alert" | "confirm" | "prompt";
 
@@ -143,7 +144,7 @@ export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
           width="sm"
         >
           <div className="space-y-4">
-            <p className="text-slate-600 dark:text-slate-300">
+            <p className="text-sm leading-relaxed text-secondary-foreground">
               {dialog.message}
             </p>
 
@@ -151,7 +152,7 @@ export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
               <input
                 type={(dialog.options as DialogOptionsPrompt).hiddenInput ? "password" : "text"}
                 autoFocus
-                className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 rounded-md bg-white dark:bg-slate-950 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                className="ui-input"
                 value={inputValue}
                 onChange={(e) => setInputValue(e.target.value)}
                 onKeyDown={handleKeyDown}
@@ -161,23 +162,19 @@ export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
 
             <div className="flex justify-end gap-2 pt-2">
               {dialog.type !== "alert" && (
-                <button
+                <Button
                   onClick={handleClose}
-                  className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-md transition-colors"
+                  variant="quiet"
                 >
                   {dialog.options.cancelText}
-                </button>
+                </Button>
               )}
-              <button
+              <Button
                 onClick={handleConfirm}
-                className={`px-4 py-2 text-sm font-medium text-white rounded-md shadow-sm transition-colors ${
-                  dialog.options.destructive
-                    ? "bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700"
-                    : "bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-500"
-                }`}
+                variant={dialog.options.destructive ? "destructive" : "primary"}
               >
                 {dialog.options.confirmText}
-              </button>
+              </Button>
             </div>
           </div>
         </Modal>
diff --git a/components/Header.tsx b/components/Header.tsx
index 5a43816..32ff29e 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,6 +1,14 @@
 import React from "react";
-import { FileText, Clipboard, Upload, Save, RotateCcw, Send } from "lucide-react";
+import {
+  Clipboard,
+  Download,
+  FileText,
+  RotateCcw,
+  Send,
+  Upload,
+} from "lucide-react";
 import { ThemeToggle } from "./ThemeToggle";
+import { Button } from "@/components/ui/Primitives";
 
 interface HeaderProps {
   handlePasteFromClipboard: () => void;
@@ -22,32 +30,43 @@ export const Header = ({
   resetProtocol,
 }: HeaderProps) => {
   return (
-    <header className="bg-white dark:bg-background border-b border-slate-200 dark:border-border sticky top-0 z-10 transition-colors">
-      <div className="max-w-5xl mx-auto px-6 py-4 flex justify-between items-center">
-        <div className="flex items-center gap-2">
-          <div className="bg-indigo-600 dark:bg-indigo-500 p-2 rounded-lg text-white">
-            <FileText size={20} />
+    <header className="print:hidden sticky top-0 z-40 border-b border-[var(--glass-border)] bg-[color:var(--card)]/90 backdrop-blur-2xl backdrop-saturate-150">
+      <div className="mx-auto flex max-w-[1640px] flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:px-8">
+        <div className="flex min-w-0 items-center gap-3">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-[0_8px_22px_rgba(53,104,232,.25)]">
+            <FileText size={19} strokeWidth={2.2} />
+          </div>
+          <div className="min-w-0">
+            <p className="text-[0.625rem] font-bold uppercase tracking-[0.14em] text-primary">
+              FSR Informatik
+            </p>
+            <h1 className="truncate text-base font-bold leading-tight tracking-[-0.025em] text-foreground sm:text-lg">
+              Protokoll Editor
+            </h1>
           </div>
-          <h1 className="text-xl font-bold text-slate-800 dark:text-foreground">
-            FSR Protokoll Editor
-          </h1>
         </div>
-        <div className="flex gap-2">
+
+        <div className="flex max-w-full items-center gap-1.5 overflow-x-auto py-0.5 subtle-scrollbar">
           <ThemeToggle />
-          <button
+          <Button
             onClick={resetProtocol}
-            className="flex items-center gap-2 px-4 py-2 text-md font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 border border-transparent rounded-lg transition-colors"
+            variant="quiet"
+            size="icon"
+            aria-label="Protokoll zurücksetzen"
             title="Protokoll zurücksetzen"
+            className="text-destructive hover:bg-[var(--destructive-soft)] hover:text-destructive"
           >
-            <RotateCcw size={16} /> <span className="hidden sm:inline">Reset</span>
-          </button>
-          <button
+            <RotateCcw size={17} />
+          </Button>
+          <Button
             onClick={handlePasteFromClipboard}
-            className="flex items-center gap-2 px-4 py-2 text-md font-medium text-slate-600 dark:text-gray-300 bg-white dark:bg-zinc-900 border border-slate-200 dark:border-border hover:bg-slate-50 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+            variant="secondary"
+            size="sm"
+            title="Aus der Zwischenablage einfügen"
           >
-            <Clipboard size={16} />{" "}
-            <span className="hidden sm:inline">Clipboard</span>
-          </button>
+            <Clipboard size={16} />
+            <span className="hidden md:inline">Einfügen</span>
+          </Button>
           <input
             type="file"
             accept=".yaml,.yml"
@@ -55,25 +74,33 @@ export const Header = ({
             className="hidden"
             onChange={handleFileUpload}
           />
-          <button
+          <Button
             onClick={handleImportFileClick}
-            className="flex items-center gap-2 px-4 py-2 text-md font-medium text-slate-600 dark:text-gray-300 bg-slate-100 dark:bg-zinc-900 hover:bg-slate-200 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+            variant="secondary"
+            size="sm"
+            title="YAML-Datei importieren"
           >
-            <Upload size={16} /> <span className="hidden sm:inline">Import</span>
-          </button>
-          <button
+            <Upload size={16} />
+            <span className="hidden sm:inline">Import</span>
+          </Button>
+          <Button
             onClick={handleExport}
-            className="flex items-center gap-2 px-4 py-2 text-md font-medium text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 rounded-lg shadow-sm transition-colors"
+            variant="secondary"
+            size="sm"
+            title="Als YAML-Datei exportieren"
           >
-            <Save size={16} /> <span className="hidden sm:inline">Export</span>
-          </button>
-          <button
+            <Download size={16} />
+            <span className="hidden sm:inline">Export</span>
+          </Button>
+          <Button
             onClick={handleSendToDiscord}
-            className="flex items-center gap-2 px-4 py-2 text-md font-medium text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 rounded-lg shadow-sm transition-colors"
-            title="An Discord senden"
+            variant="primary"
+            size="sm"
+            title="Protokoll an Discord senden"
           >
-            <Send size={16} /> <span className="hidden sm:inline">Discord</span>
-          </button>
+            <Send size={16} />
+            <span className="hidden sm:inline">An Discord</span>
+          </Button>
         </div>
       </div>
     </header>
diff --git a/components/MemberSuggestionDropdown.tsx b/components/MemberSuggestionDropdown.tsx
index a490ce7..7e98b84 100644
--- a/components/MemberSuggestionDropdown.tsx
+++ b/components/MemberSuggestionDropdown.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { createPortal } from "react-dom";
 import { Member } from "@/common/types";
 import { MemberSuggestionList } from "@/components/MemberSuggestionList";
 
@@ -27,13 +28,13 @@ export function MemberSuggestionDropdown({
 }: Props) {
   if (!isOpen || members.length === 0) return null;
 
-  return (
+  const dropdown = (
     <div
       ref={containerRef}
       style={{ position, ...style }}
       className={
         className ??
-        "bg-white dark:bg-zinc-900 border border-slate-200 dark:border-border rounded-lg shadow-lg z-20"
+        "glass-popover materialize z-20 rounded-xl p-1"
       }
     >
       <MemberSuggestionList
@@ -44,4 +45,10 @@ export function MemberSuggestionDropdown({
       />
     </div>
   );
+
+  if (position === "fixed" && typeof document !== "undefined") {
+    return createPortal(dropdown, document.body);
+  }
+
+  return dropdown;
 }
diff --git a/components/MemberSuggestionList.tsx b/components/MemberSuggestionList.tsx
index d16a9dc..842191d 100644
--- a/components/MemberSuggestionList.tsx
+++ b/components/MemberSuggestionList.tsx
@@ -35,14 +35,14 @@ export function MemberSuggestionList({
             e.preventDefault();
             onPick(member);
           }}
-          className={`w-full text-left px-3 py-2 text-md text-slate-700 dark:text-foreground hover:bg-indigo-50 dark:hover:bg-zinc-800 flex justify-between items-center ${
-            idx === activeIndex ? "bg-indigo-50 dark:bg-zinc-800" : ""
+          className={`focus-ring flex min-h-11 w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm text-secondary-foreground transition-colors hover:bg-muted ${
+            idx === activeIndex ? "bg-accent text-accent-foreground" : ""
           }`}
         >
           <div className="flex flex-col">
             <span>{member.name}</span>
             {member.aliases && member.aliases.length > 0 && (
-              <span className="text-sm text-slate-400 dark:text-muted-foreground">
+              <span className="text-xs text-muted-foreground">
                 {member.aliases.join(", ")}
               </span>
             )}
diff --git a/components/MetaSection.tsx b/components/MetaSection.tsx
index 756bd2b..e434dd3 100644
--- a/components/MetaSection.tsx
+++ b/components/MetaSection.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { Users, Calendar } from "lucide-react";
+import { CalendarDays, Clock3, MapPin, PenLine, Users } from "lucide-react";
 import { TagInput } from "./TagInput";
 import { Member } from "@/common/types";
+import { Button, Eyebrow, FieldLabel, Surface } from "@/components/ui/Primitives";
 
 interface MetaSectionProps {
   fsrMembers: string[];
@@ -12,16 +13,78 @@ interface MetaSectionProps {
   availableAssocMembers: Member[];
   protocolant: string[];
   setProtocolant: (val: string[]) => void;
-  meta: { Date: string; Start: string; Ende: string; Location: string; Room: string };
-  setMeta: (val: { Date: string; Start: string; Ende: string; Location: string; Room: string }) => void;
+  meta: {
+    Date: string;
+    Start: string;
+    Ende: string;
+    Location: string;
+    Room: string;
+  };
+  setMeta: (val: {
+    Date: string;
+    Start: string;
+    Ende: string;
+    Location: string;
+    Room: string;
+  }) => void;
 }
 
 const getCurrentTimeString = (): string => {
   const now = new Date();
-  const hours = now.getHours().toString().padStart(2, "0");
-  const minutes = now.getMinutes().toString().padStart(2, "0");
-  const seconds = now.getSeconds().toString().padStart(2, "0");
-  return `${hours}:${minutes}:${seconds}`;
+  return [now.getHours(), now.getMinutes(), now.getSeconds()]
+    .map((part) => part.toString().padStart(2, "0"))
+    .join(":");
+};
+
+function PanelTitle({
+  icon,
+  title,
+  description,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="mb-5 flex items-start gap-3">
+      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent text-accent-foreground">
+        {icon}
+      </div>
+      <div>
+        <h2 className="font-bold leading-tight tracking-[-0.02em] text-foreground">
+          {title}
+        </h2>
+        <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function TextField({
+  label,
+  value,
+  onChange,
+  placeholder,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <label className="block">
+      <FieldLabel>{label}</FieldLabel>
+      <input
+        type="text"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        className="ui-input"
+      />
+    </label>
+  );
 }
 
 export const MetaSection = ({
@@ -37,122 +100,125 @@ export const MetaSection = ({
   setMeta,
 }: MetaSectionProps) => {
   return (
-    <section className="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <div className="bg-white dark:bg-card p-6 rounded-xl shadow-md border border-slate-200 dark:border-border col-span-2 space-y-5 dark:shadow-none">
-        <h2 className="text-md font-semibold text-slate-400 dark:text-muted-foreground uppercase tracking-wider mb-2 flex items-center gap-2">
-          <Users size={16} /> Anwesenheit
+    <section className="space-y-4" aria-labelledby="session-data-heading">
+      <div className="px-1 pb-1">
+        <h2
+          id="session-data-heading"
+          className="mt-1 text-xl font-bold tracking-[-0.03em]"
+        >
+          Sitzungsdaten
         </h2>
-        <TagInput
-          label="FSR Mitglieder (Gewählt)"
-          selected={fsrMembers}
-          setSelected={setFsrMembers}
-          suggestions={availableFsrMembers}
-        />
-        <TagInput
-          label="Weitere Personen (Assoziierte / Gäste)"
-          selected={guests}
-          setSelected={setGuests}
-          suggestions={availableAssocMembers}
-        />
       </div>
-      <div className="bg-white dark:bg-card p-6 rounded-xl shadow-md border border-slate-200 dark:border-border space-y-4 dark:shadow-none">
-        <h2 className="text-md font-semibold text-slate-400 dark:text-muted-foreground uppercase tracking-wider mb-4 flex items-center gap-2">
-          <Calendar size={16} /> Details
-        </h2>
-        <div>
-          <label className="block text-sm font-medium text-slate-500 dark:text-muted-foreground mb-1">
-            Datum
-          </label>
-          <input
-            type="date"
-            value={meta.Date}
-            onChange={(e) => setMeta({ ...meta, Date: e.target.value })}
-            className="w-full p-2 rounded-lg bg-slate-50 dark:bg-zinc-900 text-slate-900 dark:text-foreground border border-slate-200 dark:border-border focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500"
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Surface className="p-5 sm:p-6">
+          <PanelTitle
+            icon={<Users size={17} />}
+            title="Anwesenheit"
+            description="Mitglieder, Gäste und Protokollführung"
           />
-        </div>
-        <div className="grid grid-cols-2 gap-2">
-          <div>
-            <label className="block text-sm font-medium text-slate-500 dark:text-muted-foreground mb-1">
-              Start{" "}
-              <button
-                type="button"
-                className="text-indigo-600 dark:text-primary font-medium hover:text-indigo-800 dark:hover:text-indigo-300"
-                onClick={() =>
-                  setMeta({
-                    ...meta,
-                    Start: getCurrentTimeString(),
-                  })
-                }
-              >
-                jetzt
-              </button>
-            </label>
-            <input
-              type="time"
-              step="1"
-              value={meta.Start}
-              onChange={(e) => {console.log(e.target.value); setMeta({ ...meta, Start: e.target.value })}}
-              className="w-full p-2 rounded-lg bg-slate-50 dark:bg-zinc-900 text-slate-900 dark:text-foreground border border-slate-200 dark:border-border focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500"
+          <div className="space-y-4">
+            <TagInput
+              label="Gewählte Mitglieder"
+              selected={fsrMembers}
+              setSelected={setFsrMembers}
+              suggestions={availableFsrMembers}
             />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-slate-500 dark:text-muted-foreground mb-1">
-              Ende{" "}
-              <button
-                type="button"
-                className="text-indigo-600 dark:text-primary font-medium hover:text-indigo-800 dark:hover:text-indigo-300"
-                onClick={() =>
-                  setMeta({
-                    ...meta,
-                    Ende: getCurrentTimeString(),
-                  })
-                }
-              >
-                jetzt
-              </button>
-            </label>
-            <input
-              type="time"
-              step="1"
-              value={meta.Ende}
-              onChange={(e) => setMeta({ ...meta, Ende: e.target.value })}
-              className="w-full p-2 rounded-lg bg-slate-50 dark:bg-zinc-900 text-slate-900 dark:text-foreground border border-slate-200 dark:border-border focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500"
+            <TagInput
+              label="Assoziierte & Gäste"
+              selected={guests}
+              setSelected={setGuests}
+              suggestions={availableAssocMembers}
+            />
+            <TagInput
+              label="Protokollant:in"
+              selected={protocolant}
+              setSelected={setProtocolant}
+              suggestions={availableFsrMembers}
+              maxSelections={1}
             />
           </div>
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-slate-500 dark:text-muted-foreground mb-1">
-            Protokollant:in
-          </label>
-          <TagInput
-            label=""
-            selected={protocolant}
-            setSelected={setProtocolant}
-            suggestions={availableFsrMembers}
-            maxSelections={1}
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-slate-500 dark:text-muted-foreground mb-1">
-            Ort
-          </label>
-          <input
-            type="text"
-            value={meta.Location || ""}
-            onChange={(e) => setMeta({ ...meta, Location: e.target.value })}
-            className="w-full p-2 rounded-lg bg-slate-50 dark:bg-zinc-900 text-slate-900 dark:text-foreground border border-slate-200 dark:border-border focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500"
-          />
+        </Surface>
 
-          <label className="block text-sm font-medium text-slate-500 dark:text-muted-foreground mb-1">
-            Raum
-          </label>
-          <input
-            type="text"
-            value={meta.Room || ""}
-            onChange={(e) => setMeta({ ...meta, Room: e.target.value })}
-            className="w-full p-2 rounded-lg bg-slate-50 dark:bg-zinc-900 text-slate-900 dark:text-foreground border border-slate-200 dark:border-border focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500"
+        <Surface className="p-5 sm:p-6">
+          <PanelTitle
+            icon={<CalendarDays size={17} />}
+            title="Termin & Ort"
+            description="Zeitliche und räumliche Angaben"
           />
-        </div>
+          <div className="space-y-4">
+            <label className="block">
+              <FieldLabel>Datum</FieldLabel>
+              <input
+                type="date"
+                value={meta.Date}
+                onChange={(event) => setMeta({ ...meta, Date: event.target.value })}
+                className="ui-input font-mono text-sm"
+              />
+            </label>
+
+            <div className="grid grid-cols-2 gap-3">
+              {(["Start", "Ende"] as const).map((field) => (
+                <div className="block" key={field}>
+                  <span className="mb-1.5 flex items-center justify-between gap-2 text-sm font-semibold text-secondary-foreground">
+                    <label
+                      htmlFor={`session-${field.toLowerCase()}`}
+                      className="flex items-center gap-1.5"
+                    >
+                      <Clock3 size={13} />
+                      {field}
+                    </label>
+                    <Button
+                      size="sm"
+                      variant="quiet"
+                      className="min-h-0 px-1 py-0 text-xs text-primary"
+                      onClick={() =>
+                        setMeta({ ...meta, [field]: getCurrentTimeString() })
+                      }
+                    >
+                      jetzt
+                    </Button>
+                  </span>
+                  <input
+                    id={`session-${field.toLowerCase()}`}
+                    type="time"
+                    step={1}
+                    value={meta[field]}
+                    onChange={(event) =>
+                      setMeta({ ...meta, [field]: event.target.value })
+                    }
+                    className="ui-input font-mono text-sm"
+                  />
+                </div>
+              ))}
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-2">
+              <div className="relative">
+                <div className="pointer-events-none absolute right-3 top-[2.55rem] text-muted-foreground">
+                  <MapPin size={15} />
+                </div>
+                <TextField
+                  label="Ort"
+                  value={meta.Location || ""}
+                  onChange={(Location) => setMeta({ ...meta, Location })}
+                  placeholder="z. B. Institut"
+                />
+              </div>
+              <div className="relative">
+                <div className="pointer-events-none absolute right-3 top-[2.55rem] text-muted-foreground">
+                  <PenLine size={15} />
+                </div>
+                <TextField
+                  label="Raum"
+                  value={meta.Room || ""}
+                  onChange={(Room) => setMeta({ ...meta, Room })}
+                  placeholder="z. B. 0.70"
+                />
+              </div>
+            </div>
+          </div>
+        </Surface>
       </div>
     </section>
   );
diff --git a/components/Modal.tsx b/components/Modal.tsx
index 908aad0..dc6bc64 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
 import { X } from "lucide-react";
+import { Button } from "@/components/ui/Primitives";
 
 interface ModalProps {
   isOpen: boolean;
@@ -19,6 +21,7 @@ export const Modal = ({
   width = "md",
 }: ModalProps) => {
   const modalRef = useRef<HTMLDivElement>(null);
+  const titleId = React.useId();
 
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
@@ -26,17 +29,25 @@ export const Modal = ({
     };
 
     if (isOpen) {
+      const previousOverflow = document.body.style.overflow;
+      const previousFocus = document.activeElement as HTMLElement | null;
       document.addEventListener("keydown", handleEscape);
       document.body.style.overflow = "hidden";
+      requestAnimationFrame(() => modalRef.current?.focus());
+
+      return () => {
+        document.removeEventListener("keydown", handleEscape);
+        document.body.style.overflow = previousOverflow;
+        previousFocus?.focus();
+      };
     }
 
     return () => {
       document.removeEventListener("keydown", handleEscape);
-      document.body.style.overflow = "unset";
     };
   }, [isOpen, onClose]);
 
-  if (!isOpen) return null;
+  if (!isOpen || typeof document === "undefined") return null;
 
   const widthClasses = {
     sm: "max-w-sm",
@@ -45,27 +56,38 @@ export const Modal = ({
     xl: "max-w-xl",
   };
 
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm transition-opacity animate-in fade-in duration-200">
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-950/45 p-4 backdrop-blur-sm"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
       <div
         ref={modalRef}
-        className={`bg-white dark:bg-slate-900 rounded-xl shadow-2xl border border-slate-200 dark:border-slate-800 w-full ${widthClasses[width]} transform transition-all animate-in zoom-in-95 duration-200 flex flex-col`}
+        tabIndex={-1}
+        className={`glass-popover materialize flex w-full ${widthClasses[width]} max-h-[calc(100vh-2rem)] flex-col overflow-hidden rounded-[var(--radius-card)] outline-none`}
         role="dialog"
         aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
       >
-        <div className="flex items-center justify-between p-4 border-b border-slate-100 dark:border-slate-800">
-          <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
+        <div className="flex items-center justify-between gap-4 border-b border-border bg-[color:var(--muted)]/40 px-5 py-4">
+          <h3 id={titleId} className="text-lg font-bold tracking-[-0.02em] text-foreground">
             {title}
           </h3>
-          <button
+          <Button
             onClick={onClose}
-            className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors p-1 rounded-md hover:bg-slate-100 dark:hover:bg-slate-800"
+            variant="quiet"
+            size="icon"
+            aria-label="Dialog schließen"
+            className="-mr-2"
           >
-            <X size={20} />
-          </button>
+            <X size={18} />
+          </Button>
         </div>
-        <div className="p-6 overflow-y-auto max-h-[80vh]">{children}</div>
+        <div className="overflow-y-auto p-5 subtle-scrollbar sm:p-6">{children}</div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 };
diff --git a/components/ProtocolEditor.tsx b/components/ProtocolEditor.tsx
index 1ff6a92..bfe7556 100644
--- a/components/ProtocolEditor.tsx
+++ b/components/ProtocolEditor.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Plus } from "lucide-react";
+import { AtSign, FilePlus2, ListChecks, Plus, Terminal } from "lucide-react";
 import {
   DndContext,
   closestCenter,
@@ -19,8 +19,15 @@ import {
 import { useProtocol } from "@/hooks/useProtocol";
 import { Header } from "@/components/Header";
 import { MetaSection } from "@/components/MetaSection";
+import { SessionOutline } from "@/components/SessionOutline";
 import { SortableSessionItem } from "@/components/SortableSessionItem";
 import { Member } from "@/common/types";
+import {
+  Badge,
+  Button,
+  SectionHeading,
+  Surface,
+} from "@/components/ui/Primitives";
 
 interface ProtocolEditorProps {
   availableFsrMembers: Member[];
@@ -78,8 +85,13 @@ export function ProtocolEditor({
     })
   );
 
+  const pointCount = React.useMemo(
+    () => sessionItems.reduce((total, item) => total + item.points.length, 0),
+    [sessionItems]
+  );
+
   return (
-    <div className="min-h-screen bg-slate-50 dark:bg-background text-slate-900 dark:text-foreground font-sans pb-20">
+    <div className="min-h-screen pb-20 text-foreground">
       <Header
         handlePasteFromClipboard={handlePasteFromClipboard}
         fileInputRef={fileInputRef}
@@ -90,7 +102,7 @@ export function ProtocolEditor({
         resetProtocol={resetProtocol}
       />
 
-      <main className="max-w-6xl mx-auto px-6 py-8 space-y-8">
+      <main className="mx-auto max-w-[1640px] px-4 py-5 sm:px-6 sm:py-7 lg:px-8">
         <MetaSection
           fsrMembers={fsrMembers}
           setFsrMembers={setFsrMembers}
@@ -104,55 +116,89 @@ export function ProtocolEditor({
           availableAssocMembers={availableAssocMembers}
         />
 
-        {/* Meeting Content */}
-        <section>
-          <div className="flex justify-between items-end mb-4">
-            <h2 className="text-xl font-bold text-slate-800 dark:text-foreground">
-              Sitzungsinhalte
-            </h2>
-            <button
-              onClick={addTopic}
-              className="flex items-center gap-1 text-sm text-indigo-600 dark:text-primary font-medium hover:text-indigo-800 dark:hover:text-indigo-300"
-            >
-              <Plus size={16} /> Neues Thema
-            </button>
-          </div>
+        <div className="mt-14 grid grid-cols-1 gap-6 lg:grid-cols-[300px_minmax(0,1fr)] lg:gap-8">
+          <SessionOutline sessionItems={sessionItems} />
+
+          <section className="min-w-0">
+            <Surface className="mb-5 overflow-hidden">
+              <div className="flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between sm:p-6">
+                <SectionHeading
+                  eyebrow="Arbeitsbereich"
+                  title="Sitzungsinhalte"
+                  description=""
+                />
+                <Button
+                  onClick={addTopic}
+                  variant="primary"
+                  className="self-start sm:self-auto"
+                >
+                  <Plus size={17} /> Neues Thema
+                </Button>
+              </div>
+              {/* <div className="flex flex-wrap items-center gap-2 border-t border-border bg-[color:var(--muted)]/45 px-5 py-3 sm:px-6">
+                <Badge tone={sessionItems.length ? "accent" : "neutral"}>
+                  <ListChecks size={13} className="mr-1.5" />
+                  {sessionItems.length}{" "}
+                  {sessionItems.length === 1 ? "Thema" : "Themen"}
+                </Badge>
+                <Badge>{pointCount} Punkte</Badge>
+                <span className="ml-auto hidden items-center gap-3 text-xs font-medium text-muted-foreground md:flex">
+                  <span className="flex items-center gap-1">
+                    <AtSign size={13} /> Personen erwähnen
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Terminal size={13} /> Befehle einfügen
+                  </span>
+                </span>
+              </div> */}
+            </Surface>
 
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-          >
-            <div className="space-y-6">
-              <SortableContext
-                items={sessionItems.map((item) => item.id)}
-                strategy={verticalListSortingStrategy}
-              >
-                {sessionItems.map((item) => (
-                  <SortableSessionItem
-                    key={item.id}
-                    item={item}
-                    memberSuggestions={memberSuggestions}
-                    updateTopicTitle={updateTopicTitle}
-                    removeTopic={removeTopic}
-                    addPoint={addPoint}
-                    updatePoint={updatePoint}
-                    removePoint={removePoint}
-                  />
-                ))}
-              </SortableContext>
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={handleDragEnd}
+            >
+              <div className="space-y-4" aria-live="polite">
+                <SortableContext
+                  items={sessionItems.map((item) => item.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  {sessionItems.map((item, index) => (
+                    <SortableSessionItem
+                      key={item.id}
+                      item={item}
+                      position={index + 1}
+                      memberSuggestions={memberSuggestions}
+                      updateTopicTitle={updateTopicTitle}
+                      removeTopic={removeTopic}
+                      addPoint={addPoint}
+                      updatePoint={updatePoint}
+                      removePoint={removePoint}
+                    />
+                  ))}
+                </SortableContext>
 
-              {sessionItems.length === 0 && (
-                <div className="text-center py-12 bg-slate-50 dark:bg-zinc-900/50 rounded-xl border-2 border-dashed border-slate-200 dark:border-border text-slate-400 dark:text-muted-foreground">
-                  <p>
-                    Keine Themen vorhanden. Füge ein Thema hinzu oder importiere
-                    ein Protokoll.
-                  </p>
-                </div>
-              )}
-            </div>
-          </DndContext>
-        </section>
+                {sessionItems.length === 0 && (
+                  <Surface className="border-dashed p-8 text-center sm:p-14">
+                    <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-[1.35rem] bg-accent text-accent-foreground">
+                      <FilePlus2 size={28} strokeWidth={1.8} />
+                    </div>
+                    <h3 className="mt-5 text-lg font-bold tracking-[-0.02em]">
+                      Bereit für die Sitzung
+                    </h3>
+                    <p className="mx-auto mt-1.5 max-w-md text-sm leading-relaxed text-muted-foreground">
+                      Lege das erste Thema an oder importiere ein vorhandenes
+                      YAML-Protokoll über die Werkzeugleiste.
+                    </p>
+                    <Button onClick={addTopic} variant="primary" className="mt-5">
+                      <Plus size={17} /> Erstes Thema anlegen
+                    </Button>
+                  </Surface>
+                )}
+              </div>
+            </DndContext>
+          </section>
+        </div>
       </main>
     </div>
   );
diff --git a/components/SessionOutline.tsx b/components/SessionOutline.tsx
new file mode 100644
index 0000000..26825be
--- /dev/null
+++ b/components/SessionOutline.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import { FileText, ListTree } from "lucide-react";
+
+import { SessionItem } from "@/common/types";
+import { Badge, Eyebrow, Surface } from "@/components/ui/Primitives";
+
+interface SessionOutlineProps {
+  sessionItems: SessionItem[];
+}
+
+const SHOULD_SHOW_POINT_LABELS = false;
+
+const getPointLabel = (point: string, index: number) => {
+  const label = point.trim().replace(/\s+/g, " ");
+  return label || `Punkt ${index + 1}`;
+};
+
+export function SessionOutline({ sessionItems }: SessionOutlineProps) {
+  return (
+    <Surface
+      as="aside"
+      className="hidden overflow-hidden lg:sticky lg:top-[5.75rem] lg:block lg:max-h-[calc(100vh-7.25rem)] lg:self-start"
+    >
+      <div className="border-b border-border p-5">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <Eyebrow>Navigation</Eyebrow>
+            <h2 className="mt-1 flex items-center gap-2 text-lg font-bold tracking-[-0.025em]">
+              <ListTree size={19} className="text-primary" />
+              Gliederung
+            </h2>
+          </div>
+          {/* <Badge tone={sessionItems.length ? "accent" : "neutral"}>
+            {sessionItems.length}
+          </Badge> */}
+        </div>
+      </div>
+
+      <nav
+        aria-label="Gliederung der Sitzungsinhalte"
+        className="subtle-scrollbar overflow-y-auto p-3 lg:max-h-[calc(100vh-15rem)]"
+      >
+        {sessionItems.length > 0 ? (
+          <ol className="space-y-1">
+            {sessionItems.map((item, topicIndex) => (
+              <li key={item.id}>
+                <a
+                  href={`#session-topic-${item.id}`}
+                  className="focus-ring group flex min-w-0 items-center gap-2 rounded-xl px-3 py-2 text-sm font-semibold text-secondary-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                >
+                  <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-muted font-mono text-[0.6875rem] text-muted-foreground group-hover:bg-[var(--card-strong)] group-hover:text-primary">
+                    {topicIndex + 1}
+                  </span>
+                  <span className="truncate">
+                    {item.topic.trim() || `Thema ${topicIndex + 1}`}
+                  </span>
+                </a>
+
+                {SHOULD_SHOW_POINT_LABELS && item.points.length > 0 && (
+                  <ol className="relative ml-6 border-l border-border py-1 pl-3">
+                    {item.points.map((point, pointIndex) => (
+                      <li key={pointIndex} className="relative">
+                        <span className="absolute -left-[0.8125rem] top-1/2 h-px w-2 bg-border" />
+                        <a
+                          href={`#session-point-${item.id}-${pointIndex}`}
+                          title={getPointLabel(point, pointIndex)}
+                          className="focus-ring block truncate rounded-lg px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                        >
+                          {getPointLabel(point, pointIndex)}
+                        </a>
+                      </li>
+                    ))}
+                  </ol>
+                )}
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <div className="px-3 py-8 text-center">
+            <FileText size={24} className="mx-auto text-muted-foreground" />
+            <p className="mt-3 text-sm font-semibold">Noch keine Gliederung</p>
+            <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+              Neue Themen erscheinen hier automatisch.
+            </p>
+          </div>
+        )}
+      </nav>
+    </Surface>
+  );
+}
diff --git a/components/SortableSessionItem.tsx b/components/SortableSessionItem.tsx
index a9bf0c6..64642a0 100644
--- a/components/SortableSessionItem.tsx
+++ b/components/SortableSessionItem.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { GripVertical, Trash2, Plus } from "lucide-react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Member, SessionItem } from "@/common/types";
@@ -15,9 +14,12 @@ import { CommandSuggestions } from "@/components/CommandSuggestions";
 import { MemberSuggestions } from "@/components/MemberSuggestions";
 import { Modal } from "@/components/Modal";
 import { useSuggestionNavigation } from "@/hooks/useSuggestionNavigation";
+import { SessionTopicHeader } from "@/components/session/SessionTopicHeader";
+import { SessionPointList } from "@/components/session/SessionPointList";
 
 interface SortableSessionItemProps {
   item: SessionItem;
+  position: number;
   memberSuggestions: Member[];
   updateTopicTitle: (id: string, val: string) => void;
   removeTopic: (id: string) => void;
@@ -51,6 +53,7 @@ type CommandState = {
 
 export const SortableSessionItem = ({
   item,
+  position,
   memberSuggestions,
   updateTopicTitle,
   removeTopic,
@@ -68,10 +71,11 @@ export const SortableSessionItem = ({
   } = useSortable({ id: item.id });
 
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: CSS.Translate.toString(transform),
     transition,
-    zIndex: isDragging ? 50 : "auto", // Bring dragged item to front
-    opacity: isDragging ? 0.9 : 1,
+    zIndex: isDragging ? 30 : "auto",
+    opacity: isDragging ? 0.78 : 1,
+    willChange: isDragging ? "transform" : undefined,
   };
 
   const topicRef = useRef<HTMLInputElement | null>(null);
@@ -407,10 +411,13 @@ export const SortableSessionItem = ({
 
   return (
     <div
+      id={`session-topic-${item.id}`}
       ref={setNodeRef}
       style={style}
-      className={`bg-white dark:bg-card rounded-xl shadow-md border overflow-hidden group transition-shadow ${
-        isDragging ? "border-indigo-500 shadow-xl relative" : "border-slate-200 dark:border-border dark:shadow-none"
+      className={`glass-surface group relative isolate scroll-mt-28 overflow-hidden rounded-[var(--radius-card)] transition-[box-shadow,border-color,opacity] duration-200 ${
+        isDragging
+          ? "border-primary shadow-[0_28px_80px_var(--glass-shadow)]"
+          : "hover:border-[var(--border-strong)] hover:shadow-[0_24px_64px_var(--glass-shadow)]"
       }`}
     >
       <MemberSuggestions
@@ -438,7 +445,7 @@ export const SortableSessionItem = ({
               }
             : undefined
         }
-        className="bg-white dark:bg-zinc-900 border border-slate-200 dark:border-border rounded-lg shadow-lg z-50 max-h-56 overflow-y-auto"
+        className="glass-popover materialize z-[60] max-h-56 overflow-y-auto rounded-xl p-1 subtle-scrollbar"
       />
 
       <CommandSuggestions
@@ -457,7 +464,7 @@ export const SortableSessionItem = ({
               }
             : undefined
         }
-        className="bg-white dark:bg-zinc-900 border border-slate-200 dark:border-border rounded-lg shadow-lg z-50 max-h-56 overflow-y-auto"
+        className="glass-popover materialize z-[60] max-h-56 overflow-y-auto rounded-xl p-1 subtle-scrollbar"
       />
 
       {command.selectedCommand && commandRequiresArguments(command.selectedCommand) && (
@@ -476,89 +483,36 @@ export const SortableSessionItem = ({
         </Modal>
       )}
 
-      {/* Topic Header */}
-      <div className="bg-slate-50 dark:bg-zinc-900 p-4 border-b border-slate-100 dark:border-border flex gap-4 items-center">
-        {/* Drag Handle */}
-        <div
-          {...attributes}
-          {...listeners}
-          className="cursor-grab active:cursor-grabbing text-slate-400 dark:text-muted-foreground hover:text-indigo-600 dark:hover:text-primary p-1"
-          title="Ziehen zum Sortieren"
-        >
-          <GripVertical size={20} />
-        </div>
-        
-        <input
-          ref={topicRef}
-          type="text"
-          value={item.topic}
-          onChange={(e) => {
-            updateTopicTitle(item.id, e.target.value);
-            updateMentionFromInput({ type: "topic" }, e.currentTarget, e.target.value);
-            updateCommandFromInput({ type: "topic" }, e.currentTarget, e.target.value);
-          }}
-          className="flex-1 bg-transparent text-lg font-semibold text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-muted-foreground outline-none focus:underline decoration-indigo-300 dark:decoration-indigo-700 underline-offset-4"
-          placeholder="Thema Titel..."
-          onKeyDown={onEditorKeyDown} // Stop DND from interfering with typing
-          onBlur={() => setTimeout(() => closeMention(), 80)}
-        />
-        <button
-          onClick={() => removeTopic(item.id)}
-          className="text-slate-400 dark:text-muted-foreground hover:text-red-500 dark:hover:text-red-400 transition-colors p-2"
-          title="Thema löschen"
-        >
-          <Trash2 size={18} />
-        </button>
-      </div>
-
-      {/* Bullet Points */}
-      <div className="p-4 space-y-3">
-        {item.points.map((point, idx) => (
-          <div key={idx} className="flex gap-3 items-start group/point">
-            <div className="mt-3.5 w-1.5 h-1.5 bg-indigo-500 rounded-full shrink-0"></div>
-            <textarea
-              ref={(el) => {
-                pointRefs.current[idx] = el;
-              }}
-              value={point}
-              onChange={(e) => {
-                updatePoint(item.id, idx, e.target.value);
-                updateMentionFromInput(
-                  { type: "point", idx },
-                  e.currentTarget,
-                  e.target.value
-                );
-                updateCommandFromInput(
-                  { type: "point", idx },
-                  e.currentTarget,
-                  e.target.value
-                );
-              }}
-              className="flex-1 bg-transparent resize-none border-b border-transparent focus:border-indigo-200 dark:focus:border-primary outline-none py-1 text-slate-600 dark:text-foreground leading-relaxed"
-              rows={
-                point == null || point === ""
-                  ? 1
-                  : Math.max(1, Math.ceil(point.length / 80))
-              }
-              placeholder="Inhalt des Tagesordnungspunkts..."
-              onKeyDown={onEditorKeyDown}
-              onBlur={() => setTimeout(() => closeMention(), 80)}
-            />
-            <button
-              onClick={() => removePoint(item.id, idx)}
-              className="opacity-0 group-hover/point:opacity-100 text-slate-300 dark:text-slate-600 hover:text-red-400 dark:hover:text-red-400 transition-all p-1"
-            >
-              <Trash2 size={14} />
-            </button>
-          </div>
-        ))}
-        <button
-          onClick={() => addPoint(item.id)}
-          className="ml-5 text-md text-slate-400 dark:text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center gap-1 mt-2"
-        >
-          <Plus size={14} /> Punkt hinzufügen
-        </button>
-      </div>
+      <SessionTopicHeader
+        value={item.topic}
+        position={position}
+        pointCount={item.points.length}
+        topicRef={topicRef}
+        dragHandleProps={{ ...attributes, ...listeners }}
+        onChange={(element, value) => {
+          updateTopicTitle(item.id, value);
+          updateMentionFromInput({ type: "topic" }, element, value);
+          updateCommandFromInput({ type: "topic" }, element, value);
+        }}
+        onKeyDown={onEditorKeyDown}
+        onBlur={() => setTimeout(() => closeMention(), 80)}
+        onRemove={() => removeTopic(item.id)}
+      />
+
+      <SessionPointList
+        topicId={item.id}
+        points={item.points}
+        pointRefs={pointRefs}
+        onChange={(idx, element, value) => {
+          updatePoint(item.id, idx, value);
+          updateMentionFromInput({ type: "point", idx }, element, value);
+          updateCommandFromInput({ type: "point", idx }, element, value);
+        }}
+        onKeyDown={onEditorKeyDown}
+        onBlur={() => setTimeout(() => closeMention(), 80)}
+        onAdd={() => addPoint(item.id)}
+        onRemove={(idx) => removePoint(item.id, idx)}
+      />
     </div>
   );
 };
diff --git a/components/TagInput.tsx b/components/TagInput.tsx
index b0c1175..cacef64 100644
--- a/components/TagInput.tsx
+++ b/components/TagInput.tsx
@@ -23,6 +23,7 @@ export const TagInput = ({
   const [isOpen, setIsOpen] = useState(false);
   const [matches, setMatches] = useState<Member[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
+  const inputId = React.useId();
 
   const canOpenSuggestions =
     isOpen && (maxSelections === -1 || selected.length < maxSelections);
@@ -62,25 +63,32 @@ export const TagInput = ({
 
   return (
     <div className="relative group">
-      <label className="block text-md font-medium text-slate-700 dark:text-muted-foreground mb-1">
-        {label}
-      </label>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="mb-1.5 block text-sm font-semibold text-secondary-foreground"
+        >
+          {label}
+        </label>
+      )}
       <div
-        className="flex flex-wrap gap-2 p-2 bg-slate-50 dark:bg-zinc-900 border border-slate-200 dark:border-border rounded-lg focus-within:ring-2 focus-within:ring-indigo-500 focus-within:border-indigo-500 min-h-11.5 cursor-text"
+        className="control-surface flex min-h-11 flex-wrap gap-1.5 rounded-xl p-1.5 transition-[border-color,box-shadow,background-color] duration-150 focus-within:border-primary focus-within:bg-[var(--card-strong)] focus-within:ring-4 focus-within:ring-[var(--ring)]"
         onClick={() => inputRef.current?.focus()}
       >
         {selected.map((tag) => (
           <span
             key={tag}
-            className="flex items-center gap-1 px-2 py-1 text-md bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-100 rounded-md"
+            className="flex min-h-8 items-center gap-1 rounded-lg bg-accent px-2.5 py-1 text-sm font-semibold text-accent-foreground"
           >
             {tag}
             <button
+              type="button"
+              aria-label={`${tag} entfernen`}
               onClick={(e) => {
                 e.stopPropagation();
                 removeTag(tag);
               }}
-              className="hover:text-indigo-900 dark:hover:text-indigo-300 cursor-pointer"
+              className="focus-ring -mr-1 rounded-md p-1 text-accent-foreground/70 transition-colors hover:bg-black/5 hover:text-accent-foreground dark:hover:bg-white/10"
             >
               <X size={14} />
             </button>
@@ -98,16 +106,17 @@ export const TagInput = ({
             setActiveIndex(0);
           }}
           onPick={(member) => addTag(member.name)}
-          className="absolute top-full left-0 w-full mt-1 bg-white dark:bg-zinc-900 border border-slate-200 dark:border-border rounded-lg shadow-lg z-20 max-h-48 overflow-y-auto"
+          className="glass-popover materialize absolute left-0 top-full z-20 mt-2 max-h-56 w-full overflow-y-auto rounded-xl py-1 subtle-scrollbar"
           renderRight={() => (
             <Plus
               size={14}
-              className="text-slate-400 dark:text-muted-foreground"
+              className="text-muted-foreground"
             />
           )}
         />
-        <div className="relative flex-1 min-w-30">
+        <div className="relative min-w-28 flex-1">
           <input
+            id={inputId}
             ref={inputRef}
             type="text"
             value={input}
@@ -119,7 +128,7 @@ export const TagInput = ({
             onBlur={() => setTimeout(() => setIsOpen(false), 50)}
             disabled={maxSelections !== -1 && selected.length >= maxSelections}
             onKeyDown={handleKeyDown}
-            className="w-full bg-transparent outline-none text-md h-full py-1 text-slate-700 dark:text-foreground"
+            className="h-full min-h-8 w-full bg-transparent px-1.5 py-1 text-sm text-foreground outline-none placeholder:text-muted-foreground"
             placeholder={selected.length === 0 ? "Namen auswählen..." : ""}
           />
         </div>
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
index 4271a92..79d9c15 100644
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@@ -1,33 +1,33 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/Primitives";
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = React.useState(false)
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
 
-  // Avoid hydration mismatch
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
+  React.useEffect(() => setMounted(true), []);
 
-  if (!mounted) {
-    return (
-      <button className="p-2 rounded-lg text-slate-600 border border-transparent">
-         <span className="w-5 h-5 block" />
-      </button>
-    )
-  }
+  const isDark = mounted && resolvedTheme === "dark";
+  const label = isDark ? "Helles Erscheinungsbild" : "Dunkles Erscheinungsbild";
 
   return (
-    <button
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-      className="p-2 rounded-lg text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
-      aria-label="Toggle theme"
+    <Button
+      onClick={() => mounted && setTheme(isDark ? "light" : "dark")}
+      variant="quiet"
+      size="icon"
+      aria-label={label}
+      title={label}
+      disabled={!mounted}
     >
-      {theme === "dark" ? <Moon size={20} /> : <Sun size={20} />}
-    </button>
-  )
+      {mounted ? (
+        isDark ? <Moon size={17} /> : <Sun size={17} />
+      ) : (
+        <span className="h-[17px] w-[17px]" aria-hidden="true" />
+      )}
+    </Button>
+  );
 }
diff --git a/components/session/SessionPointList.tsx b/components/session/SessionPointList.tsx
new file mode 100644
index 0000000..0173080
--- /dev/null
+++ b/components/session/SessionPointList.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/Primitives";
+
+type Props = {
+  topicId: string;
+  points: string[];
+  pointRefs: React.MutableRefObject<(HTMLTextAreaElement | null)[]>;
+  onChange: (
+    index: number,
+    element: HTMLTextAreaElement,
+    value: string
+  ) => void;
+  onKeyDown: (event: React.KeyboardEvent) => void;
+  onBlur: () => void;
+  onAdd: () => void;
+  onRemove: (index: number) => void;
+};
+
+export function SessionPointList({
+  topicId,
+  points,
+  pointRefs,
+  onChange,
+  onKeyDown,
+  onBlur,
+  onAdd,
+  onRemove,
+}: Props) {
+  return (
+    <div className="p-4 sm:p-5">
+      <div className="space-y-2">
+        {points.map((point, index) => (
+          <div
+            key={index}
+            id={`session-point-${topicId}-${index}`}
+            className="group/point grid scroll-mt-28 grid-cols-[1rem_minmax(0,1fr)_2.5rem] items-start gap-2 rounded-xl transition-colors hover:bg-[color:var(--muted)]/45 sm:gap-3"
+          >
+            <span className="mt-[1.15rem] h-1.5 w-1.5 justify-self-center rounded-full bg-primary shadow-[0_0_0_4px_var(--ring)]" />
+            {/* <span className="mt-[1.25rem] h-0.75 w-4 justify-self-center rounded-full bg-primary shadow-[0_0_0_2px_var(--ring)]" /> dash */}
+            <textarea
+              ref={(element) => {
+                pointRefs.current[index] = element;
+              }}
+              value={point}
+              onChange={(event) =>
+                onChange(index, event.currentTarget, event.target.value)
+              }
+              className="min-h-11 w-full resize-none rounded-xl border border-transparent bg-transparent px-2 py-2.5 text-sm leading-relaxed text-secondary-foreground outline-none transition-colors placeholder:text-muted-foreground focus:text-foreground sm:text-[0.9375rem]"
+              rows={
+                point == null || point === ""
+                  ? 1
+                  : Math.max(1, Math.ceil(point.length / 80))
+              }
+              placeholder="Punkt notieren ..."
+              onKeyDown={onKeyDown}
+              onBlur={onBlur}
+            />
+            <Button
+              onClick={() => onRemove(index)}
+              variant="quiet"
+              size="icon"
+              className="scale-95 text-muted-foreground opacity-60 hover:bg-[var(--destructive-soft)] hover:text-destructive sm:opacity-0 sm:group-hover/point:scale-100 sm:group-hover/point:opacity-100 sm:focus-visible:scale-100 sm:focus-visible:opacity-100"
+              aria-label={`Punkt ${index + 1} löschen`}
+              title="Punkt löschen"
+            >
+              <Trash2 size={15} />
+            </Button>
+          </div>
+        ))}
+
+        {points.length === 0 && (
+          <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+            Noch keine Punkte in diesem Thema.
+          </div>
+        )}
+      </div>
+
+      <Button
+        onClick={onAdd}
+        variant="quiet"
+        size="sm"
+        className="mt-3 w-full border border-dashed border-[var(--border-strong)] bg-[color:var(--muted)]/20 text-primary hover:border-primary hover:bg-accent hover:text-accent-foreground"
+      >
+        <Plus size={15} /> Punkt hinzufügen
+      </Button>
+    </div>
+  );
+}
diff --git a/components/session/SessionTopicHeader.tsx b/components/session/SessionTopicHeader.tsx
new file mode 100644
index 0000000..224529e
--- /dev/null
+++ b/components/session/SessionTopicHeader.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { GripVertical, ListChecks, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/Primitives";
+
+type Props = {
+  value: string;
+  position: number;
+  pointCount: number;
+  topicRef: React.RefObject<HTMLInputElement | null>;
+  dragHandleProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
+  onChange: (element: HTMLInputElement, value: string) => void;
+  onKeyDown: (event: React.KeyboardEvent) => void;
+  onBlur: () => void;
+  onRemove: () => void;
+};
+
+export function SessionTopicHeader({
+  value,
+  position,
+  pointCount,
+  topicRef,
+  dragHandleProps,
+  onChange,
+  onKeyDown,
+  onBlur,
+  onRemove,
+}: Props) {
+  return (
+    <div className="flex items-center gap-2 border-b border-border bg-[color:var(--muted)]/45 p-3 sm:gap-3 sm:px-4">
+      <button
+        type="button"
+        {...dragHandleProps}
+        className="focus-ring flex h-11 w-9 shrink-0 touch-none cursor-grab items-center justify-center rounded-xl border border-border bg-[color:var(--card-strong)]/55 text-muted-foreground shadow-sm transition-[color,background-color,border-color,transform] hover:border-[var(--border-strong)] hover:bg-[var(--card-strong)] hover:text-primary active:scale-95 active:cursor-grabbing"
+        aria-label="Thema verschieben"
+        title="Ziehen zum Sortieren"
+      >
+        <GripVertical size={18} />
+      </button>
+
+      <input
+        ref={topicRef}
+        type="text"
+        value={value}
+        onChange={(event) => onChange(event.currentTarget, event.target.value)}
+        className="focus-ring min-h-11 min-w-0 flex-1 rounded-xl border border-transparent bg-transparent px-2 text-base font-bold tracking-[-0.02em] text-foreground outline-none transition-colors placeholder:text-muted-foreground hover:bg-[color:var(--input)]/50 focus:border-primary focus:bg-[var(--card-strong)] sm:text-lg"
+        placeholder="Thema benennen ..."
+        onKeyDown={onKeyDown}
+        onBlur={onBlur}
+      />
+
+      <Button
+        onClick={onRemove}
+        variant="quiet"
+        size="icon"
+        className="shrink-0 text-muted-foreground sm:opacity-60 sm:group-hover:opacity-100 sm:focus-visible:opacity-100 hover:bg-[var(--destructive-soft)] hover:text-destructive"
+        aria-label="Thema löschen"
+        title="Thema löschen"
+      >
+        <Trash2 size={17} />
+      </Button>
+    </div>
+  );
+}
diff --git a/components/ui/Primitives.tsx b/components/ui/Primitives.tsx
new file mode 100644
index 0000000..fc629fb
--- /dev/null
+++ b/components/ui/Primitives.tsx
@@ -0,0 +1,159 @@
+import React from "react";
+
+type ClassValue = string | false | null | undefined;
+
+export function cn(...classes: ClassValue[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+type ButtonVariant = "primary" | "secondary" | "quiet" | "destructive";
+type ButtonSize = "sm" | "md" | "icon";
+
+const buttonVariants: Record<ButtonVariant, string> = {
+  primary:
+    "border border-transparent bg-primary text-primary-foreground shadow-[0_8px_24px_rgba(53,104,232,.22)] hover:brightness-95",
+  secondary:
+    "control-surface text-secondary-foreground hover:border-[var(--border-strong)] hover:bg-[var(--card-strong)]",
+  quiet:
+    "border border-transparent bg-transparent text-muted-foreground shadow-none hover:bg-muted hover:text-foreground",
+  destructive:
+    "border border-transparent bg-[var(--destructive-soft)] text-destructive shadow-none hover:brightness-95",
+};
+
+const buttonSizes: Record<ButtonSize, string> = {
+  sm: "min-h-9 gap-1.5 px-3",
+  md: "gap-2 px-4",
+  icon: "h-10 w-10 justify-center p-0",
+};
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "secondary", size = "md", type = "button", ...props }, ref) => (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(
+        "ui-button focus-ring inline-flex items-center justify-center whitespace-nowrap",
+        buttonVariants[variant],
+        buttonSizes[size],
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Button.displayName = "Button";
+
+export function Surface({
+  className,
+  children,
+  as: Component = "section",
+}: {
+  className?: string;
+  children: React.ReactNode;
+  as?: "section" | "div" | "article" | "aside";
+}) {
+  return (
+    <Component className={cn("glass-surface rounded-[var(--radius-card)]", className)}>
+      {children}
+    </Component>
+  );
+}
+
+export function Eyebrow({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <span
+      className={cn(
+        "text-[0.6875rem] font-bold uppercase tracking-[0.12em] text-primary",
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function Badge({
+  className,
+  children,
+  tone = "neutral",
+}: {
+  className?: string;
+  children: React.ReactNode;
+  tone?: "neutral" | "accent" | "success" | "warning";
+}) {
+  const tones = {
+    neutral: "bg-muted text-muted-foreground",
+    accent: "bg-accent text-accent-foreground",
+    success: "bg-[var(--success-soft)] text-[var(--success)]",
+    warning: "bg-[var(--warning-soft)] text-[var(--warning)]",
+  };
+
+  return (
+    <span
+      className={cn(
+        "inline-flex min-h-6 items-center rounded-full px-2.5 py-1 text-xs font-semibold tracking-[-0.01em]",
+        tones[tone],
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function FieldLabel({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <span className={cn("mb-1.5 block text-sm font-semibold text-secondary-foreground", className)}>
+      {children}
+    </span>
+  );
+}
+
+export function SectionHeading({
+  eyebrow,
+  title,
+  description,
+  action,
+  className,
+}: {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex items-start justify-between gap-4", className)}>
+      <div className="min-w-0">
+        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
+        <h2 className="mt-1 text-xl font-bold leading-tight tracking-[-0.025em] text-foreground">
+          {title}
+        </h2>
+        {description && (
+          <p className="mt-1 max-w-2xl text-sm leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+        )}
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  );
+}
diff --git a/example.env.local b/example.env.local
index a65ec67..47778e2 100644
--- a/example.env.local
+++ b/example.env.local
@@ -1,8 +1,8 @@
 # gewählten FSR Mitglieder
-NEXT_PUBLIC_FSR_MEMBERS=Name1 [Alias1, Alias2],Name2,Name3
+FSR_MEMBERS=Name1 [Alias1, Alias2],Name2,Name3
 
 # assoziierten Mitglieder / Häufige Gäste
-NEXT_PUBLIC_ASSOCIATED_MEMBERS=Name1,Name2
+ASSOCIATED_MEMBERS=Name1,Name2
 
 # Discord Webhook URL for sending protocols
 DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/...
@@ -13,4 +13,4 @@ DISCORD_PASSWORD=secret_password
 # DEFAULTS
 DEFAULT_START_TIME="16:30"
 DEFAULT_LOCATION=""
-DEFAULT_ROOM=""
\ No newline at end of file
+DEFAULT_ROOM=""
diff --git a/preview/readme-previews/dark/empty.png b/preview/readme-previews/dark/empty.png
index 9639f90..caa1bbd 100644
Binary files a/preview/readme-previews/dark/empty.png and b/preview/readme-previews/dark/empty.png differ
diff --git a/preview/readme-previews/dark/full.png b/preview/readme-previews/dark/full.png
index c288a53..3bb5d4c 100644
Binary files a/preview/readme-previews/dark/full.png and b/preview/readme-previews/dark/full.png differ
diff --git a/preview/readme-previews/dark/member_select.png b/preview/readme-previews/dark/member_select.png
index 54ae462..c967ce0 100644
Binary files a/preview/readme-previews/dark/member_select.png and b/preview/readme-previews/dark/member_select.png differ
diff --git a/preview/readme-previews/dark/new_session_item.png b/preview/readme-previews/dark/new_session_item.png
index a4d526b..4c6b85f 100644
Binary files a/preview/readme-previews/dark/new_session_item.png and b/preview/readme-previews/dark/new_session_item.png differ
diff --git a/preview/readme-previews/light/empty.png b/preview/readme-previews/light/empty.png
index aa47f96..7a5cbb9 100644
Binary files a/preview/readme-previews/light/empty.png and b/preview/readme-previews/light/empty.png differ
diff --git a/preview/readme-previews/light/full.png b/preview/readme-previews/light/full.png
index 8304247..06491cc 100644
Binary files a/preview/readme-previews/light/full.png and b/preview/readme-previews/light/full.png differ
diff --git a/preview/readme-previews/light/member_select.png b/preview/readme-previews/light/member_select.png
index b1c7c08..45ee930 100644
Binary files a/preview/readme-previews/light/member_select.png and b/preview/readme-previews/light/member_select.png differ
diff --git a/preview/readme-previews/light/new_session_item.png b/preview/readme-previews/light/new_session_item.png
index 67972db..6536099 100644
Binary files a/preview/readme-previews/light/new_session_item.png and b/preview/readme-previews/light/new_session_item.png differ
diff --git a/scripts/generate-readme-previews.ts b/scripts/generate-readme-previews.ts
index e0a26c1..dfe91d6 100644
--- a/scripts/generate-readme-previews.ts
+++ b/scripts/generate-readme-previews.ts
@@ -109,20 +109,8 @@ async function screenshot(page: Page, outPath: string) {
     await page.screenshot({ path: outPath, fullPage: true });
 }
 
-async function waitForDialog(page: Page) {
-    await page
-        .locator('[role="dialog"]')
-        .first()
-        .waitFor({ state: "visible", timeout: 5000 });
-}
-
 async function openMemberSuggestions(page: Page) {
-    const tagInput = page
-        .locator("div")
-        .filter({ has: page.locator('label:has-text("FSR Mitglieder")') })
-        .first();
-
-    const input = tagInput.locator('input[type="text"]').first();
+    const input = page.getByRole("textbox", { name: "Gewählte Mitglieder" });
     await input.click();
     await input.fill("a");
     await page.waitForTimeout(250);