diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b7021c5..ec8682c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,198 +1,32 @@
+import { useEffect, useState } from 'react';
 import {
-  Avatar,
-  Button,
-  Card,
-  Chip,
-  Input,
-  Spinner,
-  Switch,
-  Tab,
-  Tabs,
-  TextArea
+  Alert, Avatar, Button, Card, CardContent, CardHeader, Chip, Divider,
+  Input, Select, SelectItem, Skeleton, Spinner, Switch, Tab, Tabs,
+  Textarea
 } from '@heroui/react';
 import {
-  Activity,
-  AudioLines,
-  Bot,
-  CalendarDays,
-  Cable,
-  ChevronRight,
-  Command,
-  Home,
-  LifeBuoy,
-  Logs,
-  MessageSquare,
-  Puzzle,
-  RadioTower,
-  ScanSearch,
-  Settings,
-  Shield,
-  Sparkles,
-  Tag,
-  Ticket,
-  UserRound,
-  Users,
-  Wrench
+  Activity, AudioLines, Bot, Cable, CalendarDays, ChevronRight, Command,
+  Home, LifeBuoy, Logs, MessageSquare, Puzzle, RadioTower, ScanSearch,
+  Settings, Shield, Sparkles, Tag, Ticket, UserRound, Users, Wrench
 } from 'lucide-react';
-import { useEffect, useState } from 'react';
-
-type AppConfig = {
-  baseRoot?: string;
-  baseApi?: string;
-  baseAuth?: string;
-  baseDashboard?: string;
-  initialGuildId?: string;
-};
-
-type User = {
-  username: string;
-  discriminator?: string;
-  isAdmin?: boolean;
-};
-
-type Guild = {
-  id: string;
-  name: string;
-  icon?: string;
-};
-
-type NavKey =
-  | 'overview'
-  | 'tickets'
-  | 'automod'
-  | 'welcome'
-  | 'dynamicvoice'
-  | 'birthday'
-  | 'reactionroles'
-  | 'statuspage'
-  | 'serverstats'
-  | 'settings'
-  | 'modules'
-  | 'events'
-  | 'admin';
-
-type TicketRecord = {
-  id: string;
-  topic?: string;
-  status?: string;
-  category?: string;
-  priority?: string;
-  createdAt?: string;
-  claimedById?: string | null;
-};
-
-type StatusService = {
-  id: string;
-  name?: string;
-  url?: string;
-  status?: string;
-  uptimePct?: number;
-  lastCheckedAt?: string;
-};
-
-type EventItem = {
-  id: string;
-  title: string;
-  description?: string;
-  startsAt?: string;
-  reminderMinutes?: number;
-  channelId?: string;
-};
-
-type ReactionRoleSet = {
-  id: string;
-  title?: string;
-  description?: string;
-  channelId?: string;
-  messageId?: string;
-  entries?: Array<{ emoji: string; roleId: string; label?: string; description?: string }>;
-};
-
-type ModuleItem = {
-  key: string;
-  name: string;
-  description?: string;
-  enabled: boolean;
-};
-
-type LogEntry = {
-  level?: string;
-  category?: string;
-  message?: string;
-  timestamp?: string;
-};
-
-type SettingsState = Record<string, any>;
+import { apiFetch } from './utils/api';
+import { formatDate, guildIconUrl } from './utils/formatters';
+import { navItems } from './utils/constants';
+import { Sidebar } from './components/layout/Sidebar';
+import { Topbar } from './components/layout/Topbar';
+import { SectionCard } from './components/shared/SectionCard';
+import { FormPanel } from './components/shared/FormPanel';
+import { ListPanel } from './components/shared/ListPanel';
+import { StatCard } from './components/shared/StatCard';
+import { ActivityTile } from './components/shared/ActivityTile';
+import { LoadingSkeleton } from './components/shared/LoadingSkeleton';
+import type {
+  AppConfig, User, Guild, NavKey, TicketRecord, StatusService,
+  EventItem, ReactionRoleSet, ModuleItem, LogEntry, SettingsState
+} from './types';
 
 const appConfig: AppConfig = (window as any).__PAPO__ || {};
 
-const navItems: Array<{ key: NavKey; label: string; icon: JSX.Element }> = [
-  { key: 'overview', label: 'Uebersicht', icon: <Home size={18} /> },
-  { key: 'tickets', label: 'Ticketsystem', icon: <Ticket size={18} /> },
-  { key: 'automod', label: 'Automod', icon: <Shield size={18} /> },
-  { key: 'welcome', label: 'Willkommen', icon: <Sparkles size={18} /> },
-  { key: 'dynamicvoice', label: 'Dynamic Voice', icon: <AudioLines size={18} /> },
-  { key: 'birthday', label: 'Birthday', icon: <CalendarDays size={18} /> },
-  { key: 'reactionroles', label: 'Reaction Roles', icon: <Tag size={18} /> },
-  { key: 'statuspage', label: 'Statuspage', icon: <RadioTower size={18} /> },
-  { key: 'serverstats', label: 'Server Stats', icon: <Activity size={18} /> },
-  { key: 'settings', label: 'Einstellungen', icon: <Settings size={18} /> },
-  { key: 'modules', label: 'Module', icon: <Puzzle size={18} /> },
-  { key: 'events', label: 'Events', icon: <CalendarDays size={18} /> },
-  { key: 'admin', label: 'Admin', icon: <Wrench size={18} /> }
-];
-
-function apiUrl(path: string) {
-  const baseApi = appConfig.baseApi || '/api';
-  return `${baseApi}${path}`;
-}
-
-async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
-  const response = await fetch(apiUrl(path), {
-    ...init,
-    headers: {
-      'Content-Type': 'application/json',
-      ...(init?.headers || {})
-    }
-  });
-
-  if (response.status === 401) {
-    window.location.href = `${appConfig.baseAuth || '/auth'}/discord`;
-    throw new Error('unauthorized');
-  }
-
-  if (!response.ok) {
-    throw new Error(`request failed: ${response.status}`);
-  }
-
-  return response.json() as Promise<T>;
-}
-
-function formatDate(value?: string | number | null) {
-  if (!value) return '-';
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return String(value);
-  return `${date.toLocaleDateString('de-DE')} ${date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}`;
-}
-
-function guildIconUrl(guild?: Guild | null) {
-  if (!guild) return undefined;
-  if (guild.icon) return `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`;
-  return undefined;
-}
-
-function sparkPath(kind: 'messages' | 'commands' | 'automod') {
-  if (kind === 'messages') return 'M4 26 C16 12, 24 10, 34 18 S54 30, 64 22 S80 6, 92 14 S108 20, 116 18';
-  if (kind === 'commands') return 'M4 22 C14 10, 22 12, 34 20 S54 28, 66 16 S82 8, 92 14 S108 24, 116 22';
-  return 'M4 28 C14 24, 22 10, 34 12 S54 30, 66 22 S84 8, 96 14 S110 18, 116 16';
-}
-
-function chartColor(kind: 'messages' | 'commands' | 'automod') {
-  if (kind === 'messages') return '#f2b36f';
-  if (kind === 'commands') return '#b26cff';
-  return '#48d883';
-}
-
 function App() {
   const [loading, setLoading] = useState(true);
   const [user, setUser] = useState<User | null>(null);
@@ -230,18 +64,9 @@ function App() {
     if (navItems.some((item) => item.key === hash)) setSection(hash);
   }, []);
 
-  useEffect(() => {
-    window.location.hash = section;
-  }, [section]);
-
-  useEffect(() => {
-    void bootstrap();
-  }, []);
-
-  useEffect(() => {
-    if (!currentGuildId) return;
-    void loadGuildData(currentGuildId);
-  }, [currentGuildId]);
+  useEffect(() => { window.location.hash = section; }, [section]);
+  useEffect(() => { void bootstrap(); }, []);
+  useEffect(() => { if (currentGuildId) void loadGuildData(currentGuildId); }, [currentGuildId]);
 
   async function bootstrap() {
     try {
@@ -249,30 +74,15 @@ function App() {
       const guildRes = await apiFetch<{ guilds: Guild[] }>('/guilds');
       setUser(me.user);
       setGuilds(guildRes.guilds || []);
-      if (!currentGuildId && guildRes.guilds?.length) {
-        setCurrentGuildId(guildRes.guilds[0].id);
-      }
-    } finally {
-      setLoading(false);
-    }
+      if (!currentGuildId && guildRes.guilds?.length) setCurrentGuildId(guildRes.guilds[0].id);
+    } finally { setLoading(false); }
   }
 
   async function loadGuildData(guildId: string) {
     setStatusMessage('Lade Daten...');
     try {
-      const [
-        guildInfoRes,
-        overviewRes,
-        activityRes,
-        logsRes,
-        settingsRes,
-        modulesRes,
-        birthdayRes,
-        reactionRes,
-        statusRes,
-        statsRes,
-        eventsRes
-      ] = await Promise.all([
+      const [guildInfoRes, overviewRes, activityRes, logsRes, settingsRes, modulesRes,
+        birthdayRes, reactionRes, statusRes, statsRes, eventsRes] = await Promise.all([
         apiFetch<any>(`/guild/info?guildId=${encodeURIComponent(guildId)}`),
         apiFetch<any>(`/overview?guildId=${encodeURIComponent(guildId)}`),
         apiFetch<any>(`/guild/activity?guildId=${encodeURIComponent(guildId)}`),
@@ -285,7 +95,6 @@ function App() {
         apiFetch<any>(`/server-stats?guildId=${encodeURIComponent(guildId)}`),
         apiFetch<any>(`/events?guildId=${encodeURIComponent(guildId)}`)
       ]);
-
       setGuildInfo(guildInfoRes.guild || null);
       setOverview(overviewRes);
       setActivity(activityRes.activity || {});
@@ -299,18 +108,10 @@ function App() {
       setStatsDraft(statsRes.config || { items: [] });
       setStatusDraft(statusRes.config || { services: [] });
       setEvents(eventsRes.events || []);
-
-      setReactionDraft({
-        title: '',
-        channelId: '',
-        entries: ''
-      });
-
+      setReactionDraft({ title: '', channelId: '', entries: '' });
       await Promise.all([loadTicketData(guildId), loadAdminData()]);
       setStatusMessage('');
-    } catch {
-      setStatusMessage('Daten konnten nicht geladen werden');
-    }
+    } catch { setStatusMessage('Daten konnten nicht geladen werden'); }
   }
 
   async function loadTicketData(guildId: string) {
@@ -321,7 +122,6 @@ function App() {
       apiFetch<any>(`/automations?guildId=${encodeURIComponent(guildId)}`),
       apiFetch<any>(`/kb?guildId=${encodeURIComponent(guildId)}`)
     ]);
-
     setTickets(ticketRes.tickets || []);
     setPipeline(pipelineRes.pipeline || {});
     setSla(slaRes || { supporters: [], days: [] });
@@ -331,25 +131,17 @@ function App() {
 
   async function loadAdminData() {
     if (!user?.isAdmin) return;
-    const [overviewRes, activityRes, logsRes] = await Promise.all([
+    const [overviewRes, , logsRes] = await Promise.all([
       apiFetch<any>('/admin/overview'),
       apiFetch<any>('/admin/activity'),
       apiFetch<any>('/admin/logs')
     ]);
-
-    setAdmin({
-      overview: overviewRes,
-      activity: activityRes,
-      logs: logsRes.logs || []
-    });
+    setAdmin({ overview: overviewRes, activity: null, logs: logsRes.logs || [] });
   }
 
   async function saveSettingsPayload(payload: Record<string, any>, okMessage: string) {
     if (!currentGuildId) return;
-    await apiFetch('/settings', {
-      method: 'POST',
-      body: JSON.stringify({ guildId: currentGuildId, ...payload })
-    });
+    await apiFetch('/settings', { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, ...payload }) });
     setStatusMessage(okMessage);
     await loadGuildData(currentGuildId);
   }
@@ -370,19 +162,13 @@ function App() {
   }
 
   async function saveStatuspage() {
-    await apiFetch('/statuspage', {
-      method: 'POST',
-      body: JSON.stringify({ guildId: currentGuildId, config: statusDraft })
-    });
+    await apiFetch('/statuspage', { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, config: statusDraft }) });
     setStatusMessage('Statuspage gespeichert');
     await loadGuildData(currentGuildId);
   }
 
   async function saveServerStats() {
-    await apiFetch('/server-stats', {
-      method: 'POST',
-      body: JSON.stringify({ guildId: currentGuildId, config: statsDraft })
-    });
+    await apiFetch('/server-stats', { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, config: statsDraft }) });
     setStatusMessage('Server Stats gespeichert');
     await loadGuildData(currentGuildId);
   }
@@ -392,10 +178,8 @@ function App() {
     await apiFetch('/events', {
       method: 'POST',
       body: JSON.stringify({
-        guildId: currentGuildId,
-        title: eventDraft.title,
-        description: eventDraft.description,
-        channelId: eventDraft.channelId || undefined,
+        guildId: currentGuildId, title: eventDraft.title,
+        description: eventDraft.description, channelId: eventDraft.channelId || undefined,
         startsAt: eventDraft.startsAt || undefined
       })
     });
@@ -405,39 +189,15 @@ function App() {
   }
 
   async function deleteEvent(id: string) {
-    await apiFetch(`/events/${id}`, {
-      method: 'DELETE',
-      body: JSON.stringify({ guildId: currentGuildId })
-    });
+    await apiFetch(`/events/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
     await loadGuildData(currentGuildId);
   }
 
   async function saveReactionRole() {
-    const entries = reactionDraft.entries
-      .split('\n')
-      .map((line) => line.trim())
-      .filter(Boolean)
-      .map((line) => {
-        const parts = line.split('|').map((part) => part.trim());
-        return {
-          emoji: parts[0],
-          roleId: parts[1],
-          label: parts[2] || undefined,
-          description: parts[3] || undefined
-        };
-      })
-      .filter((entry) => entry.emoji && entry.roleId);
-
-    await apiFetch('/reactionroles', {
-      method: 'POST',
-      body: JSON.stringify({
-        guildId: currentGuildId,
-        channelId: reactionDraft.channelId,
-        title: reactionDraft.title,
-        entries
-      })
-    });
-
+    const entries = reactionDraft.entries.split('\n').map((l) => l.trim()).filter(Boolean)
+      .map((line) => { const p = line.split('|').map((s) => s.trim()); return { emoji: p[0], roleId: p[1], label: p[2], description: p[3] }; })
+      .filter((e) => e.emoji && e.roleId);
+    await apiFetch('/reactionroles', { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, channelId: reactionDraft.channelId, title: reactionDraft.title, entries }) });
     await loadGuildData(currentGuildId);
     setStatusMessage('Reaction Role gespeichert');
   }
@@ -450,11 +210,9 @@ function App() {
     await apiFetch('/automations', {
       method: 'POST',
       body: JSON.stringify({
-        guildId: currentGuildId,
-        name: automationDraft.name || 'Automation',
+        guildId: currentGuildId, name: automationDraft.name || 'Automation',
         condition: { category: automationDraft.conditionValue },
-        action: { type: 'reminder', message: automationDraft.actionValue || 'Reminder' },
-        active: true
+        action: { type: 'reminder', message: automationDraft.actionValue || 'Reminder' }, active: true
       })
     });
     setAutomationDraft({ name: '', conditionValue: '', actionValue: '' });
@@ -464,623 +222,510 @@ function App() {
   async function saveKbArticle() {
     await apiFetch('/kb', {
       method: 'POST',
-      body: JSON.stringify({
-        guildId: currentGuildId,
-        title: kbDraft.title || 'Artikel',
-        keywords: kbDraft.keywords,
-        content: kbDraft.content
-      })
+      body: JSON.stringify({ guildId: currentGuildId, title: kbDraft.title || 'Artikel', keywords: kbDraft.keywords, content: kbDraft.content })
     });
     setKbDraft({ title: '', keywords: '', content: '' });
     await loadTicketData(currentGuildId);
   }
 
-  const selectedGuild = guilds.find((guild) => guild.id === currentGuildId) || null;
+  const selectedGuild = guilds.find((g) => g.id === currentGuildId) || null;
   const moduleFlags = guildInfo?.modules || {};
 
+  function handleLogout() {
+    window.location.href = `${appConfig.baseAuth || '/auth'}/logout`;
+  }
+
   if (loading) {
     return (
-      <div className="papo-shell flex items-center justify-center">
-        <Spinner color="warning" label="Dashboard wird geladen..." />
+      <div className="flex min-h-screen items-center justify-center">
+        <Spinner color="primary" label="Dashboard wird geladen..." size="lg" />
       </div>
     );
   }
 
   if (!selectedGuild) {
     return (
-      <div className="papo-shell px-6 py-10 md:px-10">
-        <div className="mx-auto max-w-6xl">
-          <div className="mb-8">
-            <h1 className="papo-section-title">Waehle einen Server</h1>
-            <p className="papo-section-subtitle">Die Guild-Auswahl laeuft jetzt ueber die neue HeroUI-Oberflaeche.</p>
-          </div>
-          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-            {guilds.map((guild) => (
-              <Card
-                key={guild.id}
-                isPressable
-                className="papo-card"
-                onPress={() => setCurrentGuildId(guild.id)}
-              >
-                <Card.Content className="flex flex-row items-center gap-4 p-5">
-                  <Avatar src={guildIconUrl(guild)} name={guild.name} radius="lg" />
-                  <div>
-                    <div className="text-lg font-semibold">{guild.name}</div>
-                    <div className="text-sm text-white/50">ID: {guild.id}</div>
-                  </div>
-                </Card.Content>
-              </Card>
-            ))}
-          </div>
+      <div className="mx-auto flex min-h-screen max-w-6xl flex-col items-center justify-center px-6 py-12">
+        <h1 className="mb-2 text-3xl font-bold tracking-tight">Wähle einen Server</h1>
+        <p className="mb-8 text-default-500">Wähle einen Discord-Server aus, um das Dashboard zu öffnen.</p>
+        <div className="grid w-full gap-4 sm:grid-cols-2 xl:grid-cols-3">
+          {guilds.map((guild) => (
+            <Card key={guild.id} isPressable className="border border-default-100 bg-default-50/20 transition-all hover:border-primary-300" onPress={() => setCurrentGuildId(guild.id)}>
+              <CardContent className="flex flex-row items-center gap-4 p-5">
+                <Avatar src={guildIconUrl(guild)} name={guild.name} radius="lg" size="lg" />
+                <div className="min-w-0">
+                  <div className="truncate text-lg font-semibold">{guild.name}</div>
+                  <div className="text-small text-default-400">ID: {guild.id}</div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
         </div>
       </div>
     );
   }
 
   return (
-    <div className="papo-shell">
-      <div className="grid min-h-screen lg:grid-cols-[280px_minmax(0,1fr)]">
-        <aside className="papo-sidebar flex flex-col gap-5 px-4 py-6">
-          <div className="flex items-center gap-3 px-2">
-            <div className="papo-logo">P</div>
-            <div>
-              <div className="text-2xl font-bold">Papo Control</div>
-              <div className="text-xs uppercase tracking-[0.22em] text-white/50">Guild Management</div>
+    <div className="flex h-screen overflow-hidden">
+      <div className="hidden w-72 shrink-0 lg:block">
+        <Sidebar
+          user={user}
+          guilds={guilds}
+          currentGuildId={currentGuildId}
+          section={section}
+          onSectionChange={setSection}
+          onGuildChange={setCurrentGuildId}
+          onLogout={handleLogout}
+        />
+      </div>
+
+      <main className="flex flex-1 flex-col overflow-y-auto">
+        <div className="mx-auto w-full max-w-[1520px] px-6 py-6">
+          <Topbar guildName={guildInfo?.name || selectedGuild.name} statusMessage={statusMessage}>
+            <div className="lg:hidden">
+              <Select
+                aria-label="Server auswählen"
+                className="w-48"
+                color="primary"
+                placeholder="Server"
+                selectedKeys={currentGuildId ? [currentGuildId] : []}
+                size="sm"
+                variant="bordered"
+                onSelectionChange={(keys) => { const v = [...keys][0]; if (v) setCurrentGuildId(String(v)); }}
+              >
+                {guilds.map((g) => (
+                  <SelectItem key={g.id}>{g.name}</SelectItem>
+                ))}
+              </Select>
             </div>
-          </div>
+          </Topbar>
 
-          <div className="flex flex-col gap-2">
-            {navItems
-              .filter((item) => (item.key === 'admin' ? user?.isAdmin : true))
-              .map((item) => (
-                <Button
-                  key={item.key}
-                  className="papo-nav-button justify-start border border-white/5 bg-white/[0.02] px-4 text-sm font-semibold text-white/70"
-                  data-active={section === item.key}
-                  radius="lg"
-                  startContent={item.icon}
-                  variant="flat"
-                  onPress={() => setSection(item.key)}
-                >
-                  {item.label}
-                </Button>
-              ))}
-          </div>
-
-          <Card className="papo-card mt-auto">
-            <Card.Content className="gap-3 p-4">
-              <div className="text-xs uppercase tracking-[0.18em] text-white/45">Angemeldet als</div>
-              <div className="font-semibold">
-                {user?.username}
-                {user?.discriminator ? `#${user.discriminator}` : ''}
-              </div>
-              <Button
-                color="danger"
-                radius="lg"
-                startContent={<Logs size={16} />}
-                variant="flat"
-                onPress={() => {
-                  window.location.href = `${appConfig.baseAuth || '/auth'}/logout`;
-                }}
-              >
-                Logout
-              </Button>
-            </Card.Content>
-          </Card>
-        </aside>
-
-        <main className="px-4 py-6 md:px-8">
-          <div className="mx-auto max-w-[1520px]">
-            <Card className="papo-card mb-5">
-              <Card.Content className="flex flex-col gap-6 p-6 md:flex-row md:items-start md:justify-between">
-                <div>
-                  <h1 className="papo-section-title">Guild Dashboard</h1>
-                  <p className="papo-section-subtitle">Komplettes HeroUI-Rework fuer dein Bot-Dashboard</p>
-                </div>
-                <div className="w-full max-w-sm">
-                  <label className="block text-sm text-white/55">
-                    Guild
-                    <select
-                      className="mt-2 w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none"
-                      value={currentGuildId}
-                      onChange={(event) => setCurrentGuildId(event.target.value)}
-                    >
-                      {guilds.map((guild) => (
-                        <option key={guild.id} value={guild.id}>
-                          {guild.name}
-                        </option>
-                      ))}
-                    </select>
-                  </label>
-                  {statusMessage ? <div className="mt-2 text-sm text-warning-300">{statusMessage}</div> : null}
-                </div>
-              </Card.Content>
-            </Card>
-
-            {section === 'overview' && (
-              <div className="space-y-5">
-                <Card className="papo-card">
-                  <Card.Content className="flex flex-col gap-5 p-5 xl:flex-row xl:items-center xl:justify-between">
-                    <div className="flex min-w-0 items-center gap-4">
-                      <Avatar className="h-20 w-20" radius="lg" src={guildIconUrl(selectedGuild)} />
-                      <div className="min-w-0">
-                        <div className="truncate text-3xl font-black">{guildInfo?.name || selectedGuild.name}</div>
-                        <div className="mt-1 text-sm text-white/50">ID: {guildInfo?.id || selectedGuild.id}</div>
-                        <div className="mt-3 flex flex-wrap gap-2">
-                          {Object.entries(moduleFlags).map(([key, enabled]) => (
-                            <Chip key={key} color={enabled ? 'warning' : 'default'} size="sm" variant="bordered">
-                              {key.replace('Enabled', '').toUpperCase()}
-                            </Chip>
-                          ))}
-                        </div>
+          {section === 'overview' && (
+            <div className="space-y-6">
+              <Card className="border border-default-100 bg-gradient-to-r from-default-50/40 to-background">
+                <CardContent className="flex flex-col gap-5 p-6 xl:flex-row xl:items-center xl:justify-between">
+                  <div className="flex min-w-0 items-center gap-5">
+                    <Avatar className="size-20" radius="lg" src={guildIconUrl(selectedGuild)} />
+                    <div className="min-w-0">
+                      <div className="truncate text-3xl font-black tracking-tight">{guildInfo?.name || selectedGuild.name}</div>
+                      <div className="mt-1 text-small text-default-400">ID: {guildInfo?.id || selectedGuild.id}</div>
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        {Object.entries(moduleFlags).map(([key, enabled]) => (
+                          <Chip key={key} color={enabled ? 'primary' : 'default'} size="sm" variant="flat">
+                            {key.replace('Enabled', '').toUpperCase()}
+                          </Chip>
+                        ))}
                       </div>
                     </div>
-                    <Chip
-                      color="success"
-                      radius="sm"
-                      startContent={<Bot size={14} />}
-                      variant="dot"
-                    >
-                      Bot aktiv
-                    </Chip>
-                  </Card.Content>
+                  </div>
+                  <Chip color="success" radius="sm" startContent={<Bot size={14} />} variant="dot">
+                    Bot aktiv
+                  </Chip>
+                </CardContent>
+              </Card>
+
+              <div className="grid gap-5 xl:grid-cols-3">
+                <Card className="border border-default-100 bg-gradient-to-b from-default-50/40 to-background">
+                  <CardHeader className="px-5 pt-5 pb-0">
+                    <h2 className="text-xl font-bold">Guild Infos</h2>
+                    <p className="mt-1 text-small text-default-400">Wichtige Daten auf einen Blick</p>
+                  </CardHeader>
+                  <CardContent className="gap-4 p-5">
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      <StatCard icon={<UserRound size={18} />} label="Owner" value={guildInfo?.owner?.tag || '-'} />
+                      <StatCard icon={<CalendarDays size={18} />} label="Erstellt" value={formatDate(guildInfo?.createdAt)} />
+                      <StatCard icon={<Users size={18} />} label="Member" value={String(guildInfo?.memberCount ?? 0)} />
+                      <StatCard icon={<Cable size={18} />} label="Channels" value={`${guildInfo?.textCount || 0} / ${guildInfo?.voiceCount || 0}`} />
+                      <StatCard icon={<Ticket size={18} />} label="Offene Tickets" value={String(overview?.tickets?.open ?? 0)} />
+                      <StatCard icon={<Shield size={18} />} label="IP / Closed" value={`${overview?.tickets?.inProgress ?? 0} / ${overview?.tickets?.closed ?? 0}`} />
+                    </div>
+                    <Button className="justify-between" endContent={<ChevronRight size={16} />} variant="bordered" onPress={() => setSection('serverstats')}>
+                      Server Statistiken ansehen
+                    </Button>
+                  </CardContent>
                 </Card>
 
-                <div className="grid gap-5 xl:grid-cols-[1.05fr_1.05fr_1fr]">
-                  <InfoPanel
-                    title="Guild Infos"
-                    actionLabel="Server Statistiken ansehen"
-                    onAction={() => setSection('serverstats')}
-                    items={[
-                      { icon: <UserRound size={18} />, label: 'Owner', value: guildInfo?.owner?.tag || '-' },
-                      { icon: <CalendarDays size={18} />, label: 'Erstellt', value: formatDate(guildInfo?.createdAt) },
-                      { icon: <Users size={18} />, label: 'Member', value: String(guildInfo?.memberCount ?? 0) },
-                      { icon: <Cable size={18} />, label: 'Channels', value: `${guildInfo?.textCount || 0} Text / ${guildInfo?.voiceCount || 0} Voice` },
-                      { icon: <Ticket size={18} />, label: 'Tickets offen', value: String(overview?.tickets?.open ?? 0) },
-                      { icon: <Shield size={18} />, label: 'Tickets IP / Closed', value: `${overview?.tickets?.inProgress ?? 0} / ${overview?.tickets?.closed ?? 0}` }
-                    ]}
-                  />
+                <Card className="border border-default-100 bg-gradient-to-b from-default-50/40 to-background">
+                  <CardHeader className="px-5 pt-5 pb-0">
+                    <h2 className="text-xl font-bold">Activity</h2>
+                    <p className="mt-1 text-small text-default-400">Live-Statistiken aus deinem Bot</p>
+                  </CardHeader>
+                  <CardContent className="flex flex-col gap-3 p-5">
+                    <ActivityTile icon={<MessageSquare size={18} />} label="Messages (24h)" value={activity?.messages24h ?? 0} />
+                    <ActivityTile icon={<Command size={18} />} label="Commands (24h)" value={activity?.commands24h ?? 0} />
+                    <ActivityTile icon={<Shield size={18} />} label="Automod (24h)" value={activity?.automod24h ?? 0} />
+                    <Button className="mt-2 justify-between" endContent={<ChevronRight size={16} />} variant="bordered" onPress={() => setSection('settings')}>
+                      Alle Logs anzeigen
+                    </Button>
+                  </CardContent>
+                </Card>
 
-                  <Card className="papo-card">
-                    <Card.Header className="px-5 pt-5 pb-0">
-                      <div>
-                        <h2 className="text-2xl font-bold">Activity</h2>
-                        <p className="mt-1 text-sm text-white/50">Live-Statistiken aus deinem Bot</p>
-                      </div>
-                    </Card.Header>
-                    <Card.Content className="gap-3 p-5">
-                      <ActivityTile icon={<MessageSquare size={18} />} kind="messages" label="Messages (24h)" value={activity?.messages24h ?? 0} />
-                      <ActivityTile icon={<Command size={18} />} kind="commands" label="Commands (24h)" value={activity?.commands24h ?? 0} />
-                      <ActivityTile icon={<Shield size={18} />} kind="automod" label="Automod (24h)" value={activity?.automod24h ?? 0} />
-                      <Button className="mt-2 justify-between" endContent={<ChevronRight size={16} />} variant="bordered" onPress={() => setSection('settings')}>
-                        Alle Logs anzeigen
-                      </Button>
-                    </Card.Content>
-                  </Card>
-
-                  <Card className="papo-card">
-                    <Card.Header className="flex items-center justify-between px-5 pt-5 pb-0">
-                      <div>
-                        <h2 className="text-2xl font-bold">Guild Logs</h2>
-                        <p className="mt-1 text-sm text-white/50">Neueste Ereignisse</p>
-                      </div>
-                      <Button endContent={<ChevronRight size={16} />} size="sm" variant="light" onPress={() => setSection('settings')}>
-                        Alle anzeigen
-                      </Button>
-                    </Card.Header>
-                    <Card.Content className="p-5">
-                      <div className="papo-scroll max-h-[360px] space-y-3 overflow-auto pr-2">
-                        {logs.length ? (
-                          logs.map((log, index) => (
-                            <Card key={`${log.timestamp}-${index}`} className="border border-white/5 bg-white/[0.03]">
-                              <Card.Content className="gap-2 p-4">
-                                <div className="flex items-center gap-2">
-                                  <Chip color={log.level === 'warn' ? 'warning' : log.level === 'error' ? 'danger' : 'default'} size="sm" variant="bordered">
-                                    {(log.level || 'info').toUpperCase()}
-                                  </Chip>
-                                  <span className="text-xs text-white/45">{formatDate(log.timestamp)}</span>
-                                </div>
-                                <div className="text-sm text-white/80">{log.category ? `[${log.category}] ` : ''}{log.message || '-'}</div>
-                              </Card.Content>
-                            </Card>
-                          ))
-                        ) : (
-                          <div className="text-sm text-white/45">Keine Logs</div>
-                        )}
-                      </div>
-                    </Card.Content>
-                  </Card>
-                </div>
-
-                <Card className="papo-card">
-                  <Card.Header className="px-5 pt-5 pb-0">
+                <Card className="border border-default-100 bg-gradient-to-b from-default-50/40 to-background">
+                  <CardHeader className="flex items-start justify-between px-5 pt-5 pb-0">
                     <div>
-                      <h2 className="text-2xl font-bold">Schnellzugriff</h2>
-                      <p className="mt-1 text-sm text-white/50">Die wichtigsten Bereiche deines Dashboards</p>
+                      <h2 className="text-xl font-bold">Guild Logs</h2>
+                      <p className="mt-1 text-small text-default-400">Neueste Ereignisse</p>
                     </div>
-                  </Card.Header>
-                  <Card.Content className="grid gap-4 p-5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
-                    {navItems
-                      .filter((item) => !['overview', 'admin'].includes(item.key))
-                      .slice(0, 6)
-                      .map((item) => (
-                        <Card key={item.key} isPressable className="border border-white/6 bg-white/[0.03]" onPress={() => setSection(item.key)}>
-                          <Card.Content className="gap-3 p-4">
-                            <div className="papo-icon-badge">{item.icon}</div>
-                            <div className="font-semibold">{item.label}</div>
-                            <div className="text-sm text-white/45">HeroUI-Komponenten fuer den Bereich {item.label}</div>
-                          </Card.Content>
+                    <Button endContent={<ChevronRight size={16} />} size="sm" variant="light" onPress={() => setSection('settings')}>
+                      Alle
+                    </Button>
+                  </CardHeader>
+                  <CardContent className="p-5">
+                    <div className="scrollbar-thin max-h-[360px] space-y-3 overflow-auto pr-1">
+                      {logs.length ? logs.map((log, i) => (
+                        <Card key={`${log.timestamp}-${i}`} className="border border-default-100 bg-default-50/20">
+                          <CardContent className="flex flex-col gap-2 p-4">
+                            <div className="flex items-center gap-2">
+                              <Chip color={log.level === 'warn' ? 'warning' : log.level === 'error' ? 'danger' : 'default'} size="sm" variant="flat">
+                                {(log.level || 'info').toUpperCase()}
+                              </Chip>
+                              <span className="text-tiny text-default-400">{formatDate(log.timestamp)}</span>
+                            </div>
+                            <div className="text-small text-foreground/80">{log.category ? `[${log.category}] ` : ''}{log.message || '-'}</div>
+                          </CardContent>
                         </Card>
-                      ))}
-                  </Card.Content>
+                      )) : (
+                        <p className="text-small text-default-400">Keine Logs</p>
+                      )}
+                    </div>
+                  </CardContent>
                 </Card>
               </div>
-            )}
 
-            {section === 'tickets' && (
-              <SectionCard title="Ticketsystem" subtitle="Ticket-Übersicht, Pipeline, SLA, Automationen und Knowledge Base.">
-                <Tabs
-                  aria-label="Ticket Tabs"
-                  color="warning"
-                  selectedKey={ticketTab}
-                  variant="bordered"
-                  onSelectionChange={(key) => setTicketTab(String(key))}
-                >
-                  <Tab key="overview" title="Übersicht" />
-                  <Tab key="pipeline" title="Pipeline" />
-                  <Tab key="sla" title="SLA" />
-                  <Tab key="automations" title="Automationen" />
-                  <Tab key="kb" title="Knowledge Base" />
-                </Tabs>
-
-                {ticketTab === 'overview' && (
-                  <div className="mt-5 grid gap-4 xl:grid-cols-2">
-                    <ListCard title="Offene Tickets" items={tickets.map((ticket) => `${ticket.topic || 'Ticket'} · ${ticket.status || 'open'}`)} />
-                    <ListCard title="Support-Übersicht" items={tickets.map((ticket) => `${ticket.category || 'Allgemein'} · ${formatDate(ticket.createdAt)}`)} />
-                  </div>
-                )}
-
-                {ticketTab === 'pipeline' && (
-                  <div className="mt-5 grid gap-4 lg:grid-cols-2 2xl:grid-cols-4">
-                    {['neu', 'in_bearbeitung', 'warten_auf_user', 'erledigt'].map((state) => (
-                      <ListCard
-                        key={state}
-                        title={state.replaceAll('_', ' ')}
-                        items={(pipeline[state] || []).map((ticket) => ticket.topic || ticket.id)}
-                      />
-                    ))}
-                  </div>
-                )}
-
-                {ticketTab === 'sla' && (
-                  <div className="mt-5 grid gap-4 xl:grid-cols-2">
-                    <ListCard
-                      title="SLA pro Supporter"
-                      items={(sla.supporters || []).map((row: any) => `${row.supporter || '-'} · ${row.tickets || 0} Tickets · ${row.ttc || '-'} TTC · ${row.ttfr || '-'} TTFR`)}
-                    />
-                    <ListCard
-                      title="SLA pro Tag"
-                      items={(sla.days || []).map((row: any) => `${row.date || '-'} · ${row.tickets || 0} Tickets · ${row.ttc || '-'} TTC · ${row.ttfr || '-'} TTFR`)}
-                    />
-                  </div>
-                )}
-
-                {ticketTab === 'automations' && (
-                  <div className="mt-5 grid gap-4 xl:grid-cols-[1fr_420px]">
-                    <ListCard title="Regeln" items={automations.map((rule) => `${rule.name || 'Automation'} · ${rule.active === false ? 'inaktiv' : 'aktiv'}`)} />
-                    <FormCard title="Neue Automation">
-                      <Input label="Name" value={automationDraft.name} onValueChange={(value) => setAutomationDraft((state) => ({ ...state, name: value }))} />
-                      <Input label="Kategorie / Zustand" value={automationDraft.conditionValue} onValueChange={(value) => setAutomationDraft((state) => ({ ...state, conditionValue: value }))} />
-                      <TextArea label="Aktion / Nachricht" value={automationDraft.actionValue} onValueChange={(value) => setAutomationDraft((state) => ({ ...state, actionValue: value }))} />
-                      <Button color="warning" onPress={saveAutomation}>Automation speichern</Button>
-                    </FormCard>
-                  </div>
-                )}
-
-                {ticketTab === 'kb' && (
-                  <div className="mt-5 grid gap-4 xl:grid-cols-[1fr_420px]">
-                    <ListCard title="Artikel" items={kbArticles.map((article) => `${article.title || 'Artikel'} · ${(article.keywords || []).join(', ')}`)} />
-                    <FormCard title="Neuer KB-Artikel">
-                      <Input label="Titel" value={kbDraft.title} onValueChange={(value) => setKbDraft((state) => ({ ...state, title: value }))} />
-                      <Input label="Keywords" value={kbDraft.keywords} onValueChange={(value) => setKbDraft((state) => ({ ...state, keywords: value }))} />
-                      <TextArea label="Inhalt" minRows={5} value={kbDraft.content} onValueChange={(value) => setKbDraft((state) => ({ ...state, content: value }))} />
-                      <Button color="warning" onPress={saveKbArticle}>Artikel speichern</Button>
-                    </FormCard>
-                  </div>
-                )}
-              </SectionCard>
-            )}
-
-            {section === 'automod' && (
-              <SettingsLayout
-                title="Automod"
-                subtitle="Filter, Logging und Sicherheit in HeroUI-Formularen."
-                onSave={() =>
-                  saveSettingsPayload(
-                    {
-                      automodEnabled: settings.automodEnabled !== false,
-                      automodConfig: settings.automodConfig || {}
-                    },
-                    'Automod gespeichert'
-                  )
-                }
-              >
-                <Switch isSelected={settings.automodEnabled !== false} onValueChange={(value) => setSettings((state) => ({ ...state, automodEnabled: value }))}>Automod aktiv</Switch>
-                <Switch isSelected={settings.automodConfig?.badWordFilter ?? false} onValueChange={(value) => setSettings((state) => ({ ...state, automodConfig: { ...(state.automodConfig || {}), badWordFilter: value } }))}>Bad-Word-Filter</Switch>
-                <Switch isSelected={settings.automodConfig?.linkFilter ?? false} onValueChange={(value) => setSettings((state) => ({ ...state, automodConfig: { ...(state.automodConfig || {}), linkFilter: value } }))}>Link-Filter</Switch>
-                <Switch isSelected={settings.automodConfig?.spamFilter ?? false} onValueChange={(value) => setSettings((state) => ({ ...state, automodConfig: { ...(state.automodConfig || {}), spamFilter: value } }))}>Spam-Filter</Switch>
-                <Input label="Log Channel ID" value={settings.automodConfig?.logChannelId || ''} onValueChange={(value) => setSettings((state) => ({ ...state, automodConfig: { ...(state.automodConfig || {}), logChannelId: value } }))} />
-                <TextArea label="Whitelist Links (Komma-getrennt)" value={(settings.automodConfig?.linkWhitelist || []).join(', ')} onValueChange={(value) => setSettings((state) => ({ ...state, automodConfig: { ...(state.automodConfig || {}), linkWhitelist: value.split(',').map((item) => item.trim()).filter(Boolean) } }))} />
-              </SettingsLayout>
-            )}
-
-            {section === 'welcome' && (
-              <SettingsLayout
-                title="Willkommen"
-                subtitle="Welcome-Embeds und Join-Nachrichten."
-                onSave={() => saveSettingsPayload({ welcomeEnabled: settings.welcomeConfig?.enabled !== false, welcomeConfig: settings.welcomeConfig || {} }, 'Welcome gespeichert')}
-              >
-                <Switch isSelected={settings.welcomeConfig?.enabled !== false} onValueChange={(value) => setSettings((state) => ({ ...state, welcomeConfig: { ...(state.welcomeConfig || {}), enabled: value } }))}>Welcome aktiv</Switch>
-                <Input label="Channel ID" value={settings.welcomeConfig?.channelId || settings.welcomeChannelId || ''} onValueChange={(value) => setSettings((state) => ({ ...state, welcomeConfig: { ...(state.welcomeConfig || {}), channelId: value } }))} />
-                <Input label="Titel" value={settings.welcomeConfig?.embedTitle || ''} onValueChange={(value) => setSettings((state) => ({ ...state, welcomeConfig: { ...(state.welcomeConfig || {}), embedTitle: value } }))} />
-                <TextArea label="Beschreibung" value={settings.welcomeConfig?.embedDescription || ''} onValueChange={(value) => setSettings((state) => ({ ...state, welcomeConfig: { ...(state.welcomeConfig || {}), embedDescription: value } }))} />
-                <Input label="Footer" value={settings.welcomeConfig?.embedFooter || ''} onValueChange={(value) => setSettings((state) => ({ ...state, welcomeConfig: { ...(state.welcomeConfig || {}), embedFooter: value } }))} />
-              </SettingsLayout>
-            )}
-
-            {section === 'dynamicvoice' && (
-              <SettingsLayout
-                title="Dynamic Voice"
-                subtitle="Voice-Lobby, Template und Limits."
-                onSave={() => saveSettingsPayload({ dynamicVoiceEnabled: settings.dynamicVoiceEnabled !== false, dynamicVoiceConfig: settings.dynamicVoiceConfig || {} }, 'Dynamic Voice gespeichert')}
-              >
-                <Switch isSelected={settings.dynamicVoiceEnabled !== false} onValueChange={(value) => setSettings((state) => ({ ...state, dynamicVoiceEnabled: value }))}>Dynamic Voice aktiv</Switch>
-                <Input label="Lobby Channel ID" value={settings.dynamicVoiceConfig?.lobbyChannelId || ''} onValueChange={(value) => setSettings((state) => ({ ...state, dynamicVoiceConfig: { ...(state.dynamicVoiceConfig || {}), lobbyChannelId: value } }))} />
-                <Input label="Kategorie ID" value={settings.dynamicVoiceConfig?.categoryId || ''} onValueChange={(value) => setSettings((state) => ({ ...state, dynamicVoiceConfig: { ...(state.dynamicVoiceConfig || {}), categoryId: value } }))} />
-                <Input label="Template" value={settings.dynamicVoiceConfig?.template || ''} onValueChange={(value) => setSettings((state) => ({ ...state, dynamicVoiceConfig: { ...(state.dynamicVoiceConfig || {}), template: value } }))} />
-              </SettingsLayout>
-            )}
-
-            {section === 'birthday' && (
-              <SettingsLayout title="Birthday" subtitle="Geburtstags-Feature und gespeicherte Einträge." onSave={saveBirthday}>
-                <Switch isSelected={birthday.config?.enabled !== false} onValueChange={(value) => setBirthday((state: any) => ({ ...state, config: { ...state.config, enabled: value } }))}>Birthday aktiv</Switch>
-                <Input label="Channel ID" value={birthday.config?.channelId || ''} onValueChange={(value) => setBirthday((state: any) => ({ ...state, config: { ...state.config, channelId: value } }))} />
-                <Input label="Sendezeit (Stunde)" type="number" value={String(birthday.config?.sendHour ?? 9)} onValueChange={(value) => setBirthday((state: any) => ({ ...state, config: { ...state.config, sendHour: Number(value || 0) } }))} />
-                <TextArea label="Template" value={birthday.config?.messageTemplate || ''} onValueChange={(value) => setBirthday((state: any) => ({ ...state, config: { ...state.config, messageTemplate: value } }))} />
-                <ListCard title="Gespeicherte Geburtstage" items={(birthday.birthdays || []).map((entry: any) => `${String(entry.birthDate || '').replace(/^--/, '')} · ${entry.userId}`)} />
-              </SettingsLayout>
-            )}
-
-            {section === 'reactionroles' && (
-              <SectionCard title="Reaction Roles" subtitle="Sets anzeigen und neue Zuordnungen anlegen.">
-                <div className="grid gap-4 xl:grid-cols-[1fr_420px]">
-                  <ListCard title="Bestehende Sets" items={reactionRoles.map((set) => `${set.title || 'Reaction Role'} · ${set.channelId || '-'}`)} />
-                  <FormCard title="Neues Set">
-                    <Input label="Titel" value={reactionDraft.title} onValueChange={(value) => setReactionDraft((state) => ({ ...state, title: value }))} />
-                    <Input label="Channel ID" value={reactionDraft.channelId} onValueChange={(value) => setReactionDraft((state) => ({ ...state, channelId: value }))} />
-                    <TextArea label="Einträge (Emoji | Role ID | Label | Beschreibung)" minRows={6} value={reactionDraft.entries} onValueChange={(value) => setReactionDraft((state) => ({ ...state, entries: value }))} />
-                    <Button color="warning" onPress={saveReactionRole}>Reaction Role speichern</Button>
-                  </FormCard>
-                </div>
-              </SectionCard>
-            )}
-
-            {section === 'statuspage' && (
-              <SectionCard title="Statuspage" subtitle="Statusseite und Service-Liste verwalten.">
-                <div className="grid gap-4 xl:grid-cols-[420px_1fr]">
-                  <FormCard title="Konfiguration">
-                    <Switch isSelected={statusDraft?.enabled !== false} onValueChange={(value) => setStatusDraft((state: any) => ({ ...(state || {}), enabled: value }))}>Statuspage aktiv</Switch>
-                    <Input label="Channel ID" value={statusDraft?.channelId || ''} onValueChange={(value) => setStatusDraft((state: any) => ({ ...(state || {}), channelId: value }))} />
-                    <Input label="Intervall (ms)" value={String(statusDraft?.intervalMs || 60000)} onValueChange={(value) => setStatusDraft((state: any) => ({ ...(state || {}), intervalMs: Number(value || 60000) }))} />
-                    <Button color="warning" onPress={saveStatuspage}>Statuspage speichern</Button>
-                  </FormCard>
-                  <ListCard
-                    title="Services"
-                    items={((statusDraft?.services || statuspage?.services || []) as StatusService[]).map((service) => `${service.name || 'Service'} · ${service.status || 'unknown'} · ${service.url || ''}`)}
-                  />
-                </div>
-              </SectionCard>
-            )}
-
-            {section === 'serverstats' && (
-              <SectionCard title="Server Stats" subtitle="Counter und Refresh-Intervall steuern.">
-                <div className="grid gap-4 xl:grid-cols-[420px_1fr]">
-                  <FormCard title="Konfiguration">
-                    <Switch isSelected={statsDraft?.enabled === true} onValueChange={(value) => setStatsDraft((state: any) => ({ ...(state || {}), enabled: value }))}>Server Stats aktiv</Switch>
-                    <Input label="Kategorie-Name" value={statsDraft?.categoryName || ''} onValueChange={(value) => setStatsDraft((state: any) => ({ ...(state || {}), categoryName: value }))} />
-                    <Input label="Refresh (Minuten)" value={String(statsDraft?.refreshMinutes || 10)} onValueChange={(value) => setStatsDraft((state: any) => ({ ...(state || {}), refreshMinutes: Number(value || 10) }))} />
-                    <Button color="warning" onPress={saveServerStats}>Server Stats speichern</Button>
-                  </FormCard>
-                  <ListCard title="Items" items={((statsDraft?.items || serverStats?.items || []) as any[]).map((item) => `${item.label || item.key || 'Stat'} · ${item.type || '-'}`)} />
-                </div>
-              </SectionCard>
-            )}
-
-            {section === 'settings' && (
-              <SettingsLayout title="Einstellungen & Logging" subtitle="Globale Guild-Settings und Log-Kategorien." onSave={() => saveSettingsPayload(settings, 'Settings gespeichert')}>
-                <Input label="Welcome Channel ID" value={settings.welcomeChannelId || ''} onValueChange={(value) => setSettings((state) => ({ ...state, welcomeChannelId: value }))} />
-                <Input label="Log Channel ID" value={settings.logChannelId || ''} onValueChange={(value) => setSettings((state) => ({ ...state, logChannelId: value }))} />
-                <Input label="Support Role ID" value={settings.supportRoleId || ''} onValueChange={(value) => setSettings((state) => ({ ...state, supportRoleId: value }))} />
-                <Switch isSelected={settings.loggingConfig?.categories?.joinLeave !== false} onValueChange={(value) => setSettings((state) => ({ ...state, loggingConfig: { ...(state.loggingConfig || {}), categories: { ...(state.loggingConfig?.categories || {}), joinLeave: value } } }))}>Join / Leave loggen</Switch>
-                <Switch isSelected={settings.loggingConfig?.categories?.messageEdit !== false} onValueChange={(value) => setSettings((state) => ({ ...state, loggingConfig: { ...(state.loggingConfig || {}), categories: { ...(state.loggingConfig?.categories || {}), messageEdit: value } } }))}>Message Edit loggen</Switch>
-                <Switch isSelected={settings.loggingConfig?.categories?.messageDelete !== false} onValueChange={(value) => setSettings((state) => ({ ...state, loggingConfig: { ...(state.loggingConfig || {}), categories: { ...(state.loggingConfig?.categories || {}), messageDelete: value } } }))}>Message Delete loggen</Switch>
-              </SettingsLayout>
-            )}
-
-            {section === 'modules' && (
-              <SectionCard title="Module" subtitle="Module direkt in HeroUI umschalten.">
-                <div className="grid gap-3 xl:grid-cols-2">
-                  {modules.map((module) => (
-                    <Card key={module.key} className="border border-white/6 bg-white/[0.03]">
-                      <Card.Content className="flex flex-row items-center justify-between gap-4 p-4">
-                        <div>
-                          <div className="font-semibold">{module.name}</div>
-                          <div className="text-sm text-white/45">{module.description || ''}</div>
-                        </div>
-                        <Switch isSelected={module.enabled} onValueChange={(value) => void toggleModule(module.key, value)} />
-                      </Card.Content>
+              <SectionCard title="Schnellzugriff" subtitle="Die wichtigsten Bereiche deines Dashboards">
+                <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
+                  {navItems.filter((item) => !['overview', 'admin'].includes(item.key)).slice(0, 6).map((item) => (
+                    <Card key={item.key} isPressable className="border border-default-100 bg-default-50/20 transition-all hover:border-primary-300" onPress={() => setSection(item.key)}>
+                      <CardContent className="flex flex-col gap-3 p-4">
+                        <div className="flex size-11 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">{item.icon}</div>
+                        <div className="font-semibold">{item.label}</div>
+                        <div className="text-tiny text-default-400">Modul verwalten</div>
+                      </CardContent>
                     </Card>
                   ))}
                 </div>
               </SectionCard>
-            )}
+            </div>
+          )}
 
-            {section === 'events' && (
-              <SectionCard title="Events" subtitle="Bestehende Events und schneller Neu-Anlage-Flow.">
-                <div className="grid gap-4 xl:grid-cols-[1fr_420px]">
-                  <div className="space-y-3">
-                    {(events || []).map((event) => (
-                      <Card key={event.id} className="border border-white/6 bg-white/[0.03]">
-                        <Card.Content className="gap-2 p-4">
-                          <div className="flex items-center justify-between gap-3">
-                            <div className="font-semibold">{event.title}</div>
-                            <Button color="danger" size="sm" variant="flat" onPress={() => deleteEvent(event.id)}>Löschen</Button>
-                          </div>
-                          <div className="text-sm text-white/45">{event.description || 'Keine Beschreibung'}</div>
-                          <div className="text-xs text-white/35">{formatDate(event.startsAt)}</div>
-                        </Card.Content>
-                      </Card>
-                    ))}
-                  </div>
-                  <FormCard title="Neues Event">
-                    <Input label="Titel" value={eventDraft.title} onValueChange={(value) => setEventDraft((state) => ({ ...state, title: value }))} />
-                    <TextArea label="Beschreibung" value={eventDraft.description} onValueChange={(value) => setEventDraft((state) => ({ ...state, description: value }))} />
-                    <Input label="Channel ID" value={eventDraft.channelId} onValueChange={(value) => setEventDraft((state) => ({ ...state, channelId: value }))} />
-                    <Input label="Start (ISO / Text)" value={eventDraft.startsAt} onValueChange={(value) => setEventDraft((state) => ({ ...state, startsAt: value }))} />
-                    <Button color="warning" onPress={saveEvent}>Event speichern</Button>
-                  </FormCard>
-                </div>
-              </SectionCard>
-            )}
+          {section === 'tickets' && (
+            <SectionCard title="Ticketsystem" subtitle="Ticket-Übersicht, Pipeline, SLA, Automationen und Knowledge Base.">
+              <Tabs aria-label="Ticket Tabs" color="primary" selectedKey={ticketTab} variant="bordered" onSelectionChange={(key) => setTicketTab(String(key))}>
+                <Tab key="overview" title="Übersicht" />
+                <Tab key="pipeline" title="Pipeline" />
+                <Tab key="sla" title="SLA" />
+                <Tab key="automations" title="Automationen" />
+                <Tab key="kb" title="Knowledge Base" />
+              </Tabs>
 
-            {section === 'admin' && user?.isAdmin && (
-              <SectionCard title="Admin" subtitle="Bot-weite Übersichten fuer Admins.">
-                <div className="grid gap-4 xl:grid-cols-2">
-                  <ListCard title="Bot Overview" items={[`Guilds: ${admin.overview?.guilds ?? '-'}`, `Aktive Guilds (24h): ${admin.overview?.activeGuilds ?? '-'}`, `Uptime: ${admin.overview?.uptime ?? '-'}`]} />
-                  <ListCard title="Letzte Admin Logs" items={(admin.logs || []).map((log: any) => `${formatDate(log.timestamp)} · ${log.message || '-'}`)} />
+              {ticketTab === 'overview' && (
+                <div className="mt-5 grid gap-4 xl:grid-cols-2">
+                  <ListPanel title="Offene Tickets">
+                    {tickets.length ? tickets.map((t, i) => (
+                      <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">{t.topic || 'Ticket'} · {t.status || 'open'}</div>
+                    )) : <p className="text-small text-default-400">Keine Tickets</p>}
+                  </ListPanel>
+                  <ListPanel title="Support-Übersicht">
+                    {tickets.length ? tickets.map((t, i) => (
+                      <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">{t.category || 'Allgemein'} · {formatDate(t.createdAt)}</div>
+                    )) : <p className="text-small text-default-400">Keine Daten</p>}
+                  </ListPanel>
                 </div>
-              </SectionCard>
-            )}
-          </div>
-        </main>
-      </div>
+              )}
+
+              {ticketTab === 'pipeline' && (
+                <div className="mt-5 grid gap-4 lg:grid-cols-2 2xl:grid-cols-4">
+                  {['neu', 'in_bearbeitung', 'warten_auf_user', 'erledigt'].map((state) => (
+                    <ListPanel key={state} title={state.replaceAll('_', ' ')}>
+                      {(pipeline[state] || []).length ? (pipeline[state] || []).map((t, i) => (
+                        <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">{t.topic || t.id}</div>
+                      )) : <p className="text-small text-default-400">Keine Tickets</p>}
+                    </ListPanel>
+                  ))}
+                </div>
+              )}
+
+              {ticketTab === 'sla' && (
+                <div className="mt-5 grid gap-4 xl:grid-cols-2">
+                  <ListPanel title="SLA pro Supporter">
+                    {(sla.supporters || []).length ? sla.supporters.map((row: any, i: number) => (
+                      <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">
+                        {row.supporter || '-'} · {row.tickets || 0} Tickets · {row.ttc || '-'} TTC · {row.ttfr || '-'} TTFR
+                      </div>
+                    )) : <p className="text-small text-default-400">Keine Daten</p>}
+                  </ListPanel>
+                  <ListPanel title="SLA pro Tag">
+                    {(sla.days || []).length ? sla.days.map((row: any, i: number) => (
+                      <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">
+                        {row.date || '-'} · {row.tickets || 0} Tickets · {row.ttc || '-'} TTC · {row.ttfr || '-'} TTFR
+                      </div>
+                    )) : <p className="text-small text-default-400">Keine Daten</p>}
+                  </ListPanel>
+                </div>
+              )}
+
+              {ticketTab === 'automations' && (
+                <div className="mt-5 grid gap-4 xl:grid-cols-[1fr_420px]">
+                  <ListPanel title="Regeln">
+                    {automations.length ? automations.map((rule, i) => (
+                      <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">
+                        {rule.name || 'Automation'} · {rule.active === false ? 'inaktiv' : 'aktiv'}
+                      </div>
+                    )) : <p className="text-small text-default-400">Keine Regeln</p>}
+                  </ListPanel>
+                  <FormPanel title="Neue Automation">
+                    <Input label="Name" value={automationDraft.name} onValueChange={(v) => setAutomationDraft((s) => ({ ...s, name: v }))} />
+                    <Input label="Kategorie / Zustand" value={automationDraft.conditionValue} onValueChange={(v) => setAutomationDraft((s) => ({ ...s, conditionValue: v }))} />
+                    <Textarea label="Aktion / Nachricht" value={automationDraft.actionValue} onValueChange={(v) => setAutomationDraft((s) => ({ ...s, actionValue: v }))} />
+                    <Button color="primary" onPress={saveAutomation}>Automation speichern</Button>
+                  </FormPanel>
+                </div>
+              )}
+
+              {ticketTab === 'kb' && (
+                <div className="mt-5 grid gap-4 xl:grid-cols-[1fr_420px]">
+                  <ListPanel title="Artikel">
+                    {kbArticles.length ? kbArticles.map((article, i) => (
+                      <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">
+                        {article.title || 'Artikel'} · {(article.keywords || []).join(', ')}
+                      </div>
+                    )) : <p className="text-small text-default-400">Keine Artikel</p>}
+                  </ListPanel>
+                  <FormPanel title="Neuer KB-Artikel">
+                    <Input label="Titel" value={kbDraft.title} onValueChange={(v) => setKbDraft((s) => ({ ...s, title: v }))} />
+                    <Input label="Keywords" value={kbDraft.keywords} onValueChange={(v) => setKbDraft((s) => ({ ...s, keywords: v }))} />
+                    <Textarea label="Inhalt" minRows={5} value={kbDraft.content} onValueChange={(v) => setKbDraft((s) => ({ ...s, content: v }))} />
+                    <Button color="primary" onPress={saveKbArticle}>Artikel speichern</Button>
+                  </FormPanel>
+                </div>
+              )}
+            </SectionCard>
+          )}
+
+          {section === 'automod' && (
+            <SectionCard title="Automod" subtitle="Filter, Logging und Sicherheit">
+              <div className="grid gap-4 xl:grid-cols-2">
+                <FormPanel title="Automod konfigurieren">
+                  <Switch isSelected={settings.automodEnabled !== false} onValueChange={(v) => setSettings((s) => ({ ...s, automodEnabled: v }))}>Automod aktiv</Switch>
+                  <Switch isSelected={settings.automodConfig?.badWordFilter ?? false} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), badWordFilter: v } }))}>Bad-Word-Filter</Switch>
+                  <Switch isSelected={settings.automodConfig?.linkFilter ?? false} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), linkFilter: v } }))}>Link-Filter</Switch>
+                  <Switch isSelected={settings.automodConfig?.spamFilter ?? false} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), spamFilter: v } }))}>Spam-Filter</Switch>
+                  <Input label="Log Channel ID" value={settings.automodConfig?.logChannelId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), logChannelId: v } }))} />
+                  <Textarea label="Whitelist Links (Komma-getrennt)" value={(settings.automodConfig?.linkWhitelist || []).join(', ')} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), linkWhitelist: v.split(',').map((x) => x.trim()).filter(Boolean) } }))} />
+                  <Divider className="my-1" />
+                  <Button color="primary" onPress={() => saveSettingsPayload({ automodEnabled: settings.automodEnabled !== false, automodConfig: settings.automodConfig || {} }, 'Automod gespeichert')}>
+                    Speichern
+                  </Button>
+                </FormPanel>
+                <div className="flex items-start justify-center p-5 text-center text-small text-default-400">
+                  Die Automod-Einstellungen werden nach dem Speichern sofort aktiv.
+                </div>
+              </div>
+            </SectionCard>
+          )}
+
+          {section === 'welcome' && (
+            <SectionCard title="Willkommen" subtitle="Welcome-Embeds und Join-Nachrichten">
+              <div className="grid gap-4 xl:grid-cols-2">
+                <FormPanel title="Willkommen konfigurieren">
+                  <Switch isSelected={settings.welcomeConfig?.enabled !== false} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), enabled: v } }))}>Welcome aktiv</Switch>
+                  <Input label="Channel ID" value={settings.welcomeConfig?.channelId || settings.welcomeChannelId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), channelId: v } }))} />
+                  <Input label="Titel" value={settings.welcomeConfig?.embedTitle || ''} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedTitle: v } }))} />
+                  <Textarea label="Beschreibung" value={settings.welcomeConfig?.embedDescription || ''} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedDescription: v } }))} />
+                  <Input label="Footer" value={settings.welcomeConfig?.embedFooter || ''} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedFooter: v } }))} />
+                  <Divider className="my-1" />
+                  <Button color="primary" onPress={() => saveSettingsPayload({ welcomeConfig: settings.welcomeConfig || {} }, 'Welcome gespeichert')}>
+                    Speichern
+                  </Button>
+                </FormPanel>
+              </div>
+            </SectionCard>
+          )}
+
+          {section === 'dynamicvoice' && (
+            <SectionCard title="Dynamic Voice" subtitle="Voice-Lobby, Template und Limits">
+              <div className="grid gap-4 xl:grid-cols-2">
+                <FormPanel title="Dynamic Voice konfigurieren">
+                  <Switch isSelected={settings.dynamicVoiceEnabled !== false} onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceEnabled: v }))}>Dynamic Voice aktiv</Switch>
+                  <Input label="Lobby Channel ID" value={settings.dynamicVoiceConfig?.lobbyChannelId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceConfig: { ...(s.dynamicVoiceConfig || {}), lobbyChannelId: v } }))} />
+                  <Input label="Kategorie ID" value={settings.dynamicVoiceConfig?.categoryId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceConfig: { ...(s.dynamicVoiceConfig || {}), categoryId: v } }))} />
+                  <Input label="Template" value={settings.dynamicVoiceConfig?.template || ''} onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceConfig: { ...(s.dynamicVoiceConfig || {}), template: v } }))} />
+                  <Divider className="my-1" />
+                  <Button color="primary" onPress={() => saveSettingsPayload({ dynamicVoiceConfig: settings.dynamicVoiceConfig || {} }, 'Dynamic Voice gespeichert')}>
+                    Speichern
+                  </Button>
+                </FormPanel>
+              </div>
+            </SectionCard>
+          )}
+
+          {section === 'birthday' && (
+            <SectionCard title="Birthday" subtitle="Geburtstags-Feature und gespeicherte Einträge">
+              <div className="grid gap-4 xl:grid-cols-2">
+                <FormPanel title="Birthday konfigurieren">
+                  <Switch isSelected={birthday.config?.enabled !== false} onValueChange={(v) => setBirthday((s: any) => ({ ...s, config: { ...s.config, enabled: v } }))}>Birthday aktiv</Switch>
+                  <Input label="Channel ID" value={birthday.config?.channelId || ''} onValueChange={(v) => setBirthday((s: any) => ({ ...s, config: { ...s.config, channelId: v } }))} />
+                  <Input label="Sendezeit (Stunde)" type="number" value={String(birthday.config?.sendHour ?? 9)} onValueChange={(v) => setBirthday((s: any) => ({ ...s, config: { ...s.config, sendHour: Number(v || 0) } }))} />
+                  <Textarea label="Template" value={birthday.config?.messageTemplate || ''} onValueChange={(v) => setBirthday((s: any) => ({ ...s, config: { ...s.config, messageTemplate: v } }))} />
+                  <Divider className="my-1" />
+                  <Button color="primary" onPress={saveBirthday}>Speichern</Button>
+                </FormPanel>
+                <ListPanel title="Gespeicherte Geburtstage">
+                  {(birthday.birthdays || []).length ? (birthday.birthdays || []).map((entry: any, i: number) => (
+                    <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">
+                      {String(entry.birthDate || '').replace(/^--/, '')} · {entry.userId}
+                    </div>
+                  )) : <p className="text-small text-default-400">Keine Einträge</p>}
+                </ListPanel>
+              </div>
+            </SectionCard>
+          )}
+
+          {section === 'reactionroles' && (
+            <SectionCard title="Reaction Roles" subtitle="Sets anzeigen und neue Zuordnungen anlegen">
+              <div className="grid gap-4 xl:grid-cols-[1fr_420px]">
+                <ListPanel title="Bestehende Sets">
+                  {reactionRoles.length ? reactionRoles.map((set, i) => (
+                    <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">
+                      {set.title || 'Reaction Role'} · {set.channelId || '-'}
+                    </div>
+                  )) : <p className="text-small text-default-400">Keine Sets</p>}
+                </ListPanel>
+                <FormPanel title="Neues Set">
+                  <Input label="Titel" value={reactionDraft.title} onValueChange={(v) => setReactionDraft((s) => ({ ...s, title: v }))} />
+                  <Input label="Channel ID" value={reactionDraft.channelId} onValueChange={(v) => setReactionDraft((s) => ({ ...s, channelId: v }))} />
+                  <Textarea label="Einträge (Emoji | Role ID | Label)" minRows={6} value={reactionDraft.entries} onValueChange={(v) => setReactionDraft((s) => ({ ...s, entries: v }))} />
+                  <Button color="primary" onPress={saveReactionRole}>Reaction Role speichern</Button>
+                </FormPanel>
+              </div>
+            </SectionCard>
+          )}
+
+          {section === 'statuspage' && (
+            <SectionCard title="Statuspage" subtitle="Statusseite und Service-Liste verwalten">
+              <div className="grid gap-4 xl:grid-cols-[420px_1fr]">
+                <FormPanel title="Konfiguration">
+                  <Switch isSelected={statusDraft?.enabled !== false} onValueChange={(v) => setStatusDraft((s: any) => ({ ...(s || {}), enabled: v }))}>Statuspage aktiv</Switch>
+                  <Input label="Channel ID" value={statusDraft?.channelId || ''} onValueChange={(v) => setStatusDraft((s: any) => ({ ...(s || {}), channelId: v }))} />
+                  <Input label="Intervall (ms)" value={String(statusDraft?.intervalMs || 60000)} onValueChange={(v) => setStatusDraft((s: any) => ({ ...(s || {}), intervalMs: Number(v || 60000) }))} />
+                  <Button color="primary" onPress={saveStatuspage}>Statuspage speichern</Button>
+                </FormPanel>
+                <ListPanel title="Services">
+                  {((statusDraft?.services || statuspage?.services || []) as StatusService[]).length ? ((statusDraft?.services || statuspage?.services || []) as StatusService[]).map((service, i) => (
+                    <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">
+                      {service.name || 'Service'} · {service.status || 'unknown'} · {service.url || ''}
+                    </div>
+                  )) : <p className="text-small text-default-400">Keine Services</p>}
+                </ListPanel>
+              </div>
+            </SectionCard>
+          )}
+
+          {section === 'serverstats' && (
+            <SectionCard title="Server Stats" subtitle="Counter und Refresh-Intervall steuern">
+              <div className="grid gap-4 xl:grid-cols-[420px_1fr]">
+                <FormPanel title="Konfiguration">
+                  <Switch isSelected={statsDraft?.enabled === true} onValueChange={(v) => setStatsDraft((s: any) => ({ ...(s || {}), enabled: v }))}>Server Stats aktiv</Switch>
+                  <Input label="Kategorie-Name" value={statsDraft?.categoryName || ''} onValueChange={(v) => setStatsDraft((s: any) => ({ ...(s || {}), categoryName: v }))} />
+                  <Input label="Refresh (Minuten)" value={String(statsDraft?.refreshMinutes || 10)} onValueChange={(v) => setStatsDraft((s: any) => ({ ...(s || {}), refreshMinutes: Number(v || 10) }))} />
+                  <Button color="primary" onPress={saveServerStats}>Server Stats speichern</Button>
+                </FormPanel>
+                <ListPanel title="Items">
+                  {((statsDraft?.items || serverStats?.items || []) as any[]).length ? ((statsDraft?.items || serverStats?.items || []) as any[]).map((item, i) => (
+                    <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">
+                      {item.label || item.key || 'Stat'} · {item.type || '-'}
+                    </div>
+                  )) : <p className="text-small text-default-400">Keine Items</p>}
+                </ListPanel>
+              </div>
+            </SectionCard>
+          )}
+
+          {section === 'settings' && (
+            <SectionCard title="Einstellungen & Logging" subtitle="Globale Guild-Settings und Log-Kategorien">
+              <div className="grid gap-4 xl:grid-cols-2">
+                <FormPanel title="Einstellungen">
+                  <Input label="Welcome Channel ID" value={settings.welcomeChannelId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeChannelId: v }))} />
+                  <Input label="Log Channel ID" value={settings.logChannelId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, logChannelId: v }))} />
+                  <Input label="Support Role ID" value={settings.supportRoleId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, supportRoleId: v }))} />
+                  <Switch isSelected={settings.loggingConfig?.categories?.joinLeave !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), joinLeave: v } } }))}>Join / Leave loggen</Switch>
+                  <Switch isSelected={settings.loggingConfig?.categories?.messageEdit !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), messageEdit: v } } }))}>Message Edit loggen</Switch>
+                  <Switch isSelected={settings.loggingConfig?.categories?.messageDelete !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), messageDelete: v } } }))}>Message Delete loggen</Switch>
+                  <Divider className="my-1" />
+                  <Button color="primary" onPress={() => saveSettingsPayload(settings, 'Settings gespeichert')}>Speichern</Button>
+                </FormPanel>
+              </div>
+            </SectionCard>
+          )}
+
+          {section === 'modules' && (
+            <SectionCard title="Module" subtitle="Module direkt umschalten">
+              <div className="grid gap-3 sm:grid-cols-2">
+                {modules.map((module) => (
+                  <Card key={module.key} className="border border-default-100 bg-default-50/20">
+                    <CardContent className="flex flex-row items-center justify-between gap-4 p-4">
+                      <div className="min-w-0">
+                        <div className="font-semibold">{module.name}</div>
+                        <div className="text-small text-default-400">{module.description || ''}</div>
+                      </div>
+                      <Switch isSelected={module.enabled} onValueChange={(v) => void toggleModule(module.key, v)} />
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </SectionCard>
+          )}
+
+          {section === 'events' && (
+            <SectionCard title="Events" subtitle="Bestehende Events und schneller Neu-Anlage-Flow">
+              <div className="grid gap-4 xl:grid-cols-[1fr_420px]">
+                <ListPanel title="Bestehende Events">
+                  {(events || []).length ? (events || []).map((event) => (
+                    <Card key={event.id} className="mb-3 border border-default-100 bg-default-50/20">
+                      <CardContent className="flex flex-col gap-2 p-4">
+                        <div className="flex items-center justify-between gap-3">
+                          <div className="font-semibold">{event.title}</div>
+                          <Button color="danger" size="sm" variant="flat" onPress={() => deleteEvent(event.id)}>Löschen</Button>
+                        </div>
+                        <div className="text-small text-default-400">{event.description || 'Keine Beschreibung'}</div>
+                        <div className="text-tiny text-default-500">{formatDate(event.startsAt)}</div>
+                      </CardContent>
+                    </Card>
+                  )) : <p className="text-small text-default-400">Keine Events</p>}
+                </ListPanel>
+                <FormPanel title="Neues Event">
+                  <Input label="Titel" value={eventDraft.title} onValueChange={(v) => setEventDraft((s) => ({ ...s, title: v }))} />
+                  <Textarea label="Beschreibung" value={eventDraft.description} onValueChange={(v) => setEventDraft((s) => ({ ...s, description: v }))} />
+                  <Input label="Channel ID" value={eventDraft.channelId} onValueChange={(v) => setEventDraft((s) => ({ ...s, channelId: v }))} />
+                  <Input label="Start (ISO)" value={eventDraft.startsAt} onValueChange={(v) => setEventDraft((s) => ({ ...s, startsAt: v }))} />
+                  <Button color="primary" onPress={saveEvent}>Event speichern</Button>
+                </FormPanel>
+              </div>
+            </SectionCard>
+          )}
+
+          {section === 'admin' && user?.isAdmin && (
+            <SectionCard title="Admin" subtitle="Bot-weite Übersichten">
+              <div className="grid gap-4 xl:grid-cols-2">
+                <ListPanel title="Bot Overview">
+                  <div className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">Guilds: {admin.overview?.guilds ?? '-'}</div>
+                  <div className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">Aktive Guilds (24h): {admin.overview?.activeGuilds ?? '-'}</div>
+                  <div className="rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">Uptime: {admin.overview?.uptime ?? '-'}</div>
+                </ListPanel>
+                <ListPanel title="Letzte Admin Logs">
+                  {(admin.logs || []).length ? (admin.logs || []).map((log: any, i: number) => (
+                    <div key={i} className="mb-2 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">
+                      {formatDate(log.timestamp)} · {log.message || '-'}
+                    </div>
+                  )) : <p className="text-small text-default-400">Keine Logs</p>}
+                </ListPanel>
+              </div>
+            </SectionCard>
+          )}
+        </div>
+      </main>
     </div>
   );
 }
 
-function SectionCard(props: { title: string; subtitle: string; children: React.ReactNode }) {
-  return (
-    <Card className="papo-card">
-      <Card.Header className="px-5 pt-5 pb-0">
-        <div>
-          <h2 className="text-2xl font-bold">{props.title}</h2>
-          <p className="mt-1 text-sm text-white/50">{props.subtitle}</p>
-        </div>
-      </Card.Header>
-      <Card.Content className="p-5">{props.children}</Card.Content>
-    </Card>
-  );
-}
-
-function FormCard(props: { title: string; children: React.ReactNode }) {
-  return (
-    <Card className="border border-white/6 bg-white/[0.03]">
-      <Card.Header className="px-5 pt-5 pb-0">
-        <div className="text-lg font-semibold">{props.title}</div>
-      </Card.Header>
-      <Card.Content className="gap-4 p-5">{props.children}</Card.Content>
-    </Card>
-  );
-}
-
-function ListCard(props: { title: string; items: string[] }) {
-  return (
-    <Card className="border border-white/6 bg-white/[0.03]">
-      <Card.Header className="px-5 pt-5 pb-0">
-        <div className="text-lg font-semibold">{props.title}</div>
-      </Card.Header>
-      <Card.Content className="p-5">
-        <div className="papo-scroll max-h-[460px] space-y-3 overflow-auto pr-1">
-          {props.items.length ? props.items.map((item, index) => <div key={`${item}-${index}`} className="rounded-xl border border-white/6 bg-white/[0.02] px-4 py-3 text-sm text-white/75">{item}</div>) : <div className="text-sm text-white/45">Keine Daten</div>}
-        </div>
-      </Card.Content>
-    </Card>
-  );
-}
-
-function InfoPanel(props: { title: string; items: Array<{ icon: React.ReactNode; label: string; value: string }>; actionLabel: string; onAction: () => void }) {
-  return (
-    <Card className="papo-card">
-      <Card.Header className="px-5 pt-5 pb-0">
-        <div>
-          <h2 className="text-2xl font-bold">{props.title}</h2>
-          <p className="mt-1 text-sm text-white/50">Wichtige Guild-Daten auf einen Blick</p>
-        </div>
-      </Card.Header>
-      <Card.Content className="gap-4 p-5">
-        <div className="grid gap-3 md:grid-cols-2">
-          {props.items.map((item) => (
-            <Card key={item.label} className="border border-white/6 bg-white/[0.03]">
-              <Card.Content className="gap-3 p-4">
-                <div className="flex items-center gap-2 text-sm uppercase tracking-[0.14em] text-white/45">
-                  <span className="text-warning-300">{item.icon}</span>
-                  {item.label}
-                </div>
-                <div className="text-xl font-bold">{item.value}</div>
-              </Card.Content>
-            </Card>
-          ))}
-        </div>
-        <Button className="justify-between" endContent={<ChevronRight size={16} />} variant="bordered" onPress={props.onAction}>
-          {props.actionLabel}
-        </Button>
-      </Card.Content>
-    </Card>
-  );
-}
-
-function ActivityTile(props: { icon: React.ReactNode; label: string; value: number; kind: 'messages' | 'commands' | 'automod' }) {
-  return (
-    <Card className="border border-white/6 bg-white/[0.03]">
-      <Card.Content className="flex flex-row items-center justify-between gap-4 p-4">
-        <div className="flex items-center gap-3">
-          <div className="papo-icon-badge">{props.icon}</div>
-          <div>
-            <div className="text-sm uppercase tracking-[0.14em] text-white/45">{props.label}</div>
-            <div className="text-2xl font-black">{props.value}</div>
-          </div>
-        </div>
-        <svg className="papo-chart" viewBox="0 0 120 40">
-          <path d={sparkPath(props.kind)} stroke={chartColor(props.kind)} />
-        </svg>
-      </Card.Content>
-    </Card>
-  );
-}
-
-function SettingsLayout(props: { title: string; subtitle: string; children: React.ReactNode; onSave: () => void | Promise<void> }) {
-  return (
-    <SectionCard title={props.title} subtitle={props.subtitle}>
-      <div className="grid gap-4 xl:grid-cols-2">
-        <FormCard title={`${props.title} konfigurieren`}>
-          {props.children}
-          <div className="my-2 h-px w-full bg-white/6" />
-          <Button color="warning" onPress={() => void props.onSave()}>
-            Speichern
-          </Button>
-        </FormCard>
-        <Card className="border border-white/6 bg-white/[0.03]">
-          <Card.Content className="items-start gap-4 p-5">
-            <div className="text-lg font-semibold">Design-Richtung</div>
-            <p className="text-sm text-white/55">
-              Dieser Bereich nutzt jetzt dieselbe HeroUI-Oberfläche wie dein Overview-Dashboard.
-              Die tieferen Spezial-Workflows aus dem alten Inline-Dashboard werden hier schrittweise in echte React-Komponenten überführt.
-            </p>
-          </Card.Content>
-        </Card>
-      </div>
-    </SectionCard>
-  );
-}
-
 export default App;
diff --git a/frontend/src/app.css b/frontend/src/app.css
index d320f20..95b5e6d 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -3,134 +3,30 @@
 
 @custom-variant dark (&:is(.dark *));
 
-:root {
-  color-scheme: dark;
-  --papo-bg: #080b12;
-  --papo-surface: #101522;
-  --papo-surface-2: #171d2b;
-  --papo-border: rgba(255, 255, 255, 0.08);
-  --papo-text: #f6efe7;
-  --papo-muted: #b6ab9b;
-  --papo-accent: #f97316;
-  --papo-accent-soft: rgba(249, 115, 22, 0.18);
-}
-
-html,
-body,
-#root {
+html, body, #root {
   min-height: 100%;
 }
 
 body {
   margin: 0;
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-  background:
-    radial-gradient(circle at top left, rgba(249, 115, 22, 0.18), transparent 28%),
-    radial-gradient(circle at top right, rgba(255, 163, 82, 0.08), transparent 24%),
-    linear-gradient(180deg, #090c14 0%, #070910 48%, #05070c 100%);
-  color: var(--papo-text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
 * {
   box-sizing: border-box;
 }
 
-.papo-shell {
-  min-height: 100vh;
-  color: var(--papo-text);
-}
-
-.papo-grid {
-  display: grid;
-  gap: 1rem;
-}
-
-.papo-card {
-  border: 1px solid var(--papo-border);
-  background: linear-gradient(180deg, rgba(18, 24, 38, 0.96), rgba(10, 14, 24, 0.94));
-  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28);
-}
-
-.papo-section-title {
-  margin: 0;
-  font-size: 1.65rem;
-  font-weight: 800;
-  letter-spacing: -0.03em;
-}
-
-.papo-section-subtitle {
-  margin: 0.35rem 0 0;
-  color: var(--papo-muted);
-  font-size: 0.95rem;
-}
-
-.papo-sidebar {
-  background:
-    linear-gradient(180deg, rgba(7, 10, 17, 0.98), rgba(6, 8, 14, 0.96));
-  border-right: 1px solid rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(18px);
-}
-
-.papo-logo {
-  width: 48px;
-  height: 48px;
-  display: grid;
-  place-items: center;
-  border-radius: 18px;
-  background: linear-gradient(140deg, #ffbf7f 0%, #f97316 62%, #d8580b 100%);
-  color: #1e1105;
-  font-size: 1.65rem;
-  font-weight: 900;
-  box-shadow: 0 18px 28px rgba(249, 115, 22, 0.32);
-}
-
-.papo-nav-button[data-active="true"] {
-  background: linear-gradient(90deg, rgba(249, 115, 22, 0.28), rgba(249, 115, 22, 0.08));
-  border-color: rgba(249, 115, 22, 0.45);
-  color: #fff6ee;
-}
-
-.papo-icon-badge {
-  width: 2.5rem;
-  height: 2.5rem;
-  display: grid;
-  place-items: center;
-  border-radius: 14px;
-  background: rgba(249, 115, 22, 0.12);
-  color: #ffb778;
-  border: 1px solid rgba(249, 115, 22, 0.18);
-}
-
-.papo-chart {
-  width: 88px;
-  height: 28px;
-}
-
-.papo-chart path {
-  fill: none;
-  stroke-width: 3;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.papo-scroll {
+.scrollbar-thin {
   scrollbar-width: thin;
-  scrollbar-color: rgba(249, 115, 22, 0.35) transparent;
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
 }
 
-.papo-scroll::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
 
-.papo-scroll::-webkit-scrollbar-thumb {
-  background: rgba(249, 115, 22, 0.3);
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
   border-radius: 999px;
 }
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..3b97e94
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,82 @@
+import { Avatar, Button, Card, CardContent, Chip, Divider } from '@heroui/react';
+import { LogOut, Server } from 'lucide-react';
+import { navItems } from '../../utils/constants';
+import type { NavKey, Guild, User } from '../../types';
+
+type Props = {
+  user: User | null;
+  guilds: Guild[];
+  currentGuildId: string;
+  section: NavKey;
+  onSectionChange: (key: NavKey) => void;
+  onGuildChange: (id: string) => void;
+  onLogout: () => void;
+};
+
+export function Sidebar({ user, guilds, currentGuildId, section, onSectionChange, onGuildChange, onLogout }: Props) {
+  return (
+    <aside className="flex h-full flex-col gap-2 border-r border-default-100 bg-gradient-to-b from-default-50/40 to-background p-4">
+      <div className="mb-4 flex items-center gap-3 px-2">
+        <div className="flex size-11 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-400 to-primary-600 text-xl font-black text-white shadow-lg shadow-primary-500/25">
+          P
+        </div>
+        <div>
+          <div className="text-lg font-bold">Papo</div>
+          <div className="text-tiny uppercase tracking-widest text-default-400">Dashboard</div>
+        </div>
+      </div>
+
+      <Card className="border border-default-100 bg-default-50/20">
+        <CardContent className="gap-2 p-3">
+          <div className="flex items-center gap-2 text-tiny text-default-500">
+            <Server size={14} />
+            Server
+          </div>
+          <select
+            className="w-full rounded-xl border border-default-200 bg-default-50 px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-primary-400"
+            value={currentGuildId}
+            onChange={(e) => onGuildChange(e.target.value)}
+          >
+            {guilds.map((g) => (
+              <option key={g.id} value={g.id}>{g.name}</option>
+            ))}
+          </select>
+        </CardContent>
+      </Card>
+
+      <Divider className="my-2" />
+
+      <nav className="flex flex-1 flex-col gap-1 overflow-y-auto">
+        {navItems
+          .filter((item) => item.key !== 'admin' || user?.isAdmin)
+          .map((item) => (
+            <Button
+              key={item.key}
+              className={`justify-start px-3 ${section === item.key ? 'bg-primary-500/15 text-primary-400 font-semibold' : 'text-default-500 hover:text-foreground'}`}
+              radius="lg"
+              variant="light"
+              startContent={item.icon}
+              onPress={() => onSectionChange(item.key)}
+            >
+              {item.label}
+            </Button>
+          ))}
+      </nav>
+
+      <Divider className="my-2" />
+
+      <Card className="border border-default-100 bg-default-50/20">
+        <CardContent className="flex flex-row items-center gap-3 p-3">
+          <Avatar name={user?.username} size="sm" />
+          <div className="flex-1 min-w-0">
+            <div className="truncate text-sm font-semibold">{user?.username}</div>
+            <div className="text-tiny text-default-400">Online</div>
+          </div>
+          <Button isIconOnly color="danger" radius="lg" size="sm" variant="light" onPress={onLogout}>
+            <LogOut size={16} />
+          </Button>
+        </CardContent>
+      </Card>
+    </aside>
+  );
+}
diff --git a/frontend/src/components/layout/Topbar.tsx b/frontend/src/components/layout/Topbar.tsx
new file mode 100644
index 0000000..409d338
--- /dev/null
+++ b/frontend/src/components/layout/Topbar.tsx
@@ -0,0 +1,24 @@
+import { Chip } from '@heroui/react';
+
+type Props = {
+  guildName: string;
+  statusMessage?: string;
+  children?: React.ReactNode;
+};
+
+export function Topbar({ guildName, statusMessage, children }: Props) {
+  return (
+    <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{guildName}</h1>
+        <p className="mt-1 text-small text-default-500">Bot-Dashboard Verwaltung</p>
+      </div>
+      <div className="flex items-center gap-3">
+        {statusMessage && (
+          <Chip color="warning" size="sm" variant="flat">{statusMessage}</Chip>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/shared/ActivityTile.tsx b/frontend/src/components/shared/ActivityTile.tsx
new file mode 100644
index 0000000..35019fe
--- /dev/null
+++ b/frontend/src/components/shared/ActivityTile.tsx
@@ -0,0 +1,26 @@
+import { Card, CardContent } from '@heroui/react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  icon: ReactNode;
+  label: string;
+  value: number;
+};
+
+export function ActivityTile({ icon, label, value }: Props) {
+  return (
+    <Card className="border border-default-100 bg-default-50/20">
+      <CardContent className="flex flex-row items-center justify-between gap-4 p-4">
+        <div className="flex items-center gap-3">
+          <div className="flex size-10 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
+            {icon}
+          </div>
+          <div>
+            <div className="text-tiny uppercase tracking-widest text-default-500">{label}</div>
+            <div className="text-2xl font-black">{value}</div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/shared/FormPanel.tsx b/frontend/src/components/shared/FormPanel.tsx
new file mode 100644
index 0000000..da7a1da
--- /dev/null
+++ b/frontend/src/components/shared/FormPanel.tsx
@@ -0,0 +1,18 @@
+import { Card, CardHeader, CardContent } from '@heroui/react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  title: string;
+  children: ReactNode;
+};
+
+export function FormPanel({ title, children }: Props) {
+  return (
+    <Card className="border border-default-100 bg-default-50/20">
+      <CardHeader className="px-5 pt-5 pb-0">
+        <h3 className="text-base font-semibold">{title}</h3>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4 px-5 py-5">{children}</CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/shared/ListPanel.tsx b/frontend/src/components/shared/ListPanel.tsx
new file mode 100644
index 0000000..fef21da
--- /dev/null
+++ b/frontend/src/components/shared/ListPanel.tsx
@@ -0,0 +1,21 @@
+import { Card, CardHeader, CardContent } from '@heroui/react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  title: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export function ListPanel({ title, children, className }: Props) {
+  return (
+    <Card className={`border border-default-100 bg-default-50/20 ${className ?? ''}`}>
+      <CardHeader className="px-5 pt-5 pb-0">
+        <h3 className="text-base font-semibold">{title}</h3>
+      </CardHeader>
+      <CardContent className="px-5 py-5">
+        {children}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/shared/LoadingSkeleton.tsx b/frontend/src/components/shared/LoadingSkeleton.tsx
new file mode 100644
index 0000000..74632a4
--- /dev/null
+++ b/frontend/src/components/shared/LoadingSkeleton.tsx
@@ -0,0 +1,34 @@
+import { Card, CardContent } from '@heroui/react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  lines?: number;
+  children?: ReactNode;
+};
+
+export function LoadingSkeleton({ lines = 3, children }: Props) {
+  if (children) {
+    return (
+      <div className="flex flex-col gap-3">
+        {Array.from({ length: lines }).map((_, i) => (
+          <Card key={i} className="animate-pulse border border-default-100 bg-default-50/30">
+            <CardContent className="p-4">{children}</CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {Array.from({ length: lines }).map((_, i) => (
+        <Card key={i} className="animate-pulse border border-default-100 bg-default-50/30">
+          <CardContent className="p-5">
+            <div className="h-4 w-3/4 rounded-lg bg-default-200/50" />
+            {i < 2 && <div className="mt-3 h-3 w-1/2 rounded-lg bg-default-200/30" />}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/components/shared/SectionCard.tsx b/frontend/src/components/shared/SectionCard.tsx
new file mode 100644
index 0000000..4c7a44c
--- /dev/null
+++ b/frontend/src/components/shared/SectionCard.tsx
@@ -0,0 +1,24 @@
+import { Card, CardHeader, CardContent } from '@heroui/react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  action?: ReactNode;
+};
+
+export function SectionCard({ title, subtitle, children, action }: Props) {
+  return (
+    <Card className="border border-default-100 bg-gradient-to-b from-default-50/40 to-background">
+      <CardHeader className="flex items-start justify-between gap-4 px-6 pt-6 pb-0">
+        <div className="min-w-0">
+          <h2 className="text-xl font-bold tracking-tight">{title}</h2>
+          {subtitle && <p className="mt-1 text-small text-default-500">{subtitle}</p>}
+        </div>
+        {action && <div className="shrink-0">{action}</div>}
+      </CardHeader>
+      <CardContent className="px-6 py-5">{children}</CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/shared/StatCard.tsx b/frontend/src/components/shared/StatCard.tsx
new file mode 100644
index 0000000..9b5c87e
--- /dev/null
+++ b/frontend/src/components/shared/StatCard.tsx
@@ -0,0 +1,22 @@
+import { Card, CardContent } from '@heroui/react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  icon: ReactNode;
+  label: string;
+  value: string;
+};
+
+export function StatCard({ icon, label, value }: Props) {
+  return (
+    <Card className="border border-default-100 bg-default-50/20">
+      <CardContent className="flex flex-col gap-2 p-4">
+        <div className="flex items-center gap-2 text-tiny uppercase tracking-widest text-default-500">
+          <span className="text-primary-400">{icon}</span>
+          {label}
+        </div>
+        <div className="text-2xl font-bold tracking-tight">{value}</div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..4d130c8
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,93 @@
+export type AppConfig = {
+  baseRoot?: string;
+  baseApi?: string;
+  baseAuth?: string;
+  baseDashboard?: string;
+  initialGuildId?: string;
+};
+
+export type User = {
+  username: string;
+  discriminator?: string;
+  isAdmin?: boolean;
+};
+
+export type Guild = {
+  id: string;
+  name: string;
+  icon?: string;
+};
+
+export type NavKey =
+  | 'overview'
+  | 'tickets'
+  | 'automod'
+  | 'welcome'
+  | 'dynamicvoice'
+  | 'birthday'
+  | 'reactionroles'
+  | 'statuspage'
+  | 'serverstats'
+  | 'settings'
+  | 'modules'
+  | 'events'
+  | 'admin';
+
+export type TicketRecord = {
+  id: string;
+  topic?: string;
+  status?: string;
+  category?: string;
+  priority?: string;
+  createdAt?: string;
+  claimedById?: string | null;
+};
+
+export type StatusService = {
+  id: string;
+  name?: string;
+  url?: string;
+  status?: string;
+  uptimePct?: number;
+  lastCheckedAt?: string;
+};
+
+export type EventItem = {
+  id: string;
+  title: string;
+  description?: string;
+  startsAt?: string;
+  reminderMinutes?: number;
+  channelId?: string;
+};
+
+export type ReactionRoleSet = {
+  id: string;
+  title?: string;
+  description?: string;
+  channelId?: string;
+  messageId?: string;
+  entries?: Array<{ emoji: string; roleId: string; label?: string; description?: string }>;
+};
+
+export type ModuleItem = {
+  key: string;
+  name: string;
+  description?: string;
+  enabled: boolean;
+};
+
+export type LogEntry = {
+  level?: string;
+  category?: string;
+  message?: string;
+  timestamp?: string;
+};
+
+export type SettingsState = Record<string, any>;
+
+export type NavItem = {
+  key: NavKey;
+  label: string;
+  icon: React.ReactNode;
+};
diff --git a/frontend/src/utils/api.ts b/frontend/src/utils/api.ts
new file mode 100644
index 0000000..ee45321
--- /dev/null
+++ b/frontend/src/utils/api.ts
@@ -0,0 +1,29 @@
+import type { AppConfig } from '../types';
+
+const config: AppConfig = (window as any).__PAPO__ || {};
+
+export function apiUrl(path: string) {
+  const base = config.baseApi || '/api';
+  return `${base}${path}`;
+}
+
+export async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(apiUrl(path), {
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(init?.headers || {})
+    }
+  });
+
+  if (response.status === 401) {
+    window.location.href = `${config.baseAuth || '/auth'}/discord`;
+    throw new Error('unauthorized');
+  }
+
+  if (!response.ok) {
+    throw new Error(`request failed: ${response.status}`);
+  }
+
+  return response.json() as Promise<T>;
+}
diff --git a/frontend/src/utils/constants.tsx b/frontend/src/utils/constants.tsx
new file mode 100644
index 0000000..d167e3e
--- /dev/null
+++ b/frontend/src/utils/constants.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  Activity, AudioLines, CalendarDays, Home, Logs, MessageSquare,
+  Puzzle, RadioTower, ScanSearch, Settings, Shield, Sparkles, Tag,
+  Ticket, Wrench
+} from 'lucide-react';
+import type { NavItem } from '../types';
+
+export const navItems: NavItem[] = [
+  { key: 'overview', label: 'Übersicht', icon: <Home size={20} /> },
+  { key: 'tickets', label: 'Ticketsystem', icon: <Ticket size={20} /> },
+  { key: 'automod', label: 'Automod', icon: <Shield size={20} /> },
+  { key: 'welcome', label: 'Willkommen', icon: <Sparkles size={20} /> },
+  { key: 'dynamicvoice', label: 'Dynamic Voice', icon: <AudioLines size={20} /> },
+  { key: 'birthday', label: 'Birthday', icon: <CalendarDays size={20} /> },
+  { key: 'reactionroles', label: 'Reaction Roles', icon: <Tag size={20} /> },
+  { key: 'statuspage', label: 'Statuspage', icon: <RadioTower size={20} /> },
+  { key: 'serverstats', label: 'Server Stats', icon: <Activity size={20} /> },
+  { key: 'settings', label: 'Einstellungen', icon: <Settings size={20} /> },
+  { key: 'modules', label: 'Module', icon: <Puzzle size={20} /> },
+  { key: 'events', label: 'Events', icon: <CalendarDays size={20} /> },
+  { key: 'admin', label: 'Admin', icon: <Wrench size={20} /> }
+];
diff --git a/frontend/src/utils/formatters.ts b/frontend/src/utils/formatters.ts
new file mode 100644
index 0000000..916f586
--- /dev/null
+++ b/frontend/src/utils/formatters.ts
@@ -0,0 +1,14 @@
+import type { Guild } from '../types';
+
+export function formatDate(value?: string | number | null) {
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value);
+  return `${date.toLocaleDateString('de-DE')} ${date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}`;
+}
+
+export function guildIconUrl(guild?: Guild | null) {
+  if (!guild) return undefined;
+  if (guild.icon) return `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`;
+  return undefined;
+}