diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 678c9c7..36be5f5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,1210 +1,60 @@
-import { useEffect, useState } from 'react';
-import {
-  Alert, Avatar, Button, Card, CardContent, CardHeader, Chip,
-  Input, Separator, Skeleton, Spinner, Switch, Tab, Tabs,
-  TextArea
-} from '@heroui/react';
-import {
-  Activity, AudioLines, Bot, Cable, CalendarDays, ChevronRight, ClipboardList,
-  Command, Home, LifeBuoy, LogIn, Logs, MessageSquare, Music, Pencil,
-  Puzzle, RadioTower, ScanSearch, Settings, Shield, Sparkles, Tag,
-  Ticket, Trash2, UserRound, Users, Wrench
-} from 'lucide-react';
-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,
-  SupportLoginConfig, SupportLoginStatus, RegisterForm, RegisterFormField,
-  RegisterApplication, MusicSession
-} from './types';
+import { useApp } from './context/AppContext';
+import { AppLayout } from './components/layout/AppLayout';
+import { GuildSelect } from './pages/GuildSelect';
+import { Dashboard } from './pages/Dashboard';
+import { Tickets } from './pages/Tickets';
+import { SupportLogin } from './pages/SupportLogin';
+import { Automod } from './pages/Automod';
+import { Welcome } from './pages/Welcome';
+import { DynamicVoice } from './pages/DynamicVoice';
+import { Birthday } from './pages/Birthday';
+import { ReactionRoles } from './pages/ReactionRoles';
+import { Statuspage } from './pages/Statuspage';
+import { ServerStats } from './pages/ServerStats';
+import { Register } from './pages/Register';
+import { MusicPage } from './pages/Music';
+import { SettingsPage } from './pages/Settings';
+import { ModulesPage } from './pages/Modules';
+import { Events } from './pages/Events';
+import { Admin } from './pages/Admin';
 
-const appConfig: AppConfig = (window as any).__PAPO__ || {};
+function AppContent() {
+  const { guilds, currentGuildId, section } = useApp();
+
+  if (!guilds.length) {
+    return <GuildSelect />;
+  }
+
+  if (!currentGuildId) {
+    return <GuildSelect />;
+  }
+
+  switch (section) {
+    case 'overview': return <Dashboard />;
+    case 'tickets': return <Tickets />;
+    case 'supportlogin': return <SupportLogin />;
+    case 'automod': return <Automod />;
+    case 'welcome': return <Welcome />;
+    case 'dynamicvoice': return <DynamicVoice />;
+    case 'birthday': return <Birthday />;
+    case 'reactionroles': return <ReactionRoles />;
+    case 'statuspage': return <Statuspage />;
+    case 'serverstats': return <ServerStats />;
+    case 'register': return <Register />;
+    case 'music': return <MusicPage />;
+    case 'settings': return <SettingsPage />;
+    case 'modules': return <ModulesPage />;
+    case 'events': return <Events />;
+    case 'admin': return <Admin />;
+    default: return <Dashboard />;
+  }
+}
 
 function App() {
-  const [loading, setLoading] = useState(true);
-  const [user, setUser] = useState<User | null>(null);
-  const [guilds, setGuilds] = useState<Guild[]>([]);
-  const [currentGuildId, setCurrentGuildId] = useState(appConfig.initialGuildId || '');
-  const [section, setSection] = useState<NavKey>('overview');
-  const [guildInfo, setGuildInfo] = useState<any>(null);
-  const [overview, setOverview] = useState<any>(null);
-  const [activity, setActivity] = useState<any>(null);
-  const [logs, setLogs] = useState<LogEntry[]>([]);
-  const [tickets, setTickets] = useState<TicketRecord[]>([]);
-  const [pipeline, setPipeline] = useState<Record<string, TicketRecord[]>>({});
-  const [sla, setSla] = useState<any>({ supporters: [], days: [] });
-  const [automations, setAutomations] = useState<any[]>([]);
-  const [kbArticles, setKbArticles] = useState<any[]>([]);
-  const [settings, setSettings] = useState<SettingsState>({});
-  const [modules, setModules] = useState<ModuleItem[]>([]);
-  const [birthday, setBirthday] = useState<any>({ config: {}, birthdays: [] });
-  const [reactionRoles, setReactionRoles] = useState<ReactionRoleSet[]>([]);
-  const [statuspage, setStatuspage] = useState<any>({ services: [] });
-  const [serverStats, setServerStats] = useState<any>({ items: [] });
-  const [events, setEvents] = useState<EventItem[]>([]);
-  const [admin, setAdmin] = useState<any>({ overview: null, activity: null, logs: [] });
-  const [statusMessage, setStatusMessage] = useState('');
-  const [ticketTab, setTicketTab] = useState('overview');
-  const [automationDraft, setAutomationDraft] = useState({ name: '', conditionValue: '', actionValue: '' });
-  const [kbDraft, setKbDraft] = useState({ title: '', keywords: '', content: '' });
-  const [eventDraft, setEventDraft] = useState({ title: '', description: '', channelId: '', startsAt: '' });
-  const [statusDraft, setStatusDraft] = useState<any>(null);
-  const [statsDraft, setStatsDraft] = useState<any>(null);
-  const [reactionDraft, setReactionDraft] = useState({ title: '', channelId: '', entries: '' });
-
-  const [supportLogin, setSupportLogin] = useState<{ config: SupportLoginConfig; status: SupportLoginStatus; supportRoleId?: string } | null>(null);
-  const [registerForms, setRegisterForms] = useState<RegisterForm[]>([]);
-  const [registerApps, setRegisterApps] = useState<RegisterApplication[]>([]);
-  const [formDraft, setFormDraft] = useState({ name: '', description: '', reviewChannelId: '', notifyRoleIds: '', fields: '' });
-  const [editingFormId, setEditingFormId] = useState<string | null>(null);
-  const [registerTab, setRegisterTab] = useState('forms');
-  const [musicStatus, setMusicStatus] = useState<{ activeGuilds: number; sessions: MusicSession[] }>({ activeGuilds: 0, sessions: [] });
-  const [kbEditDraft, setKbEditDraft] = useState<{ id: string; title: string; keywords: string; content: string } | null>(null);
-  const [automationEditDraft, setAutomationEditDraft] = useState<{ id: string; name: string; conditionValue: string; actionValue: string } | null>(null);
-  const [statusServiceDraft, setStatusServiceDraft] = useState<{ id?: string; name: string; url: string; status: string }>({ name: '', url: '', status: 'unknown' });
-  const [statsItemDraft, setStatsItemDraft] = useState<{ id?: string; label: string; type: string }>({ label: '', type: 'members' });
-  const [ticketDetail, setTicketDetail] = useState<TicketRecord | null>(null);
-  const [ticketMessages, setTicketMessages] = useState<any[]>([]);
-
-  useEffect(() => {
-    const hash = window.location.hash.replace('#', '') as NavKey;
-    if (navItems.some((item) => item.key === hash)) setSection(hash);
-  }, []);
-
-  useEffect(() => { window.location.hash = section; }, [section]);
-  useEffect(() => { void bootstrap(); }, []);
-  useEffect(() => { if (currentGuildId) void loadGuildData(currentGuildId); }, [currentGuildId]);
-
-  async function bootstrap() {
-    try {
-      const me = await apiFetch<{ user: User }>('/me');
-      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); }
-  }
-
-  async function loadGuildData(guildId: string) {
-    setStatusMessage('Lade Daten...');
-    try {
-      const [guildInfoRes, overviewRes, activityRes, logsRes, settingsRes, modulesRes,
-        birthdayRes, reactionRes, statusRes, statsRes, eventsRes, supportLoginRes,
-        registerFormsRes, registerAppsRes] = await Promise.all([
-        apiFetch<any>(`/guild/info?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/overview?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/guild/activity?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/guild/logs?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/settings?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/modules?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/birthday?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/reactionroles?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/statuspage?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/server-stats?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/events?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/tickets/support-login?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/register/forms?guildId=${encodeURIComponent(guildId)}`),
-        apiFetch<any>(`/register/apps?guildId=${encodeURIComponent(guildId)}`)
-      ]);
-      setGuildInfo(guildInfoRes.guild || null);
-      setOverview(overviewRes);
-      setMusicStatus(overviewRes.music || { activeGuilds: 0, sessions: [] });
-      setActivity(activityRes.activity || {});
-      setLogs(logsRes.logs || []);
-      setSettings(settingsRes.settings || {});
-      setModules(modulesRes.modules || []);
-      setBirthday(birthdayRes);
-      setReactionRoles(reactionRes.sets || []);
-      setStatuspage(statusRes.config || { services: [] });
-      setServerStats(statsRes.config || { items: [] });
-      setStatsDraft(statsRes.config || { items: [] });
-      setStatusDraft(statusRes.config || { services: [] });
-      setEvents(eventsRes.events || []);
-      setSupportLogin(supportLoginRes);
-      setRegisterForms(registerFormsRes.forms || []);
-      setRegisterApps(registerAppsRes.applications || []);
-      setReactionDraft({ title: '', channelId: '', entries: '' });
-      await Promise.all([loadTicketData(guildId), loadAdminData()]);
-      setStatusMessage('');
-    } catch { setStatusMessage('Daten konnten nicht geladen werden'); }
-  }
-
-  async function loadTicketData(guildId: string) {
-    const [ticketRes, pipelineRes, slaRes, automationRes, kbRes] = await Promise.all([
-      apiFetch<any>(`/tickets?guildId=${encodeURIComponent(guildId)}`),
-      apiFetch<any>(`/tickets/pipeline?guildId=${encodeURIComponent(guildId)}`),
-      apiFetch<any>(`/tickets/sla?guildId=${encodeURIComponent(guildId)}&range=30`),
-      apiFetch<any>(`/automations?guildId=${encodeURIComponent(guildId)}`),
-      apiFetch<any>(`/kb?guildId=${encodeURIComponent(guildId)}`)
-    ]);
-    setTickets(ticketRes.tickets || []);
-    setPipeline(pipelineRes.pipeline || {});
-    setSla(slaRes || { supporters: [], days: [] });
-    setAutomations(automationRes.rules || []);
-    setKbArticles(kbRes.articles || []);
-  }
-
-  async function loadAdminData() {
-    if (!user?.isAdmin) return;
-    const [overviewRes, , logsRes] = await Promise.all([
-      apiFetch<any>('/admin/overview'),
-      apiFetch<any>('/admin/activity'),
-      apiFetch<any>('/admin/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 }) });
-    setStatusMessage(okMessage);
-    await loadGuildData(currentGuildId);
-  }
-
-  async function saveBirthday() {
-    await apiFetch('/birthday', {
-      method: 'POST',
-      body: JSON.stringify({
-        guildId: currentGuildId,
-        enabled: birthday.config?.enabled ?? true,
-        channelId: birthday.config?.channelId || '',
-        sendHour: birthday.config?.sendHour || 9,
-        messageTemplate: birthday.config?.messageTemplate || ''
-      })
-    });
-    setStatusMessage('Birthday gespeichert');
-    await loadGuildData(currentGuildId);
-  }
-
-  async function saveStatuspage() {
-    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 }) });
-    setStatusMessage('Server Stats gespeichert');
-    await loadGuildData(currentGuildId);
-  }
-
-  async function saveEvent() {
-    if (!eventDraft.title) return;
-    await apiFetch('/events', {
-      method: 'POST',
-      body: JSON.stringify({
-        guildId: currentGuildId, title: eventDraft.title,
-        description: eventDraft.description, channelId: eventDraft.channelId || undefined,
-        startsAt: eventDraft.startsAt || undefined
-      })
-    });
-    setEventDraft({ title: '', description: '', channelId: '', startsAt: '' });
-    await loadGuildData(currentGuildId);
-    setStatusMessage('Event gespeichert');
-  }
-
-  async function deleteEvent(id: string) {
-    await apiFetch(`/events/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
-    await loadGuildData(currentGuildId);
-  }
-
-  async function saveReactionRole() {
-    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');
-  }
-
-  async function toggleModule(key: string, enabled: boolean) {
-    await saveSettingsPayload({ [key]: enabled }, `${key} aktualisiert`);
-  }
-
-  async function saveAutomation() {
-    await apiFetch('/automations', {
-      method: 'POST',
-      body: JSON.stringify({
-        guildId: currentGuildId, name: automationDraft.name || 'Automation',
-        condition: { category: automationDraft.conditionValue },
-        action: { type: 'reminder', message: automationDraft.actionValue || 'Reminder' }, active: true
-      })
-    });
-    setAutomationDraft({ name: '', conditionValue: '', actionValue: '' });
-    await loadTicketData(currentGuildId);
-  }
-
-  async function saveKbArticle() {
-    await apiFetch('/kb', {
-      method: 'POST',
-      body: JSON.stringify({ guildId: currentGuildId, title: kbDraft.title || 'Artikel', keywords: kbDraft.keywords, content: kbDraft.content })
-    });
-    setKbDraft({ title: '', keywords: '', content: '' });
-    await loadTicketData(currentGuildId);
-  }
-
-  async function updateKbArticle(id: string) {
-    if (!kbEditDraft) return;
-    await apiFetch(`/kb/${id}`, {
-      method: 'PUT',
-      body: JSON.stringify({ guildId: currentGuildId, title: kbEditDraft.title, keywords: kbEditDraft.keywords, content: kbEditDraft.content })
-    });
-    setKbEditDraft(null);
-    setStatusMessage('KB-Artikel aktualisiert');
-    await loadTicketData(currentGuildId);
-  }
-
-  async function deleteKbArticle(id: string) {
-    await apiFetch(`/kb/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
-    setStatusMessage('KB-Artikel gelöscht');
-    await loadTicketData(currentGuildId);
-  }
-
-  async function updateAutomation(id: string) {
-    if (!automationEditDraft) return;
-    await apiFetch(`/automations/${id}`, {
-      method: 'PUT',
-      body: JSON.stringify({ guildId: currentGuildId, name: automationEditDraft.name, condition: { category: automationEditDraft.conditionValue }, action: { type: 'reminder', message: automationEditDraft.actionValue }, active: true })
-    });
-    setAutomationEditDraft(null);
-    setStatusMessage('Automation aktualisiert');
-    await loadTicketData(currentGuildId);
-  }
-
-  async function deleteAutomation(id: string) {
-    await apiFetch(`/automations/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
-    setStatusMessage('Automation gelöscht');
-    await loadTicketData(currentGuildId);
-  }
-
-  async function saveSupportLogin() {
-    if (!supportLogin) return;
-    await apiFetch('/tickets/support-login', {
-      method: 'POST',
-      body: JSON.stringify({ guildId: currentGuildId, ...supportLogin.config })
-    });
-    setStatusMessage('Support Login gespeichert');
-    await loadGuildData(currentGuildId);
-  }
-
-  async function saveForm() {
-    const fields: RegisterFormField[] = formDraft.fields.split('\n').filter(Boolean).map((line) => {
-      const parts = line.split('|').map((s) => s.trim());
-      return { label: parts[0] || 'Feld', type: (parts[1] || 'text') as any, required: parts[2] === 'required', options: parts[3] ? parts[3].split(',').map((s) => s.trim()) : undefined };
-    });
-    const body: any = { guildId: currentGuildId, name: formDraft.name, description: formDraft.description, reviewChannelId: formDraft.reviewChannelId || undefined, notifyRoleIds: formDraft.notifyRoleIds.split(',').map((s) => s.trim()).filter(Boolean), fields, isActive: true };
-    if (editingFormId) {
-      await apiFetch(`/register/forms/${editingFormId}`, { method: 'PUT', body: JSON.stringify(body) });
-      setStatusMessage('Formular aktualisiert');
-    } else {
-      await apiFetch('/register/forms', { method: 'POST', body: JSON.stringify(body) });
-      setStatusMessage('Formular erstellt');
-    }
-    setFormDraft({ name: '', description: '', reviewChannelId: '', notifyRoleIds: '', fields: '' });
-    setEditingFormId(null);
-    await loadGuildData(currentGuildId);
-  }
-
-  async function deleteForm(id: string) {
-    await apiFetch(`/register/forms/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
-    setStatusMessage('Formular gelöscht');
-    await loadGuildData(currentGuildId);
-  }
-
-  async function sendFormPanel(formId: string) {
-    if (!supportLogin?.config?.panelChannelId) { setStatusMessage('Bitte zuerst Support Login konfigurieren'); return; }
-    await apiFetch(`/register/forms/${formId}/panel`, { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, channelId: supportLogin.config.panelChannelId }) });
-    setStatusMessage('Panel gesendet');
-  }
-
-  async function addStatusService() {
-    if (!statusServiceDraft.name) return;
-    await apiFetch('/statuspage/service', {
-      method: 'POST',
-      body: JSON.stringify({ guildId: currentGuildId, name: statusServiceDraft.name, url: statusServiceDraft.url, status: statusServiceDraft.status })
-    });
-    setStatusServiceDraft({ name: '', url: '', status: 'unknown' });
-    setStatusMessage('Service hinzugefügt');
-    await loadGuildData(currentGuildId);
-  }
-
-  async function deleteStatusService(id: string) {
-    await apiFetch(`/statuspage/service/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
-    setStatusMessage('Service entfernt');
-    await loadGuildData(currentGuildId);
-  }
-
-  async function addStatsItem() {
-    if (!statsItemDraft.label) return;
-    const draft = statsDraft || { enabled: true, categoryName: '', refreshMinutes: 10, items: [] };
-    const items = [...(draft.items || []), { key: statsItemDraft.label.toLowerCase().replace(/\s+/g, '_'), label: statsItemDraft.label, type: statsItemDraft.type }];
-    const updated = { ...draft, items };
-    setStatsDraft(updated);
-    await apiFetch('/server-stats', { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, config: updated }) });
-    setStatsItemDraft({ label: '', type: 'members' });
-    setStatusMessage('Stat-Item hinzugefügt');
-    await loadGuildData(currentGuildId);
-  }
-
-  async function deleteStatsItem(index: number) {
-    const draft = statsDraft || { enabled: true, categoryName: '', refreshMinutes: 10, items: [] };
-    const items = (draft.items || []).filter((_: any, i: number) => i !== index);
-    const updated = { ...draft, items };
-    setStatsDraft(updated);
-    await apiFetch('/server-stats', { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, config: updated }) });
-    setStatusMessage('Stat-Item entfernt');
-    await loadGuildData(currentGuildId);
-  }
-
-  async function loadTicketMessages(ticketId: string) {
-    const res = await apiFetch<any>(`/tickets/${ticketId}/messages`);
-    setTicketMessages(res.messages || []);
-  }
-
-  async function updateTicketStatus(ticketId: string, status: string) {
-    await apiFetch(`/tickets/${ticketId}/status`, { method: 'POST', body: JSON.stringify({ status }) });
-    setStatusMessage('Status aktualisiert');
-    await loadGuildData(currentGuildId);
-  }
-
-  async function closeTicket(ticketId: string) {
-    await apiFetch(`/tickets/${ticketId}/close`, { method: 'POST', body: JSON.stringify({ guildId: currentGuildId }) });
-    setStatusMessage('Ticket geschlossen');
-    await loadGuildData(currentGuildId);
-  }
-
-  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="flex min-h-screen items-center justify-center">
-        <Spinner color="primary" label="Dashboard wird geladen..." size="lg" />
-      </div>
-    );
-  }
-
-  if (!selectedGuild) {
-    return (
-      <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="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 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) => setCurrentGuildId(e.target.value)}
-              >
-                {guilds.map((g) => (
-                  <option key={g.id} value={g.id}>{g.name}</option>
-                ))}
-              </select>
-            </div>
-          </Topbar>
-
-          {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>
-                  </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>
-
-                <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="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-xl font-bold">Guild Logs</h2>
-                      <p className="mt-1 text-small text-default-400">Neueste Ereignisse</p>
-                    </div>
-                    <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>
-                      )) : (
-                        <p className="text-small text-default-400">Keine Logs</p>
-                      )}
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-
-              <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 === '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>
-
-              {ticketTab === 'overview' && (
-                <div className="mt-5 grid gap-4 xl:grid-cols-2">
-                  <ListPanel title="Offene Tickets">
-                    {tickets.length ? tickets.map((t, i) => (
-                      <Card key={i} 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">
-                            <div className="font-semibold text-small">{t.topic || 'Ticket'}</div>
-                            <Chip size="sm" variant="flat" color={t.status === 'open' ? 'warning' : t.status === 'closed' ? 'default' : 'primary'}>
-                              {t.status || 'open'}
-                            </Chip>
-                          </div>
-                          <div className="text-tiny text-default-400">
-                            {t.category || 'Allgemein'} · {formatDate(t.createdAt)}
-                            {t.claimedById ? ` · Claimed` : ''}
-                          </div>
-                          <div className="flex gap-2">
-                            <select
-                              className="rounded-lg border border-default-200 bg-default-50 px-2 py-1 text-tiny outline-none"
-                              value=""
-                              onChange={(e) => { if (e.target.value) updateTicketStatus(t.id, e.target.value); }}
-                            >
-                              <option value="">Status ändern</option>
-                              <option value="open">Open</option>
-                              <option value="in-progress">In Progress</option>
-                              <option value="waiting">Warten auf User</option>
-                              <option value="closed">Closed</option>
-                            </select>
-                            <Button size="sm" variant="flat" color="danger" onPress={() => closeTicket(t.id)}>Schließen</Button>
-                            <Button size="sm" variant="flat" onPress={() => { setTicketDetail(t); loadTicketMessages(t.id); }}>Details</Button>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    )) : <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>
-                  {ticketDetail && (
-                    <Card className="border border-default-100 xl:col-span-2">
-                      <CardHeader className="flex items-center justify-between px-5 pt-5 pb-0">
-                        <h3 className="text-lg font-bold">{ticketDetail.topic || 'Ticket-Details'}</h3>
-                        <Button size="sm" variant="light" onPress={() => setTicketDetail(null)}>Schließen</Button>
-                      </CardHeader>
-                      <CardContent className="flex flex-col gap-3 p-5">
-                        <div className="grid grid-cols-3 gap-3 text-small">
-                          <div><span className="text-default-400">Status:</span> {ticketDetail.status}</div>
-                          <div><span className="text-default-400">Priorität:</span> {ticketDetail.priority || 'normal'}</div>
-                          <div><span className="text-default-400">Kategorie:</span> {ticketDetail.category || '-'}</div>
-                        </div>
-                        <Separator className="my-1" />
-                        <h4 className="text-small font-semibold">Nachrichten ({ticketMessages.length})</h4>
-                        <div className="max-h-60 space-y-2 overflow-auto">
-                          {ticketMessages.length ? ticketMessages.map((msg, i) => (
-                            <div key={i} className="rounded-lg bg-default-100/40 px-3 py-2 text-small">
-                              <span className="text-tiny text-default-400">{msg.author?.username || msg.authorId}: </span>
-                              {msg.content || '(Embed)'}
-                            </div>
-                          )) : <p className="text-tiny text-default-400">Keine Nachrichten geladen</p>}
-                        </div>
-                      </CardContent>
-                    </Card>
-                  )}
-                </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) => (
-                        <Card key={i} className="mb-2 border border-default-100 bg-default-50/20">
-                          <CardContent className="p-3 text-small">
-                            <div className="font-medium">{t.topic || t.id}</div>
-                            <div className="flex gap-1 mt-1">
-                              <Button size="sm" variant="flat" className="!h-6 !min-w-0 !px-2 text-tiny" onPress={() => updateTicketStatus(t.id, state === 'neu' ? 'in-progress' : state === 'in_bearbeitung' ? 'warten_auf_user' : state === 'warten_auf_user' ? 'erledigt' : 'closed')}>
-                                {state === 'erledigt' ? 'Schließen' : 'Weiter'}
-                              </Button>
-                            </div>
-                          </CardContent>
-                        </Card>
-                      )) : <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) => (
-                      <Card key={i} 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">
-                            <div className="font-semibold">{rule.name || 'Automation'}</div>
-                            <Chip size="sm" variant="flat" color={rule.active !== false ? 'success' : 'default'}>
-                              {rule.active !== false ? 'Aktiv' : 'Inaktiv'}
-                            </Chip>
-                          </div>
-                          <div className="flex gap-2">
-                            <Button size="sm" variant="flat" startContent={<Pencil size={14} />} onPress={() => setAutomationEditDraft({ id: rule.id, name: rule.name || '', conditionValue: rule.condition?.category || '', actionValue: rule.action?.message || '' })}>
-                              Bearbeiten
-                            </Button>
-                            <Button size="sm" variant="flat" color="danger" startContent={<Trash2 size={14} />} onPress={() => deleteAutomation(rule.id)}>
-                              Löschen
-                            </Button>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    )) : <p className="text-small text-default-400">Keine Regeln</p>}
-                  </ListPanel>
-                  {automationEditDraft ? (
-                    <FormPanel title="Automation bearbeiten">
-                      <Input label="Name" value={automationEditDraft.name} onValueChange={(v) => setAutomationEditDraft((s) => ({ ...s, name: v }))} />
-                      <Input label="Kategorie / Zustand" value={automationEditDraft.conditionValue} onValueChange={(v) => setAutomationEditDraft((s) => ({ ...s, conditionValue: v }))} />
-                      <TextArea label="Aktion / Nachricht" value={automationEditDraft.actionValue} onValueChange={(v) => setAutomationEditDraft((s) => ({ ...s, actionValue: v }))} />
-                      <div className="flex gap-2">
-                        <Button color="primary" onPress={() => updateAutomation(automationEditDraft.id)}>Aktualisieren</Button>
-                        <Button variant="flat" onPress={() => setAutomationEditDraft(null)}>Abbrechen</Button>
-                      </div>
-                    </FormPanel>
-                  ) : (
-                    <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) => (
-                      <Card key={i} 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">
-                            <div className="font-semibold">{article.title || 'Artikel'}</div>
-                            <Chip size="sm" variant="flat">{article.keywords?.length || 0} Keywords</Chip>
-                          </div>
-                          <div className="text-small text-default-400">{article.content?.slice(0, 120)}...</div>
-                          <div className="flex gap-2">
-                            <Button size="sm" variant="flat" startContent={<Pencil size={14} />} onPress={() => setKbEditDraft({ id: article.id, title: article.title || '', keywords: (article.keywords || []).join(', '), content: article.content || '' })}>
-                              Bearbeiten
-                            </Button>
-                            <Button size="sm" variant="flat" color="danger" startContent={<Trash2 size={14} />} onPress={() => deleteKbArticle(article.id)}>
-                              Löschen
-                            </Button>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    )) : <p className="text-small text-default-400">Keine Artikel</p>}
-                  </ListPanel>
-                  {kbEditDraft ? (
-                    <FormPanel title="Artikel bearbeiten">
-                      <Input label="Titel" value={kbEditDraft.title} onValueChange={(v) => setKbEditDraft((s) => ({ ...s, title: v }))} />
-                      <Input label="Keywords" value={kbEditDraft.keywords} onValueChange={(v) => setKbEditDraft((s) => ({ ...s, keywords: v }))} />
-                      <TextArea label="Inhalt" minRows={5} value={kbEditDraft.content} onValueChange={(v) => setKbEditDraft((s) => ({ ...s, content: v }))} />
-                      <div className="flex gap-2">
-                        <Button color="primary" onPress={() => updateKbArticle(kbEditDraft.id)}>Aktualisieren</Button>
-                        <Button variant="flat" onPress={() => setKbEditDraft(null)}>Abbrechen</Button>
-                      </div>
-                    </FormPanel>
-                  ) : (
-                    <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 === 'supportlogin' && (
-            <SectionCard title="Support Login" subtitle="Login-Panel für Supporter konfigurieren">
-              <div className="grid gap-4 xl:grid-cols-[420px_1fr]">
-                <FormPanel title="Panel-Konfiguration">
-                  <Switch
-                    isSelected={supportLogin?.config?.autoRefresh !== false}
-                    onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, autoRefresh: v } } : s)}
-                  >
-                    Auto-Refresh aktiv
-                  </Switch>
-                  <Input
-                    label="Panel Channel ID"
-                    value={supportLogin?.config?.panelChannelId || ''}
-                    onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, panelChannelId: v } } : s)}
-                  />
-                  <Input
-                    label="Titel"
-                    value={supportLogin?.config?.title || 'Support Login'}
-                    onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, title: v } } : s)}
-                  />
-                  <TextArea
-                    label="Beschreibung"
-                    value={supportLogin?.config?.description || ''}
-                    onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, description: v } } : s)}
-                  />
-                  <Input
-                    label="Login Button Label"
-                    value={supportLogin?.config?.loginLabel || 'Ich bin jetzt im Support'}
-                    onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, loginLabel: v } } : s)}
-                  />
-                  <Input
-                    label="Logout Button Label"
-                    value={supportLogin?.config?.logoutLabel || 'Ich bin nicht mehr im Support'}
-                    onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, logoutLabel: v } } : s)}
-                  />
-                  <Separator className="my-1" />
-                  <div className="flex gap-2">
-                    <Button color="primary" onPress={saveSupportLogin}>Speichern & Panel senden</Button>
-                  </div>
-                </FormPanel>
-                <ListPanel title="Aktive Supporter">
-                  {supportLogin?.status?.active?.length ? supportLogin.status.active.map((s, i) => (
-                    <div key={i} className="mb-2 flex items-center gap-3 rounded-xl border border-default-100 bg-default-50/20 px-4 py-3 text-small">
-                      <Chip color="success" size="sm" variant="dot" />
-                      {s.username || s.userId}
-                    </div>
-                  )) : <p className="text-small text-default-400">Keine aktiven Supporter</p>}
-                  <p className="mt-3 text-tiny text-default-400">
-                    Support Role ID: {supportLogin?.supportRoleId || 'Nicht gesetzt'}
-                  </p>
-                </ListPanel>
-              </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) } }))} />
-                  <Separator 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 } }))} />
-                  <Separator 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 } }))} />
-                  <Separator 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 } }))} />
-                  <Separator 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) => (
-                    <Card key={i} className="mb-2 border border-default-100 bg-default-50/20">
-                      <CardContent className="flex items-center justify-between p-3 text-small">
-                        <div>
-                          <span className="font-medium">{service.name || 'Service'}</span>
-                          <span className="ml-2 text-default-400">· {service.status} · {service.url || ''}</span>
-                        </div>
-                        <Button isIconOnly size="sm" variant="light" color="danger" onPress={() => deleteStatusService(service.id)}>
-                          <Trash2 size={14} />
-                        </Button>
-                      </CardContent>
-                    </Card>
-                  )) : <p className="text-small text-default-400">Keine Services</p>}
-                  <Separator className="my-2" />
-                  <h4 className="text-small font-semibold mb-2">Service hinzufügen</h4>
-                  <div className="flex flex-col gap-2">
-                    <Input placeholder="Name" value={statusServiceDraft.name} onValueChange={(v) => setStatusServiceDraft((s) => ({ ...s, name: v }))} />
-                    <Input placeholder="URL" value={statusServiceDraft.url} onValueChange={(v) => setStatusServiceDraft((s) => ({ ...s, url: v }))} />
-                    <Button size="sm" color="primary" onPress={addStatusService}>Hinzufügen</Button>
-                  </div>
-                </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) => (
-                    <Card key={i} className="mb-2 border border-default-100 bg-default-50/20">
-                      <CardContent className="flex items-center justify-between p-3 text-small">
-                        <div>
-                          <span className="font-medium">{item.label || item.key || 'Stat'}</span>
-                          <span className="ml-2 text-default-400">· {item.type || '-'}</span>
-                        </div>
-                        <Button isIconOnly size="sm" variant="light" color="danger" onPress={() => deleteStatsItem(i)}>
-                          <Trash2 size={14} />
-                        </Button>
-                      </CardContent>
-                    </Card>
-                  )) : <p className="text-small text-default-400">Keine Items</p>}
-                  <Separator className="my-2" />
-                  <h4 className="text-small font-semibold mb-2">Item hinzufügen</h4>
-                  <div className="flex flex-col gap-2">
-                    <Input placeholder="Label" value={statsItemDraft.label} onValueChange={(v) => setStatsItemDraft((s) => ({ ...s, label: v }))} />
-                    <select
-                      className="rounded-xl border border-default-200 bg-default-50 px-3 py-2 text-sm outline-none"
-                      value={statsItemDraft.type}
-                      onChange={(e) => setStatsItemDraft((s) => ({ ...s, type: e.target.value }))}
-                    >
-                      <option value="members">Mitglieder</option>
-                      <option value="channels">Channels</option>
-                      <option value="roles">Rollen</option>
-                      <option value="boosts">Boosts</option>
-                      <option value="online">Online</option>
-                      <option value="custom">Custom</option>
-                    </select>
-                    <Button size="sm" color="primary" onPress={addStatsItem}>Hinzufügen</Button>
-                  </div>
-                </ListPanel>
-              </div>
-            </SectionCard>
-          )}
-
-          {section === 'register' && (
-            <SectionCard title="Registrierungsformulare" subtitle="Bewerbungs-Formulare und eingegangene Anträge verwalten.">
-              <Tabs aria-label="Register Tabs" color="primary" selectedKey={registerTab} variant="bordered" onSelectionChange={(key) => setRegisterTab(String(key))}>
-                <Tab key="forms" title="Formulare" />
-                <Tab key="apps" title="Anträge" />
-              </Tabs>
-
-              {registerTab === 'forms' && (
-                <div className="mt-5 grid gap-4 xl:grid-cols-[1fr_420px]">
-                  <ListPanel title="Bestehende Formulare">
-                    {registerForms.length ? registerForms.map((f) => (
-                      <Card key={f.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">
-                            <div className="font-semibold">{f.name}</div>
-                            <div className="flex gap-1">
-                              <Button isIconOnly size="sm" variant="light" onPress={() => {
-                                setFormDraft({ name: f.name, description: f.description || '', reviewChannelId: f.reviewChannelId || '', notifyRoleIds: (f.notifyRoleIds || []).join(', '), fields: (f.fields || []).map((fd) => `${fd.label}|${fd.type}${fd.required ? '|required' : ''}${fd.options ? '|' + fd.options.join(',') : ''}`).join('\n') });
-                                setEditingFormId(f.id);
-                              }}>
-                                <Pencil size={14} />
-                              </Button>
-                              <Button isIconOnly size="sm" variant="light" color="danger" onPress={() => deleteForm(f.id)}>
-                                <Trash2 size={14} />
-                              </Button>
-                            </div>
-                          </div>
-                          <div className="text-small text-default-400">{f.description || 'Keine Beschreibung'}</div>
-                          <div className="flex items-center gap-2 text-tiny">
-                            <Chip size="sm" variant="flat" color={f.isActive ? 'success' : 'default'}>{f.isActive ? 'Aktiv' : 'Inaktiv'}</Chip>
-                            <span className="text-default-400">{f.fields?.length || 0} Felder</span>
-                            <Button size="sm" variant="flat" onPress={() => sendFormPanel(f.id)}>Panel senden</Button>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    )) : <p className="text-small text-default-400">Keine Formulare</p>}
-                  </ListPanel>
-                  <FormPanel title={editingFormId ? 'Formular bearbeiten' : 'Neues Formular'}>
-                    <Input label="Name" value={formDraft.name} onValueChange={(v) => setFormDraft((s) => ({ ...s, name: v }))} />
-                    <Input label="Beschreibung" value={formDraft.description} onValueChange={(v) => setFormDraft((s) => ({ ...s, description: v }))} />
-                    <Input label="Review Channel ID" value={formDraft.reviewChannelId} onValueChange={(v) => setFormDraft((s) => ({ ...s, reviewChannelId: v }))} />
-                    <Input label="Benachrichtigungs-Rollen (Komma-getrennt)" value={formDraft.notifyRoleIds} onValueChange={(v) => setFormDraft((s) => ({ ...s, notifyRoleIds: v }))} />
-                    <TextArea label="Felder (label|type|required|options)" minRows={6} value={formDraft.fields} onValueChange={(v) => setFormDraft((s) => ({ ...s, fields: v }))} />
-                    <p className="text-tiny text-default-400">
-                      Pro Zeile: label | type (text/paragraph/select/multi) | required | option1,option2
-                    </p>
-                    <div className="flex gap-2">
-                      <Button color="primary" onPress={saveForm}>{editingFormId ? 'Aktualisieren' : 'Erstellen'}</Button>
-                      {editingFormId && <Button variant="flat" onPress={() => { setEditingFormId(null); setFormDraft({ name: '', description: '', reviewChannelId: '', notifyRoleIds: '', fields: '' }); }}>Abbrechen</Button>}
-                    </div>
-                  </FormPanel>
-                </div>
-              )}
-
-              {registerTab === 'apps' && (
-                <div className="mt-5">
-                  <ListPanel title="Eingegangene Anträge">
-                    {registerApps.length ? registerApps.map((app) => (
-                      <Card key={app.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">
-                            <div className="font-semibold">{app.username || app.userId}</div>
-                            <Chip size="sm" variant="flat" color={app.status === 'approved' ? 'success' : app.status === 'rejected' ? 'danger' : 'warning'}>
-                              {app.status}
-                            </Chip>
-                          </div>
-                          <div className="text-tiny text-default-400">{formatDate(app.createdAt)}</div>
-                          {app.answers?.length ? (
-                            <div className="mt-1 space-y-1">
-                              {app.answers.map((a, i) => (
-                                <div key={i} className="text-small">
-                                  <span className="text-default-500">{a.label || 'Frage'}: </span>
-                                  {a.value}
-                                </div>
-                              ))}
-                            </div>
-                          ) : null}
-                        </CardContent>
-                      </Card>
-                    )) : <p className="text-small text-default-400">Keine Anträge</p>}
-                  </ListPanel>
-                </div>
-              )}
-            </SectionCard>
-          )}
-
-          {section === 'music' && (
-            <SectionCard title="Musik-Status" subtitle="Aktuelle Wiedergabe und Queues pro Guild.">
-              <div className="grid gap-4">
-                <div className="flex gap-4">
-                  <StatCard icon={<Music size={18} />} label="Aktive Guilds" value={String(musicStatus.activeGuilds)} />
-                </div>
-                {musicStatus.sessions.length ? musicStatus.sessions.map((session) => (
-                  <Card key={session.guildId} className="border border-default-100 bg-default-50/20">
-                    <CardContent className="flex flex-col gap-3 p-4">
-                      <div className="flex items-center justify-between">
-                        <div className="font-semibold">{session.guildId}</div>
-                        <Chip size="sm" variant="flat">
-                          Loop: {session.loop} · Queue: {session.queueLength}
-                        </Chip>
-                      </div>
-                      {session.nowPlaying ? (
-                        <div className="rounded-xl bg-default-100/50 px-3 py-2 text-small">
-                          <span className="text-default-500">Jetzt läuft: </span>
-                          <a href={session.nowPlaying.url} target="_blank" rel="noopener noreferrer" className="text-primary-400 hover:underline">
-                            {session.nowPlaying.title}
-                          </a>
-                        </div>
-                      ) : (
-                        <p className="text-small text-default-400">Keine aktive Wiedergabe</p>
-                      )}
-                    </CardContent>
-                  </Card>
-                )) : <p className="text-small text-default-400">Keine aktiven Musik-Sessions</p>}
-              </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>
-                  <Separator 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>
+    <AppLayout>
+      <AppContent />
+    </AppLayout>
   );
 }
 
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
new file mode 100644
index 0000000..98d025f
--- /dev/null
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -0,0 +1,39 @@
+import { Spinner } from '@heroui/react';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+import { useApp } from '../../context/AppContext';
+
+export function AppLayout({ children }: { children: React.ReactNode }) {
+  const { loading, guilds } = useApp();
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Spinner color="primary" label="Dashboard wird geladen..." size="lg" />
+      </div>
+    );
+  }
+
+  if (!guilds.length) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p className="text-default-500">Keine Server verfügbar</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <div className="hidden shrink-0 lg:block">
+        <Sidebar />
+      </div>
+
+      <main className="flex flex-1 flex-col overflow-y-auto">
+        <div className="mx-auto w-full max-w-[1520px] px-6 py-6">
+          <Header />
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
new file mode 100644
index 0000000..8bc13dd
--- /dev/null
+++ b/frontend/src/components/layout/Header.tsx
@@ -0,0 +1,88 @@
+import { Button, Chip, Tooltip, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Avatar } from '@heroui/react';
+import { Moon, Sun, Bell, ChevronDown, LogOut, Settings } from 'lucide-react';
+import { useTheme } from '../../hooks/useTheme';
+import { useApp } from '../../context/AppContext';
+
+const navLabels: Record<string, string> = {
+  overview: 'Ãœbersicht',
+  tickets: 'Ticketsystem',
+  supportlogin: 'Support Login',
+  automod: 'Automod',
+  welcome: 'Willkommen',
+  dynamicvoice: 'Dynamic Voice',
+  birthday: 'Birthday',
+  reactionroles: 'Reaction Roles',
+  statuspage: 'Statuspage',
+  serverstats: 'Server Stats',
+  register: 'Registrierung',
+  music: 'Musik',
+  settings: 'Einstellungen',
+  modules: 'Module',
+  events: 'Events',
+  admin: 'Admin',
+};
+
+export function Header() {
+  const { dark, toggle } = useTheme();
+  const { guildName, statusMessage } = useHeaderData();
+  const { user, handleLogout, setSection, section } = useApp();
+
+  return (
+    <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex items-center gap-3 min-w-0">
+        <div className="flex items-center gap-1.5 text-sm text-default-400 min-w-0">
+          <button className="hover:text-foreground transition-colors" onClick={() => setSection('overview')}>
+            Dashboard
+          </button>
+          {section !== 'overview' && (
+            <>
+              <span>/</span>
+              <span className="text-foreground font-medium truncate">{navLabels[section] || section}</span>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        {statusMessage && (
+          <Chip color="warning" size="sm" variant="flat" className="max-w-[200px]">
+            <span className="truncate">{statusMessage}</span>
+          </Chip>
+        )}
+
+        <Tooltip content={dark ? 'Helles Design' : 'Dunkles Design'} placement="bottom">
+          <Button isIconOnly radius="lg" size="sm" variant="light" onPress={toggle}>
+            {dark ? <Sun size={16} /> : <Moon size={16} />}
+          </Button>
+        </Tooltip>
+
+        <Dropdown placement="bottom-end">
+          <DropdownTrigger>
+            <Button className="gap-2" radius="lg" size="sm" variant="light">
+              <Avatar name={user?.username} size="sm" className="size-6" />
+              <span className="hidden sm:inline text-sm">{user?.username}</span>
+              <ChevronDown size={14} />
+            </Button>
+          </DropdownTrigger>
+          <DropdownMenu aria-label="User Menu">
+            <DropdownItem key="settings" startContent={<Settings size={14} />} onPress={() => setSection('settings')}>
+              Einstellungen
+            </DropdownItem>
+            <DropdownItem key="logout" startContent={<LogOut size={14} />} color="danger" onPress={handleLogout}>
+              Abmelden
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </div>
+  );
+}
+
+function useHeaderData() {
+  const { guildInfo, guilds, currentGuildId } = useApp();
+  const selectedGuild = guilds.find((g) => g.id === currentGuildId);
+  return {
+    guildName: guildInfo?.name || selectedGuild?.name || 'Dashboard',
+    statusMessage: null,
+  };
+}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index dd9749c..15e5d5d 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,82 +1,194 @@
-import { Avatar, Button, Card, CardContent, Chip } from '@heroui/react';
-import { LogOut, Server } from 'lucide-react';
-import { navItems } from '../../utils/constants';
-import type { NavKey, Guild, User } from '../../types';
+import { useState } from 'react';
+import { Avatar, Button, Chip, ScrollShadow, Tooltip } from '@heroui/react';
+import {
+  ChevronLeft, ChevronRight, LogOut, Server, PanelLeftClose, PanelLeft,
+  Activity, AudioLines, CalendarDays, ClipboardList, Home,
+  LogIn, Music, Puzzle, RadioTower, Settings, Shield, Sparkles,
+  Tag, Ticket, Wrench, Bot
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import { guildIconUrl } from '../../utils/formatters';
 
-type Props = {
-  user: User | null;
-  guilds: Guild[];
-  currentGuildId: string;
-  section: NavKey;
-  onSectionChange: (key: NavKey) => void;
-  onGuildChange: (id: string) => void;
-  onLogout: () => void;
-};
+const navGroups = [
+  {
+    label: 'Dashboard',
+    items: [
+      { key: 'overview', label: 'Ãœbersicht', icon: <Home size={18} /> },
+    ]
+  },
+  {
+    label: 'Community',
+    items: [
+      { key: 'welcome', label: 'Willkommen', icon: <Sparkles size={18} /> },
+      { key: 'birthday', label: 'Birthday', icon: <CalendarDays size={18} /> },
+      { key: 'events', label: 'Events', icon: <Activity size={18} /> },
+    ]
+  },
+  {
+    label: 'Support',
+    items: [
+      { key: 'tickets', label: 'Ticketsystem', icon: <Ticket size={18} /> },
+      { key: 'supportlogin', label: 'Support Login', icon: <LogIn size={18} /> },
+      { key: 'register', label: 'Registrierung', icon: <ClipboardList size={18} /> },
+    ]
+  },
+  {
+    label: 'Moderation',
+    items: [
+      { key: 'automod', label: 'Automod', icon: <Shield size={18} /> },
+      { key: 'reactionroles', label: 'Reaction Roles', icon: <Tag size={18} /> },
+    ]
+  },
+  {
+    label: 'Funktionen',
+    items: [
+      { key: 'dynamicvoice', label: 'Dynamic Voice', icon: <AudioLines size={18} /> },
+      { key: 'music', label: 'Musik', icon: <Music size={18} /> },
+      { key: 'statuspage', label: 'Statuspage', icon: <RadioTower size={18} /> },
+      { key: 'serverstats', label: 'Server Stats', icon: <Activity size={18} /> },
+    ]
+  },
+  {
+    label: 'System',
+    items: [
+      { key: 'modules', label: 'Module', icon: <Puzzle size={18} /> },
+      { key: 'settings', label: 'Einstellungen', icon: <Settings size={18} /> },
+    ]
+  }
+];
+
+export function Sidebar() {
+  const { user, guilds, currentGuildId, section, setCurrentGuildId, setSection, handleLogout } = useApp();
+  const [collapsed, setCollapsed] = useState(false);
+
+  const selectedGuild = guilds.find((g) => g.id === currentGuildId);
 
-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>
+    <aside className={`flex h-full flex-col border-r border-default-100 bg-gradient-to-b from-default-50/40 to-background transition-all duration-200 ${collapsed ? 'w-16' : 'w-64'}`}>
+      <div className={`flex items-center gap-3 px-4 pt-4 pb-3 ${collapsed ? 'justify-center' : ''}`}>
+        {!collapsed && (
+          <>
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-primary-400 to-primary-600 text-lg font-bold text-white shadow-lg shadow-primary-500/25">
+              P
+            </div>
+            <div className="min-w-0">
+              <div className="text-base font-bold">Papo</div>
+              <div className="text-[10px] uppercase tracking-widest text-default-400">Dashboard</div>
+            </div>
+          </>
+        )}
+        {collapsed && (
+          <div className="flex size-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary-400 to-primary-600 text-lg font-bold text-white shadow-lg shadow-primary-500/25">
+            P
+          </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>
-
-      <div className="h-px bg-default-200 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>
+      <div className={`px-3 pb-2 ${collapsed ? 'px-2' : ''}`}>
+        <select
+          className={`w-full rounded-xl border border-default-200 bg-default-50 text-sm text-foreground outline-none transition-colors focus:border-primary-400 ${collapsed ? 'px-1 py-2 text-center text-[10px]' : 'px-3 py-2'}`}
+          value={currentGuildId}
+          onChange={(e) => setCurrentGuildId(e.target.value)}
+          title={selectedGuild?.name}
+        >
+          {guilds.map((g) => (
+            <option key={g.id} value={g.id}>{collapsed ? g.name.slice(0, 2) : g.name}</option>
           ))}
-      </nav>
+        </select>
+      </div>
 
-      <div className="h-px bg-default-200 my-2" />
+      <div className="h-px bg-default-200 mx-3" />
 
-      <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>
+      <ScrollShadow className="flex-1 px-2 py-2" hideScrollBar>
+        <nav className="flex flex-col gap-4">
+          {navGroups.map((group) => (
+            <div key={group.label}>
+              {!collapsed && (
+                <div className="px-2 pb-1 text-[10px] font-semibold uppercase tracking-widest text-default-400">
+                  {group.label}
+                </div>
+              )}
+              <div className="flex flex-col gap-0.5">
+                {group.items
+                  .filter((item) => item.key !== 'admin' || user?.isAdmin)
+                  .map((item) => {
+                    const isActive = section === item.key;
+                    return (
+                      <Tooltip key={item.key} content={collapsed ? item.label : ''} placement="right" offset={8}>
+                        <Button
+                          className={`h-9 justify-start gap-3 px-2 ${isActive ? 'bg-primary-500/15 text-primary-400 font-semibold' : 'text-default-500 hover:text-foreground hover:bg-default-100/40'}`}
+                          radius="lg"
+                          variant="light"
+                          size="sm"
+                          startContent={item.icon}
+                          onPress={() => setSection(item.key)}
+                        >
+                          {!collapsed && item.label}
+                        </Button>
+                      </Tooltip>
+                    );
+                  })}
+              </div>
+            </div>
+          ))}
+          {user?.isAdmin && (
+            <div>
+              {!collapsed && (
+                <div className="px-2 pb-1 text-[10px] font-semibold uppercase tracking-widest text-default-400">
+                  Admin
+                </div>
+              )}
+              <Tooltip content={collapsed ? 'Admin' : ''} placement="right" offset={8}>
+                <Button
+                  className={`h-9 justify-start gap-3 px-2 ${section === 'admin' ? 'bg-warning-500/15 text-warning-400 font-semibold' : 'text-default-500 hover:text-foreground hover:bg-default-100/40'}`}
+                  radius="lg"
+                  variant="light"
+                  size="sm"
+                  startContent={<Wrench size={18} />}
+                  onPress={() => setSection('admin')}
+                >
+                  {!collapsed && 'Admin'}
+                </Button>
+              </Tooltip>
+            </div>
+          )}
+        </nav>
+      </ScrollShadow>
+
+      <div className="h-px bg-default-200 mx-3" />
+
+      <div className="p-3 flex flex-col gap-2">
+        <Button
+          isIconOnly
+          className="w-full"
+          radius="lg"
+          size="sm"
+          variant="light"
+          onPress={() => setCollapsed((c) => !c)}
+        >
+          {collapsed ? <PanelLeft size={16} /> : <PanelLeftClose size={16} />}
+        </Button>
+
+        <div className={`flex items-center gap-3 rounded-xl border border-default-100 bg-default-50/20 p-2 ${collapsed ? 'justify-center' : ''}`}>
+          <Avatar name={user?.username} size="sm" className="shrink-0" />
+          {!collapsed && (
+            <>
+              <div className="flex-1 min-w-0">
+                <div className="truncate text-xs font-semibold">{user?.username}</div>
+                <div className="flex items-center gap-1 text-[10px] text-success-400">
+                  <div className="size-1.5 rounded-full bg-success-400" />
+                  Online
+                </div>
+              </div>
+              <Tooltip content="Abmelden" placement="top">
+                <Button isIconOnly color="danger" radius="lg" size="sm" variant="light" onPress={handleLogout}>
+                  <LogOut size={14} />
+                </Button>
+              </Tooltip>
+            </>
+          )}
+        </div>
+      </div>
     </aside>
   );
 }
diff --git a/frontend/src/components/shared/EmptyState.tsx b/frontend/src/components/shared/EmptyState.tsx
new file mode 100644
index 0000000..9fcede4
--- /dev/null
+++ b/frontend/src/components/shared/EmptyState.tsx
@@ -0,0 +1,20 @@
+import { Card, CardContent } from '@heroui/react';
+import { Inbox } from 'lucide-react';
+
+type Props = {
+  message?: string;
+  icon?: React.ReactNode;
+};
+
+export function EmptyState({ message = 'Keine Daten vorhanden', icon }: Props) {
+  return (
+    <Card className="border border-default-100 bg-default-50/10">
+      <CardContent className="flex flex-col items-center gap-3 py-8">
+        <div className="flex size-12 items-center justify-center rounded-full bg-default-100/50 text-default-400">
+          {icon || <Inbox size={24} />}
+        </div>
+        <p className="text-small text-default-400">{message}</p>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/shared/ErrorState.tsx b/frontend/src/components/shared/ErrorState.tsx
new file mode 100644
index 0000000..7da8433
--- /dev/null
+++ b/frontend/src/components/shared/ErrorState.tsx
@@ -0,0 +1,25 @@
+import { Card, CardContent } from '@heroui/react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+type Props = {
+  message?: string;
+  onRetry?: () => void;
+};
+
+export function ErrorState({ message = 'Ein Fehler ist aufgetreten', onRetry }: Props) {
+  return (
+    <Card className="border border-danger-100/30 bg-danger-50/10">
+      <CardContent className="flex flex-col items-center gap-3 py-8">
+        <div className="flex size-12 items-center justify-center rounded-full bg-danger-500/10 text-danger-400">
+          <AlertTriangle size={24} />
+        </div>
+        <p className="text-small text-default-500">{message}</p>
+        {onRetry && (
+          <button className="flex items-center gap-1 text-tiny text-primary-400 hover:text-primary-300 transition-colors" onClick={onRetry}>
+            <RefreshCw size={12} /> Erneut versuchen
+          </button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/shared/LoadingSkeleton.tsx b/frontend/src/components/shared/LoadingSkeleton.tsx
index 74632a4..1cc0f8c 100644
--- a/frontend/src/components/shared/LoadingSkeleton.tsx
+++ b/frontend/src/components/shared/LoadingSkeleton.tsx
@@ -1,24 +1,10 @@
 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>
-    );
-  }
-
+export function LoadingSkeleton({ lines = 3 }: Props) {
   return (
     <div className="flex flex-col gap-3">
       {Array.from({ length: lines }).map((_, i) => (
diff --git a/frontend/src/components/shared/StatCard.tsx b/frontend/src/components/shared/StatCard.tsx
index 9b5c87e..761f4be 100644
--- a/frontend/src/components/shared/StatCard.tsx
+++ b/frontend/src/components/shared/StatCard.tsx
@@ -4,18 +4,27 @@ import type { ReactNode } from 'react';
 type Props = {
   icon: ReactNode;
   label: string;
-  value: string;
+  value: string | number;
+  trend?: string;
+  color?: 'primary' | 'success' | 'warning' | 'danger' | 'default';
 };
 
-export function StatCard({ icon, label, value }: Props) {
+export function StatCard({ icon, label, value, trend, color = 'primary' }: Props) {
   return (
-    <Card className="border border-default-100 bg-default-50/20">
+    <Card className="border border-default-100 bg-gradient-to-br from-default-50/20 to-background hover:border-default-200 transition-all">
       <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 className="flex items-center justify-between">
+          <div className={`flex size-9 items-center justify-center rounded-xl bg-${color}-500/10 text-${color}-400`}>
+            {icon}
+          </div>
+          {trend && (
+            <span className={`text-tiny font-medium ${trend.startsWith('+') ? 'text-success-400' : trend.startsWith('-') ? 'text-danger-400' : 'text-default-400'}`}>
+              {trend}
+            </span>
+          )}
         </div>
         <div className="text-2xl font-bold tracking-tight">{value}</div>
+        <div className="text-tiny uppercase tracking-widest text-default-500">{label}</div>
       </CardContent>
     </Card>
   );
diff --git a/frontend/src/context/AppContext.tsx b/frontend/src/context/AppContext.tsx
new file mode 100644
index 0000000..04dafe7
--- /dev/null
+++ b/frontend/src/context/AppContext.tsx
@@ -0,0 +1,511 @@
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+import { apiFetch } from '../utils/api';
+import type {
+  AppConfig, User, Guild, NavKey, TicketRecord, StatusService,
+  EventItem, ReactionRoleSet, ModuleItem, LogEntry, SettingsState,
+  SupportLoginConfig, SupportLoginStatus, RegisterForm, RegisterFormField,
+  RegisterApplication, MusicSession
+} from '../types';
+
+const appConfig: AppConfig = (window as any).__PAPO__ || {};
+
+type AppState = {
+  user: User | null;
+  guilds: Guild[];
+  currentGuildId: string;
+  section: NavKey;
+  guildInfo: any;
+  overview: any;
+  activity: any;
+  logs: LogEntry[];
+  tickets: TicketRecord[];
+  pipeline: Record<string, TicketRecord[]>;
+  sla: any;
+  automations: any[];
+  kbArticles: any[];
+  settings: SettingsState;
+  modules: ModuleItem[];
+  birthday: any;
+  reactionRoles: ReactionRoleSet[];
+  statuspage: any;
+  serverStats: any;
+  events: EventItem[];
+  admin: any;
+  statusMessage: string;
+  loading: boolean;
+  supportLogin: { config: SupportLoginConfig; status: SupportLoginStatus; supportRoleId?: string } | null;
+  registerForms: RegisterForm[];
+  registerApps: RegisterApplication[];
+  musicStatus: { activeGuilds: number; sessions: MusicSession[] };
+};
+
+type AppContextType = AppState & {
+  setCurrentGuildId: (id: string) => void;
+  setSection: (key: NavKey) => void;
+  setSettings: (s: SettingsState | ((prev: SettingsState) => SettingsState)) => void;
+  setBirthday: (s: any | ((prev: any) => any)) => void;
+  setSupportLogin: (s: any | ((prev: any) => any)) => void;
+  setStatusDraft: (s: any | ((prev: any) => any)) => void;
+  setStatsDraft: (s: any | ((prev: any) => any)) => void;
+  setStatusMessage: (msg: string) => void;
+  loadGuildData: (guildId: string) => Promise<void>;
+  saveSettingsPayload: (payload: Record<string, any>, okMessage: string) => Promise<void>;
+  saveBirthday: () => Promise<void>;
+  saveStatuspage: () => Promise<void>;
+  saveServerStats: () => Promise<void>;
+  toggleModule: (key: string, enabled: boolean) => Promise<void>;
+  handleLogout: () => void;
+  loadTicketData: (guildId: string) => Promise<void>;
+  loadTicketMessages: (ticketId: string) => Promise<void>;
+  updateTicketStatus: (ticketId: string, status: string) => Promise<void>;
+  closeTicket: (ticketId: string) => Promise<void>;
+  saveAutomation: () => Promise<void>;
+  saveKbArticle: () => Promise<void>;
+  updateKbArticle: (id: string) => Promise<void>;
+  deleteKbArticle: (id: string) => Promise<void>;
+  updateAutomation: (id: string) => Promise<void>;
+  deleteAutomation: (id: string) => Promise<void>;
+  saveSupportLogin: () => Promise<void>;
+  saveForm: () => Promise<void>;
+  deleteForm: (id: string) => Promise<void>;
+  sendFormPanel: (formId: string) => Promise<void>;
+  addStatusService: () => Promise<void>;
+  deleteStatusService: (id: string) => Promise<void>;
+  addStatsItem: () => Promise<void>;
+  deleteStatsItem: (index: number) => Promise<void>;
+  saveEvent: () => Promise<void>;
+  deleteEvent: (id: string) => Promise<void>;
+  saveReactionRole: () => Promise<void>;
+  ticketTab: string;
+  setTicketTab: (tab: string) => void;
+  automationDraft: any;
+  setAutomationDraft: (s: any | ((prev: any) => any)) => void;
+  kbDraft: any;
+  setKbDraft: (s: any | ((prev: any) => any)) => void;
+  eventDraft: any;
+  setEventDraft: (s: any | ((prev: any) => any)) => void;
+  statusDraft: any;
+  statsDraft: any;
+  reactionDraft: any;
+  setReactionDraft: (s: any | ((prev: any) => any)) => void;
+  formDraft: any;
+  setFormDraft: (s: any | ((prev: any) => any)) => void;
+  editingFormId: string | null;
+  setEditingFormId: (id: string | null) => void;
+  registerTab: string;
+  setRegisterTab: (tab: string) => void;
+  statusServiceDraft: any;
+  setStatusServiceDraft: (s: any | ((prev: any) => any)) => void;
+  statsItemDraft: any;
+  setStatsItemDraft: (s: any | ((prev: any) => any)) => void;
+  ticketDetail: TicketRecord | null;
+  setTicketDetail: (t: TicketRecord | null) => void;
+  ticketMessages: any[];
+  kbEditDraft: any;
+  setKbEditDraft: (s: any | ((prev: any) => any)) => void;
+  automationEditDraft: any;
+  setAutomationEditDraft: (s: any | ((prev: any) => any)) => void;
+};
+
+const AppContext = createContext<AppContextType | null>(null);
+
+export function AppProvider({ children }: { children: ReactNode }) {
+  const [loading, setLoading] = useState(true);
+  const [user, setUser] = useState<User | null>(null);
+  const [guilds, setGuilds] = useState<Guild[]>([]);
+  const [currentGuildId, setCurrentGuildId] = useState(appConfig.initialGuildId || '');
+  const [section, setSectionState] = useState<NavKey>('overview');
+  const [guildInfo, setGuildInfo] = useState<any>(null);
+  const [overview, setOverview] = useState<any>(null);
+  const [activity, setActivity] = useState<any>(null);
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [tickets, setTickets] = useState<TicketRecord[]>([]);
+  const [pipeline, setPipeline] = useState<Record<string, TicketRecord[]>>({});
+  const [sla, setSla] = useState<any>({ supporters: [], days: [] });
+  const [automations, setAutomations] = useState<any[]>([]);
+  const [kbArticles, setKbArticles] = useState<any[]>([]);
+  const [settings, setSettings] = useState<SettingsState>({});
+  const [modules, setModules] = useState<ModuleItem[]>([]);
+  const [birthday, setBirthday] = useState<any>({ config: {}, birthdays: [] });
+  const [reactionRoles, setReactionRoles] = useState<ReactionRoleSet[]>([]);
+  const [statuspage, setStatuspage] = useState<any>({ services: [] });
+  const [serverStats, setServerStats] = useState<any>({ items: [] });
+  const [events, setEvents] = useState<EventItem[]>([]);
+  const [admin, setAdmin] = useState<any>({ overview: null, activity: null, logs: [] });
+  const [statusMessage, setStatusMessage] = useState('');
+  const [ticketTab, setTicketTab] = useState('overview');
+  const [automationDraft, setAutomationDraft] = useState({ name: '', conditionValue: '', actionValue: '' });
+  const [kbDraft, setKbDraft] = useState({ title: '', keywords: '', content: '' });
+  const [eventDraft, setEventDraft] = useState({ title: '', description: '', channelId: '', startsAt: '' });
+  const [statusDraft, setStatusDraft] = useState<any>(null);
+  const [statsDraft, setStatsDraft] = useState<any>(null);
+  const [reactionDraft, setReactionDraft] = useState({ title: '', channelId: '', entries: '' });
+  const [supportLogin, setSupportLogin] = useState<{ config: SupportLoginConfig; status: SupportLoginStatus; supportRoleId?: string } | null>(null);
+  const [registerForms, setRegisterForms] = useState<RegisterForm[]>([]);
+  const [registerApps, setRegisterApps] = useState<RegisterApplication[]>([]);
+  const [formDraft, setFormDraft] = useState({ name: '', description: '', reviewChannelId: '', notifyRoleIds: '', fields: '' });
+  const [editingFormId, setEditingFormId] = useState<string | null>(null);
+  const [registerTab, setRegisterTab] = useState('forms');
+  const [musicStatus, setMusicStatus] = useState<{ activeGuilds: number; sessions: MusicSession[] }>({ activeGuilds: 0, sessions: [] });
+  const [kbEditDraft, setKbEditDraft] = useState<{ id: string; title: string; keywords: string; content: string } | null>(null);
+  const [automationEditDraft, setAutomationEditDraft] = useState<{ id: string; name: string; conditionValue: string; actionValue: string } | null>(null);
+  const [statusServiceDraft, setStatusServiceDraft] = useState<{ id?: string; name: string; url: string; status: string }>({ name: '', url: '', status: 'unknown' });
+  const [statsItemDraft, setStatsItemDraft] = useState<{ id?: string; label: string; type: string }>({ label: '', type: 'members' });
+  const [ticketDetail, setTicketDetail] = useState<TicketRecord | null>(null);
+  const [ticketMessages, setTicketMessages] = useState<any[]>([]);
+
+  const setSection = useCallback((key: NavKey) => {
+    setSectionState(key);
+    window.location.hash = key;
+  }, []);
+
+  useEffect(() => {
+    const hash = window.location.hash.replace('#', '') as NavKey;
+    const validKeys: NavKey[] = ['overview', 'tickets', 'supportlogin', 'automod', 'welcome', 'dynamicvoice', 'birthday', 'reactionroles', 'statuspage', 'serverstats', 'register', 'music', 'settings', 'modules', 'events', 'admin'];
+    if (validKeys.includes(hash)) setSectionState(hash);
+  }, []);
+
+  useEffect(() => {
+    if (currentGuildId) loadGuildData(currentGuildId);
+  }, [currentGuildId]);
+
+  useEffect(() => { bootstrap(); }, []);
+
+  async function bootstrap() {
+    try {
+      const me = await apiFetch<{ user: User }>('/me');
+      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); }
+  }
+
+  async function loadTicketData(guildId: string) {
+    try {
+      const [ticketRes, pipelineRes, slaRes, automationRes, kbRes] = await Promise.all([
+        apiFetch<any>(`/tickets?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/tickets/pipeline?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/tickets/sla?guildId=${encodeURIComponent(guildId)}&range=30`),
+        apiFetch<any>(`/automations?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/kb?guildId=${encodeURIComponent(guildId)}`)
+      ]);
+      setTickets(ticketRes.tickets || []);
+      setPipeline(pipelineRes.pipeline || {});
+      setSla(slaRes || { supporters: [], days: [] });
+      setAutomations(automationRes.rules || []);
+      setKbArticles(kbRes.articles || []);
+    } catch {}
+  }
+
+  async function loadGuildData(guildId: string) {
+    setStatusMessage('Lade Daten...');
+    try {
+      const [guildInfoRes, overviewRes, activityRes, logsRes, settingsRes, modulesRes,
+        birthdayRes, reactionRes, statusRes, statsRes, eventsRes, supportLoginRes,
+        registerFormsRes, registerAppsRes] = await Promise.all([
+        apiFetch<any>(`/guild/info?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/overview?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/guild/activity?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/guild/logs?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/settings?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/modules?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/birthday?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/reactionroles?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/statuspage?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/server-stats?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/events?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/tickets/support-login?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/register/forms?guildId=${encodeURIComponent(guildId)}`),
+        apiFetch<any>(`/register/apps?guildId=${encodeURIComponent(guildId)}`)
+      ]);
+      setGuildInfo(guildInfoRes.guild || null);
+      setOverview(overviewRes);
+      setMusicStatus(overviewRes.music || { activeGuilds: 0, sessions: [] });
+      setActivity(activityRes.activity || {});
+      setLogs(logsRes.logs || []);
+      setSettings(settingsRes.settings || {});
+      setModules(modulesRes.modules || []);
+      setBirthday(birthdayRes);
+      setReactionRoles(reactionRes.sets || []);
+      setStatuspage(statusRes.config || { services: [] });
+      setServerStats(statsRes.config || { items: [] });
+      setStatsDraft(statsRes.config || { items: [] });
+      setStatusDraft(statusRes.config || { services: [] });
+      setEvents(eventsRes.events || []);
+      setSupportLogin(supportLoginRes);
+      setRegisterForms(registerFormsRes.forms || []);
+      setRegisterApps(registerAppsRes.applications || []);
+      setReactionDraft({ title: '', channelId: '', entries: '' });
+      await Promise.all([loadTicketData(guildId), loadAdminData()]);
+      setStatusMessage('');
+    } catch { setStatusMessage('Daten konnten nicht geladen werden'); }
+  }
+
+  async function loadAdminData() {
+    if (!user?.isAdmin) return;
+    try {
+      const [overviewRes, , logsRes] = await Promise.all([
+        apiFetch<any>('/admin/overview'),
+        apiFetch<any>('/admin/activity'),
+        apiFetch<any>('/admin/logs')
+      ]);
+      setAdmin({ overview: overviewRes, activity: null, logs: logsRes.logs || [] });
+    } catch {}
+  }
+
+  async function saveSettingsPayload(payload: Record<string, any>, okMessage: string) {
+    if (!currentGuildId) return;
+    await apiFetch('/settings', { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, ...payload }) });
+    setStatusMessage(okMessage);
+    await loadGuildData(currentGuildId);
+  }
+
+  async function saveBirthday() {
+    await apiFetch('/birthday', {
+      method: 'POST',
+      body: JSON.stringify({
+        guildId: currentGuildId,
+        enabled: birthday.config?.enabled ?? true,
+        channelId: birthday.config?.channelId || '',
+        sendHour: birthday.config?.sendHour || 9,
+        messageTemplate: birthday.config?.messageTemplate || ''
+      })
+    });
+    setStatusMessage('Birthday gespeichert');
+    await loadGuildData(currentGuildId);
+  }
+
+  async function saveStatuspage() {
+    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 }) });
+    setStatusMessage('Server Stats gespeichert');
+    await loadGuildData(currentGuildId);
+  }
+
+  async function saveEvent() {
+    if (!eventDraft.title) return;
+    await apiFetch('/events', {
+      method: 'POST',
+      body: JSON.stringify({
+        guildId: currentGuildId, title: eventDraft.title,
+        description: eventDraft.description, channelId: eventDraft.channelId || undefined,
+        startsAt: eventDraft.startsAt || undefined
+      })
+    });
+    setEventDraft({ title: '', description: '', channelId: '', startsAt: '' });
+    await loadGuildData(currentGuildId);
+    setStatusMessage('Event gespeichert');
+  }
+
+  async function deleteEvent(id: string) {
+    await apiFetch(`/events/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
+    await loadGuildData(currentGuildId);
+  }
+
+  async function saveReactionRole() {
+    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');
+  }
+
+  async function toggleModule(key: string, enabled: boolean) {
+    await saveSettingsPayload({ [key]: enabled }, `${key} aktualisiert`);
+  }
+
+  async function saveAutomation() {
+    await apiFetch('/automations', {
+      method: 'POST',
+      body: JSON.stringify({
+        guildId: currentGuildId, name: automationDraft.name || 'Automation',
+        condition: { category: automationDraft.conditionValue },
+        action: { type: 'reminder', message: automationDraft.actionValue || 'Reminder' }, active: true
+      })
+    });
+    setAutomationDraft({ name: '', conditionValue: '', actionValue: '' });
+    await loadTicketData(currentGuildId);
+  }
+
+  async function saveKbArticle() {
+    await apiFetch('/kb', {
+      method: 'POST',
+      body: JSON.stringify({ guildId: currentGuildId, title: kbDraft.title || 'Artikel', keywords: kbDraft.keywords, content: kbDraft.content })
+    });
+    setKbDraft({ title: '', keywords: '', content: '' });
+    await loadTicketData(currentGuildId);
+  }
+
+  async function updateKbArticle(id: string) {
+    if (!kbEditDraft) return;
+    await apiFetch(`/kb/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify({ guildId: currentGuildId, title: kbEditDraft.title, keywords: kbEditDraft.keywords, content: kbEditDraft.content })
+    });
+    setKbEditDraft(null);
+    setStatusMessage('KB-Artikel aktualisiert');
+    await loadTicketData(currentGuildId);
+  }
+
+  async function deleteKbArticle(id: string) {
+    await apiFetch(`/kb/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
+    setStatusMessage('KB-Artikel gelöscht');
+    await loadTicketData(currentGuildId);
+  }
+
+  async function updateAutomation(id: string) {
+    if (!automationEditDraft) return;
+    await apiFetch(`/automations/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify({ guildId: currentGuildId, name: automationEditDraft.name, condition: { category: automationEditDraft.conditionValue }, action: { type: 'reminder', message: automationEditDraft.actionValue }, active: true })
+    });
+    setAutomationEditDraft(null);
+    setStatusMessage('Automation aktualisiert');
+    await loadTicketData(currentGuildId);
+  }
+
+  async function deleteAutomation(id: string) {
+    await apiFetch(`/automations/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
+    setStatusMessage('Automation gelöscht');
+    await loadTicketData(currentGuildId);
+  }
+
+  async function saveSupportLogin() {
+    if (!supportLogin) return;
+    await apiFetch('/tickets/support-login', {
+      method: 'POST',
+      body: JSON.stringify({ guildId: currentGuildId, ...supportLogin.config })
+    });
+    setStatusMessage('Support Login gespeichert');
+    await loadGuildData(currentGuildId);
+  }
+
+  async function saveForm() {
+    const fields = formDraft.fields.split('\n').filter(Boolean).map((line) => {
+      const parts = line.split('|').map((s) => s.trim());
+      return { label: parts[0] || 'Feld', type: (parts[1] || 'text') as any, required: parts[2] === 'required', options: parts[3] ? parts[3].split(',').map((s) => s.trim()) : undefined };
+    });
+    const body: any = { guildId: currentGuildId, name: formDraft.name, description: formDraft.description, reviewChannelId: formDraft.reviewChannelId || undefined, notifyRoleIds: formDraft.notifyRoleIds.split(',').map((s) => s.trim()).filter(Boolean), fields, isActive: true };
+    if (editingFormId) {
+      await apiFetch(`/register/forms/${editingFormId}`, { method: 'PUT', body: JSON.stringify(body) });
+      setStatusMessage('Formular aktualisiert');
+    } else {
+      await apiFetch('/register/forms', { method: 'POST', body: JSON.stringify(body) });
+      setStatusMessage('Formular erstellt');
+    }
+    setFormDraft({ name: '', description: '', reviewChannelId: '', notifyRoleIds: '', fields: '' });
+    setEditingFormId(null);
+    await loadGuildData(currentGuildId);
+  }
+
+  async function deleteForm(id: string) {
+    await apiFetch(`/register/forms/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
+    setStatusMessage('Formular gelöscht');
+    await loadGuildData(currentGuildId);
+  }
+
+  async function sendFormPanel(formId: string) {
+    if (!supportLogin?.config?.panelChannelId) { setStatusMessage('Bitte zuerst Support Login konfigurieren'); return; }
+    await apiFetch(`/register/forms/${formId}/panel`, { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, channelId: supportLogin.config.panelChannelId }) });
+    setStatusMessage('Panel gesendet');
+  }
+
+  async function addStatusService() {
+    if (!statusServiceDraft.name) return;
+    await apiFetch('/statuspage/service', {
+      method: 'POST',
+      body: JSON.stringify({ guildId: currentGuildId, name: statusServiceDraft.name, url: statusServiceDraft.url, status: statusServiceDraft.status })
+    });
+    setStatusServiceDraft({ name: '', url: '', status: 'unknown' });
+    setStatusMessage('Service hinzugefügt');
+    await loadGuildData(currentGuildId);
+  }
+
+  async function deleteStatusService(id: string) {
+    await apiFetch(`/statuspage/service/${id}`, { method: 'DELETE', body: JSON.stringify({ guildId: currentGuildId }) });
+    setStatusMessage('Service entfernt');
+    await loadGuildData(currentGuildId);
+  }
+
+  async function addStatsItem() {
+    if (!statsItemDraft.label) return;
+    const draft = statsDraft || { enabled: true, categoryName: '', refreshMinutes: 10, items: [] };
+    const items = [...(draft.items || []), { key: statsItemDraft.label.toLowerCase().replace(/\s+/g, '_'), label: statsItemDraft.label, type: statsItemDraft.type }];
+    const updated = { ...draft, items };
+    setStatsDraft(updated);
+    await apiFetch('/server-stats', { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, config: updated }) });
+    setStatsItemDraft({ label: '', type: 'members' });
+    setStatusMessage('Stat-Item hinzugefügt');
+    await loadGuildData(currentGuildId);
+  }
+
+  async function deleteStatsItem(index: number) {
+    const draft = statsDraft || { enabled: true, categoryName: '', refreshMinutes: 10, items: [] };
+    const items = (draft.items || []).filter((_: any, i: number) => i !== index);
+    const updated = { ...draft, items };
+    setStatsDraft(updated);
+    await apiFetch('/server-stats', { method: 'POST', body: JSON.stringify({ guildId: currentGuildId, config: updated }) });
+    setStatusMessage('Stat-Item entfernt');
+    await loadGuildData(currentGuildId);
+  }
+
+  async function loadTicketMessages(ticketId: string) {
+    const res = await apiFetch<any>(`/tickets/${ticketId}/messages`);
+    setTicketMessages(res.messages || []);
+  }
+
+  async function updateTicketStatus(ticketId: string, status: string) {
+    await apiFetch(`/tickets/${ticketId}/status`, { method: 'POST', body: JSON.stringify({ status }) });
+    setStatusMessage('Status aktualisiert');
+    await loadGuildData(currentGuildId);
+  }
+
+  async function closeTicket(ticketId: string) {
+    await apiFetch(`/tickets/${ticketId}/close`, { method: 'POST', body: JSON.stringify({ guildId: currentGuildId }) });
+    setStatusMessage('Ticket geschlossen');
+    await loadGuildData(currentGuildId);
+  }
+
+  const handleLogout = useCallback(() => {
+    window.location.href = `${appConfig.baseAuth || '/auth'}/logout`;
+  }, []);
+
+  return (
+    <AppContext.Provider value={{
+      user, guilds, currentGuildId, section, guildInfo, overview, activity,
+      logs, tickets, pipeline, sla, automations, kbArticles, settings, modules,
+      birthday, reactionRoles, statuspage, serverStats, events, admin, statusMessage,
+      loading, supportLogin, registerForms, registerApps, musicStatus, ticketTab,
+      automationDraft, kbDraft, eventDraft, statusDraft, statsDraft, reactionDraft,
+      formDraft, editingFormId, registerTab, statusServiceDraft, statsItemDraft,
+      ticketDetail, ticketMessages, kbEditDraft, automationEditDraft,
+      setCurrentGuildId, setSection, setSettings, setBirthday, setSupportLogin,
+      setStatusDraft, setStatsDraft, setStatusMessage, loadGuildData,
+      saveSettingsPayload, saveBirthday, saveStatuspage, saveServerStats,
+      toggleModule, handleLogout, loadTicketData, loadTicketMessages,
+      updateTicketStatus, closeTicket, saveAutomation, saveKbArticle,
+      updateKbArticle, deleteKbArticle, updateAutomation, deleteAutomation,
+      saveSupportLogin, saveForm, deleteForm, sendFormPanel, addStatusService,
+      deleteStatusService, addStatsItem, deleteStatsItem, saveEvent, deleteEvent,
+      saveReactionRole, setTicketTab, setAutomationDraft, setKbDraft, setEventDraft,
+      setReactionDraft, setFormDraft, setEditingFormId, setRegisterTab,
+      setStatusServiceDraft, setStatsItemDraft, setTicketDetail, setKbEditDraft,
+      setAutomationEditDraft,
+    }}>
+      {children}
+    </AppContext.Provider>
+  );
+}
+
+export function useApp() {
+  const ctx = useContext(AppContext);
+  if (!ctx) throw new Error('useApp must be used within AppProvider');
+  return ctx;
+}
diff --git a/frontend/src/hooks/useGuildResources.ts b/frontend/src/hooks/useGuildResources.ts
new file mode 100644
index 0000000..620a906
--- /dev/null
+++ b/frontend/src/hooks/useGuildResources.ts
@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+import { apiFetch } from '../utils/api';
+
+type Channel = { id: string; name: string; type: string; parentId?: string };
+type Role = { id: string; name: string; color: string };
+type Category = { id: string; name: string };
+
+export function useGuildResources(guildId?: string) {
+  const [channels, setChannels] = useState<Channel[]>([]);
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+
+  useEffect(() => {
+    if (!guildId) return;
+    apiFetch<{ channels: Channel[]; roles: Role[]; categories: Category[] }>(
+      `/guild/resources?guildId=${encodeURIComponent(guildId)}`
+    ).then((res) => {
+      setChannels(res.channels || []);
+      setRoles(res.roles || []);
+      setCategories(res.categories || []);
+    }).catch(() => {});
+  }, [guildId]);
+
+  return { channels, roles, categories };
+}
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
new file mode 100644
index 0000000..13c1c19
--- /dev/null
+++ b/frontend/src/hooks/useTheme.ts
@@ -0,0 +1,14 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export function useTheme() {
+  const [dark, setDark] = useState(() => localStorage.getItem('papo-theme') !== 'light');
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', dark);
+    localStorage.setItem('papo-theme', dark ? 'dark' : 'light');
+  }, [dark]);
+
+  const toggle = useCallback(() => setDark((d) => !d), []);
+
+  return { dark, toggle };
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 6fa87e1..967ae0b 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { AppProvider } from './context/AppContext';
 import './app.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <AppProvider>
+      <App />
+    </AppProvider>
   </React.StrictMode>
 );
diff --git a/frontend/src/pages/Admin.tsx b/frontend/src/pages/Admin.tsx
new file mode 100644
index 0000000..1958d61
--- /dev/null
+++ b/frontend/src/pages/Admin.tsx
@@ -0,0 +1,71 @@
+import { Card, CardContent, CardHeader, Chip } from '@heroui/react';
+import { Wrench, Activity, Clock, Server, Terminal } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+import { formatDate } from '../utils/formatters';
+
+export function Admin() {
+  const { user, admin } = useApp();
+
+  if (!user?.isAdmin) return null;
+
+  return (
+    <SectionCard title="Admin" subtitle="Bot-weite Übersichten">
+      <div className="grid gap-5 xl:grid-cols-2">
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Bot Overview</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3 p-5">
+            <div className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+              <div className="flex items-center gap-2">
+                <Server size={14} className="text-primary-400" />
+                <span className="text-default-500">Guilds</span>
+              </div>
+              <span className="font-semibold">{admin.overview?.guilds ?? '-'}</span>
+            </div>
+            <div className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+              <div className="flex items-center gap-2">
+                <Activity size={14} className="text-success-400" />
+                <span className="text-default-500">Aktive Guilds (24h)</span>
+              </div>
+              <span className="font-semibold">{admin.overview?.activeGuilds ?? '-'}</span>
+            </div>
+            <div className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+              <div className="flex items-center gap-2">
+                <Clock size={14} className="text-warning-400" />
+                <span className="text-default-500">Uptime</span>
+              </div>
+              <span className="font-semibold">{admin.overview?.uptime ?? '-'}</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="flex items-center justify-between px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Letzte Admin Logs</h3>
+            <Chip size="sm" variant="flat" color="warning">
+              {(admin.logs || []).length} Einträge
+            </Chip>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2 p-5">
+            {(admin.logs || []).length ? (admin.logs || []).slice(0, 20).map((log, i) => (
+              <div key={i} className="flex items-start gap-3 rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                <Terminal size={14} className="mt-0.5 text-default-400 shrink-0" />
+                <div className="min-w-0">
+                  <p className="text-default-500">{log.message || '-'}</p>
+                  <p className="text-tiny text-default-400 mt-0.5">{formatDate(log.timestamp)}</p>
+                </div>
+              </div>
+            )) : (
+              <div className="flex flex-col items-center gap-2 py-4 text-center text-tiny text-default-400">
+                <Terminal size={20} />
+                Keine Logs
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/Automod.tsx b/frontend/src/pages/Automod.tsx
new file mode 100644
index 0000000..35f5510
--- /dev/null
+++ b/frontend/src/pages/Automod.tsx
@@ -0,0 +1,81 @@
+import { Card, CardContent, CardHeader, Input, TextArea, Button, Chip, Switch, Separator } from '@heroui/react';
+import { Shield, Filter, Link, Ban, AlertTriangle, Save } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+
+export function Automod() {
+  const { settings, setSettings, saveSettingsPayload } = useApp();
+
+  return (
+    <SectionCard title="Automod" subtitle="Filter, Logging und Sicherheit">
+      <div className="grid gap-5 xl:grid-cols-2">
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Filter konfigurieren</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Switch isSelected={settings.automodEnabled !== false} onValueChange={(v) => setSettings((s) => ({ ...s, automodEnabled: v }))}>
+              <div className="flex items-center gap-2">
+                <Shield size={16} /> Automod aktiv
+              </div>
+            </Switch>
+
+            <div className="grid grid-cols-2 gap-3">
+              <Switch isSelected={settings.automodConfig?.badWordFilter ?? false} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), badWordFilter: v } }))}>
+                <div className="flex items-center gap-2"><Ban size={14} /> Bad-Word-Filter</div>
+              </Switch>
+              <Switch isSelected={settings.automodConfig?.linkFilter ?? false} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), linkFilter: v } }))}>
+                <div className="flex items-center gap-2"><Link size={14} /> Link-Filter</div>
+              </Switch>
+              <Switch isSelected={settings.automodConfig?.spamFilter ?? false} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), spamFilter: v } }))}>
+                <div className="flex items-center gap-2"><AlertTriangle size={14} /> Spam-Filter</div>
+              </Switch>
+            </div>
+
+            <Input
+              label="Log Channel ID"
+              placeholder="Channel ID für Logs"
+              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) } }))}
+              placeholder="trusted-domain.com, another-safe.site"
+            />
+
+            <Separator />
+
+            <Button color="primary" startContent={<Save size={16} />} onPress={() => saveSettingsPayload({ automodEnabled: settings.automodEnabled !== false, automodConfig: settings.automodConfig || {} }, 'Automod gespeichert')}>
+              Speichern
+            </Button>
+          </CardContent>
+        </Card>
+
+        <div className="flex flex-col gap-4">
+          <Card className="border border-default-100 bg-default-50/20">
+            <CardHeader className="px-5 pt-5 pb-0">
+              <h3 className="text-base font-semibold">Info</h3>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-3 p-5">
+              <div className="rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                <p className="text-default-500">Die Automod-Einstellungen werden nach dem Speichern sofort aktiv.</p>
+              </div>
+              <div className="rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                <p className="text-default-500">Bad-Word-Filter entfernt Nachrichten mit unerwünschten Begriffen.</p>
+              </div>
+              <div className="rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                <p className="text-default-500">Link-Filter blockiert bekannte schädliche Domains und nicht-whitelistete Links.</p>
+              </div>
+              <div className="rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                <p className="text-default-500">Spam-Filter erkennt und unterdrückt Mehrfachnachrichten in kurzer Zeit.</p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/Birthday.tsx b/frontend/src/pages/Birthday.tsx
new file mode 100644
index 0000000..d382b27
--- /dev/null
+++ b/frontend/src/pages/Birthday.tsx
@@ -0,0 +1,77 @@
+import { Card, CardContent, CardHeader, Input, TextArea, Button, Chip, Switch, Separator } from '@heroui/react';
+import { CalendarDays, Save, Cake, Clock } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+
+export function Birthday() {
+  const { birthday, setBirthday, saveBirthday } = useApp();
+
+  return (
+    <SectionCard title="Birthday" subtitle="Geburtstags-Feature und gespeicherte Einträge">
+      <div className="grid gap-5 xl:grid-cols-2">
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Konfiguration</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Switch isSelected={birthday.config?.enabled !== false} onValueChange={(v) => setBirthday((s) => ({ ...s, config: { ...s.config, enabled: v } }))}>
+              <div className="flex items-center gap-2"><Cake size={16} /> Birthday aktiv</div>
+            </Switch>
+
+            <Input
+              label="Channel ID"
+              placeholder="Channel für Geburtstagsnachrichten"
+              value={birthday.config?.channelId || ''}
+              onValueChange={(v) => setBirthday((s) => ({ ...s, config: { ...s.config, channelId: v } }))}
+            />
+
+            <Input
+              label="Sendezeit (Stunde)"
+              type="number"
+              min="0"
+              max="23"
+              value={String(birthday.config?.sendHour ?? 9)}
+              onValueChange={(v) => setBirthday((s) => ({ ...s, config: { ...s.config, sendHour: Number(v || 0) } }))}
+              startContent={<Clock size={16} className="text-default-400" />}
+            />
+
+            <TextArea
+              label="Template"
+              placeholder="Alles Gute zum Geburtstag, {user}!"
+              value={birthday.config?.messageTemplate || ''}
+              onValueChange={(v) => setBirthday((s) => ({ ...s, config: { ...s.config, messageTemplate: v } }))}
+            />
+
+            <Separator />
+
+            <Button color="primary" startContent={<Save size={16} />} onPress={saveBirthday}>Speichern</Button>
+          </CardContent>
+        </Card>
+
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Gespeicherte Geburtstage ({(birthday.birthdays || []).length})</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2 p-5">
+            {(birthday.birthdays || []).length ? (birthday.birthdays || []).map((entry, i) => (
+              <div key={i} className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                <div className="flex items-center gap-2">
+                  <Cake size={14} className="text-primary-400" />
+                  <span className="font-medium">{entry.userId}</span>
+                </div>
+                <Chip size="sm" variant="flat" color="primary">
+                  {String(entry.birthDate || '').replace(/^--/, '')}
+                </Chip>
+              </div>
+            )) : (
+              <div className="flex flex-col items-center gap-2 py-4 text-center text-tiny text-default-400">
+                <CalendarDays size={20} />
+                Keine Einträge
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..9fafc01
--- /dev/null
+++ b/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,208 @@
+import { Card, CardContent, CardHeader, Avatar, Chip, Button, Separator, ScrollShadow } from '@heroui/react';
+import {
+  Bot, UserRound, CalendarDays, Users, Cable, Ticket, Shield, MessageSquare,
+  Command, ChevronRight, Activity, Clock, ArrowUpRight, RefreshCw, Send,
+  Settings, Trash2, Sparkles, Home, Server, Hash, Gauge, Zap, Bell, Tag
+} from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { formatDate, guildIconUrl } from '../utils/formatters';
+import { StatCard } from '../components/shared/StatCard';
+
+export function Dashboard() {
+  const { guildInfo, guilds, currentGuildId, overview, activity, logs, setSection, section } = useApp();
+  const selectedGuild = guilds.find((g) => g.id === currentGuildId);
+  const moduleFlags = guildInfo?.modules || {};
+
+  const quickActions = [
+    { key: 'tickets', label: 'Ticket Panel senden', icon: <Send size={16} />, color: 'primary' as const },
+    { key: 'serverstats', label: 'Sync starten', icon: <RefreshCw size={16} />, color: 'success' as const },
+    { key: 'modules', label: 'Module aktualisieren', icon: <Zap size={16} />, color: 'warning' as const },
+    { key: 'settings', label: 'Einstellungen öffnen', icon: <Settings size={16} />, color: 'default' as const },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <Card className="border border-default-100 bg-gradient-to-r from-primary-500/5 via-default-50/40 to-background overflow-hidden">
+        <CardContent className="flex flex-col gap-6 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 shrink-0" radius="lg" src={guildIconUrl(selectedGuild)} />
+            <div className="min-w-0">
+              <div className="flex items-center gap-3">
+                <h1 className="truncate text-3xl font-black tracking-tight">{guildInfo?.name || selectedGuild?.name}</h1>
+                <Chip color="success" radius="sm" size="sm" startContent={<Bot size={12} />} variant="dot">
+                  Online
+                </Chip>
+              </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).filter(([, v]) => v).map(([key]) => (
+                  <Chip key={key} color="primary" size="sm" variant="flat">
+                    {key.replace('Enabled', '').replace(/([A-Z])/g, ' $1').trim()}
+                  </Chip>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-2 shrink-0">
+            <Chip color="primary" radius="sm" size="sm" variant="flat" startContent={<Gauge size={12} />}>
+              Ping: {guildInfo?.ping || '-'}ms
+            </Chip>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+        <StatCard icon={<Users size={18} />} label="Mitglieder" value={guildInfo?.memberCount ?? 0} />
+        <StatCard icon={<Activity size={18} />} label="Online" value={guildInfo?.onlineCount ?? '-'} />
+        <StatCard icon={<Hash size={18} />} label="Channels" value={`${guildInfo?.textCount || 0}`} />
+        <StatCard icon={<Shield size={18} />} label="Rollen" value={guildInfo?.roleCount ?? '-'} />
+        <StatCard icon={<ArrowUpRight size={18} />} label="Boost Level" value={guildInfo?.boostLevel ?? '-'} />
+        <StatCard icon={<Ticket size={18} />} label="Offene Tickets" value={overview?.tickets?.open ?? 0} color="warning" />
+        <StatCard icon={<Command size={18} />} label="Commands (24h)" value={activity?.commands24h ?? 0} />
+        <StatCard icon={<MessageSquare size={18} />} label="Nachrichten (24h)" value={activity?.messages24h ?? 0} />
+        <StatCard icon={<Bot size={18} />} label="Automod (24h)" value={activity?.automod24h ?? 0} color="danger" />
+        <StatCard icon={<Clock size={18} />} label="Uptime" value={guildInfo?.uptime || '-'} />
+      </div>
+
+      <div className="grid gap-5 xl:grid-cols-2 2xl:grid-cols-3">
+        <Card className="border border-default-100 bg-gradient-to-b from-default-50/40 to-background">
+          <CardHeader className="flex items-center justify-between px-5 pt-5 pb-0">
+            <div>
+              <h2 className="text-lg font-bold">Activity Bereich</h2>
+              <p className="mt-0.5 text-tiny text-default-400">Live Statistiken</p>
+            </div>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3 p-5">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="rounded-xl border border-default-100 bg-default-50/20 p-4">
+                <div className="flex items-center gap-2 text-tiny uppercase tracking-widest text-default-500">
+                  <MessageSquare size={14} className="text-primary-400" /> Nachrichten
+                </div>
+                <div className="mt-1 text-3xl font-black">{activity?.messages24h ?? 0}</div>
+                <div className="text-tiny text-default-400">in den letzten 24h</div>
+              </div>
+              <div className="rounded-xl border border-default-100 bg-default-50/20 p-4">
+                <div className="flex items-center gap-2 text-tiny uppercase tracking-widest text-default-500">
+                  <Command size={14} className="text-success-400" /> Commands
+                </div>
+                <div className="mt-1 text-3xl font-black">{activity?.commands24h ?? 0}</div>
+                <div className="text-tiny text-default-400">in den letzten 24h</div>
+              </div>
+              <div className="rounded-xl border border-default-100 bg-default-50/20 p-4">
+                <div className="flex items-center gap-2 text-tiny uppercase tracking-widest text-default-500">
+                  <Shield size={14} className="text-warning-400" /> Automod
+                </div>
+                <div className="mt-1 text-3xl font-black">{activity?.automod24h ?? 0}</div>
+                <div className="text-tiny text-default-400">Aktionen (24h)</div>
+              </div>
+              <div className="rounded-xl border border-default-100 bg-default-50/20 p-4">
+                <div className="flex items-center gap-2 text-tiny uppercase tracking-widest text-default-500">
+                  <Users size={14} className="text-secondary-400" /> Neue User
+                </div>
+                <div className="mt-1 text-3xl font-black">{activity?.newUsers24h ?? 0}</div>
+                <div className="text-tiny text-default-400">Beitritte (24h)</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="border border-default-100 bg-gradient-to-b from-default-50/40 to-background">
+          <CardHeader className="flex items-center justify-between px-5 pt-5 pb-0">
+            <div>
+              <h2 className="text-lg font-bold">Guild Logs</h2>
+              <p className="mt-0.5 text-tiny text-default-400">Letzte Ereignisse</p>
+            </div>
+            <Button size="sm" variant="light" endContent={<ChevronRight size={14} />} onPress={() => setSection('settings')}>
+              Alle
+            </Button>
+          </CardHeader>
+          <CardContent className="p-5">
+            <ScrollShadow className="max-h-[320px] space-y-2 pr-1" hideScrollBar>
+              {logs.length ? logs.slice(0, 15).map((log, i) => (
+                <div key={`${log.timestamp}-${i}`} className="flex items-start gap-3 rounded-xl border border-default-100 bg-default-50/20 p-3">
+                  <div className={`mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg ${
+                    log.level === 'error' ? 'bg-danger-500/10 text-danger-400' :
+                    log.level === 'warn' ? 'bg-warning-500/10 text-warning-400' :
+                    'bg-primary-500/10 text-primary-400'
+                  }`}>
+                    {log.level === 'error' ? <Shield size={12} /> :
+                     log.level === 'warn' ? <Bell size={12} /> :
+                     <Activity size={12} />}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <Chip
+                        color={log.level === 'error' ? 'danger' : log.level === 'warn' ? 'warning' : 'default'}
+                        size="sm"
+                        variant="flat"
+                        className="h-5"
+                      >
+                        {(log.level || 'info').toUpperCase()}
+                      </Chip>
+                      <span className="text-tiny text-default-400">{formatDate(log.timestamp)}</span>
+                    </div>
+                    <p className="mt-1 text-small text-foreground/80">
+                      {log.category ? <span className="text-default-500">[{log.category}] </span> : ''}{log.message || '-'}
+                    </p>
+                  </div>
+                </div>
+              )) : (
+                <div className="flex flex-col items-center gap-2 py-6 text-center text-small text-default-400">
+                  <Activity size={20} />
+                  Keine Logs
+                </div>
+              )}
+            </ScrollShadow>
+          </CardContent>
+        </Card>
+
+        <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-lg font-bold">Quick Actions</h2>
+            <p className="mt-0.5 text-tiny text-default-400">Schnellzugriff</p>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2 p-5">
+            {quickActions.map((action) => (
+              <Button
+                key={action.key}
+                className="justify-start"
+                color={action.color}
+                startContent={action.icon}
+                variant="flat"
+                onPress={() => setSection(action.key as any)}
+              >
+                {action.label}
+              </Button>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+        {(['tickets', 'supportlogin', 'automod', 'welcome', 'birthday', 'reactionroles'] as const).map((key) => {
+          const item = navItemMap[key];
+          return (
+            <Card key={key} isPressable className="border border-default-100 bg-default-50/20 transition-all hover:border-primary-300 hover:shadow-md" onPress={() => setSection(key)}>
+              <CardContent className="flex flex-col items-start gap-2 p-4">
+                <div className="flex size-10 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
+                  {item.icon}
+                </div>
+                <div className="font-semibold text-sm">{item.label}</div>
+                <div className="text-tiny text-default-400">Modul verwalten</div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const navItemMap: Record<string, { label: string; icon: React.ReactNode }> = {
+  tickets: { label: 'Ticketsystem', icon: <Ticket size={18} /> },
+  supportlogin: { label: 'Support Login', icon: <Send size={18} /> },
+  automod: { label: 'Automod', icon: <Shield size={18} /> },
+  welcome: { label: 'Willkommen', icon: <Sparkles size={18} /> },
+  birthday: { label: 'Birthday', icon: <CalendarDays size={18} /> },
+  reactionroles: { label: 'Reaction Roles', icon: <Tag size={18} /> },
+};
diff --git a/frontend/src/pages/DynamicVoice.tsx b/frontend/src/pages/DynamicVoice.tsx
new file mode 100644
index 0000000..ce285dd
--- /dev/null
+++ b/frontend/src/pages/DynamicVoice.tsx
@@ -0,0 +1,70 @@
+import { Card, CardContent, CardHeader, Input, Button, Chip, Switch, Separator } from '@heroui/react';
+import { AudioLines, Save, Mic, Users } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+
+export function DynamicVoice() {
+  const { settings, setSettings, saveSettingsPayload } = useApp();
+
+  return (
+    <SectionCard title="Dynamic Voice" subtitle="Voice-Lobby, Template und Limits">
+      <div className="grid gap-5 xl:grid-cols-2">
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Konfiguration</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Switch isSelected={settings.dynamicVoiceEnabled !== false} onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceEnabled: v }))}>
+              <div className="flex items-center gap-2"><AudioLines size={16} /> Dynamic Voice aktiv</div>
+            </Switch>
+
+            <Input
+              label="Lobby Channel ID"
+              placeholder="Channel ID der Lobby"
+              value={settings.dynamicVoiceConfig?.lobbyChannelId || ''}
+              onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceConfig: { ...(s.dynamicVoiceConfig || {}), lobbyChannelId: v } }))}
+            />
+
+            <Input
+              label="Kategorie ID"
+              placeholder="Kategorie für neue Channels"
+              value={settings.dynamicVoiceConfig?.categoryId || ''}
+              onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceConfig: { ...(s.dynamicVoiceConfig || {}), categoryId: v } }))}
+            />
+
+            <Input
+              label="Template"
+              placeholder="Channel-Name Template"
+              value={settings.dynamicVoiceConfig?.template || ''}
+              onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceConfig: { ...(s.dynamicVoiceConfig || {}), template: v } }))}
+            />
+
+            <Separator />
+
+            <Button color="primary" startContent={<Save size={16} />} onPress={() => saveSettingsPayload({ dynamicVoiceConfig: settings.dynamicVoiceConfig || {} }, 'Dynamic Voice gespeichert')}>
+              Speichern
+            </Button>
+          </CardContent>
+        </Card>
+
+        <div className="flex flex-col gap-4">
+          <Card className="border border-default-100 bg-default-50/20">
+            <CardHeader className="px-5 pt-5 pb-0">
+              <h3 className="text-base font-semibold">Info</h3>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-3 p-5">
+              <div className="flex items-center gap-3 rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                <Mic size={16} className="text-primary-400" />
+                <span className="text-default-500">Benutzer erstellen eigene Voice-Channels durch Beitreten der Lobby</span>
+              </div>
+              <div className="flex items-center gap-3 rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                <Users size={16} className="text-success-400" />
+                <span className="text-default-500">Channel-Owner können Limits und Berechtigungen verwalten</span>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/Events.tsx b/frontend/src/pages/Events.tsx
new file mode 100644
index 0000000..a5a29e9
--- /dev/null
+++ b/frontend/src/pages/Events.tsx
@@ -0,0 +1,86 @@
+import { Card, CardContent, CardHeader, Input, TextArea, Button, Chip, Separator } from '@heroui/react';
+import { CalendarDays, Trash2, Plus, Clock } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+import { formatDate } from '../utils/formatters';
+
+export function Events() {
+  const { events, eventDraft, setEventDraft, saveEvent, deleteEvent } = useApp();
+
+  return (
+    <SectionCard title="Events" subtitle="Bestehende Events und schneller Neu-Anlage-Flow">
+      <div className="grid gap-5 xl:grid-cols-[1fr_420px]">
+        <div>
+          <h3 className="mb-3 text-base font-semibold">Bestehende Events ({(events || []).length})</h3>
+          <div className="space-y-3">
+            {(events || []).length ? (events || []).map((event) => (
+              <Card key={event.id} className="border border-default-100 bg-default-50/20">
+                <CardContent className="flex flex-col gap-3 p-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <CalendarDays size={16} className="text-primary-400 shrink-0" />
+                      <span className="font-semibold text-small truncate">{event.title}</span>
+                    </div>
+                    <Button color="danger" size="sm" variant="flat" startContent={<Trash2 size={14} />} onPress={() => deleteEvent(event.id)}>
+                      Löschen
+                    </Button>
+                  </div>
+                  <p className="text-small text-default-400">{event.description || 'Keine Beschreibung'}</p>
+                  <div className="flex items-center gap-2 text-tiny text-default-500">
+                    <Clock size={12} />
+                    {formatDate(event.startsAt)}
+                  </div>
+                </CardContent>
+              </Card>
+            )) : (
+              <div className="flex flex-col items-center gap-2 py-8 text-center text-small text-default-400">
+                <CalendarDays size={24} />
+                Keine Events
+              </div>
+            )}
+          </div>
+        </div>
+
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Neues Event</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Input
+              label="Titel"
+              placeholder="Event Name"
+              value={eventDraft.title}
+              onValueChange={(v) => setEventDraft((s) => ({ ...s, title: v }))}
+            />
+
+            <TextArea
+              label="Beschreibung"
+              placeholder="Event Beschreibung"
+              value={eventDraft.description}
+              onValueChange={(v) => setEventDraft((s) => ({ ...s, description: v }))}
+            />
+
+            <Input
+              label="Channel ID"
+              placeholder="Channel für Erinnerungen"
+              value={eventDraft.channelId}
+              onValueChange={(v) => setEventDraft((s) => ({ ...s, channelId: v }))}
+            />
+
+            <Input
+              label="Start (ISO)"
+              type="datetime-local"
+              placeholder="2024-12-24T18:00"
+              value={eventDraft.startsAt}
+              onValueChange={(v) => setEventDraft((s) => ({ ...s, startsAt: v }))}
+            />
+
+            <Button color="primary" startContent={<Plus size={16} />} onPress={saveEvent}>
+              Event speichern
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/GuildSelect.tsx b/frontend/src/pages/GuildSelect.tsx
new file mode 100644
index 0000000..18cc9e2
--- /dev/null
+++ b/frontend/src/pages/GuildSelect.tsx
@@ -0,0 +1,38 @@
+import { Card, CardContent, Avatar, Button } from '@heroui/react';
+import { useApp } from '../context/AppContext';
+import { guildIconUrl } from '../utils/formatters';
+
+export function GuildSelect() {
+  const { guilds, setCurrentGuildId } = useApp();
+
+  return (
+    <div className="mx-auto flex min-h-screen max-w-6xl flex-col items-center justify-center px-6 py-12">
+      <div className="mb-8 text-center">
+        <div className="mx-auto mb-4 flex size-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-400 to-primary-600 text-2xl font-black text-white shadow-lg shadow-primary-500/25">
+          P
+        </div>
+        <h1 className="text-3xl font-bold tracking-tight">Wähle einen Server</h1>
+        <p className="mt-2 text-default-500">Wähle einen Discord-Server aus, um das Dashboard zu öffnen.</p>
+      </div>
+
+      <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 hover:shadow-lg hover:shadow-primary-500/5"
+            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="mt-0.5 text-small text-default-400">ID: {guild.id}</div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Modules.tsx b/frontend/src/pages/Modules.tsx
new file mode 100644
index 0000000..17fa273
--- /dev/null
+++ b/frontend/src/pages/Modules.tsx
@@ -0,0 +1,72 @@
+import { Card, CardContent, Switch } from '@heroui/react';
+import { Puzzle, CheckCircle, XCircle } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+
+export function ModulesPage() {
+  const { modules, toggleModule } = useApp();
+
+  const activeModules = modules.filter((m) => m.enabled);
+  const inactiveModules = modules.filter((m) => !m.enabled);
+
+  return (
+    <SectionCard title="Module" subtitle="Module direkt umschalten">
+      <div className="space-y-5">
+        {activeModules.length > 0 && (
+          <div>
+            <h3 className="mb-3 flex items-center gap-2 text-base font-semibold">
+              <CheckCircle size={16} className="text-success-400" />
+              Aktive Module ({activeModules.length})
+            </h3>
+            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+              {activeModules.map((module) => (
+                <Card key={module.key} className="border border-success-100/30 bg-success-50/5">
+                  <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>
+                      {module.description && (
+                        <div className="text-small text-default-400 truncate">{module.description}</div>
+                      )}
+                    </div>
+                    <Switch isSelected={module.enabled} onValueChange={(v) => toggleModule(module.key, v)} />
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {inactiveModules.length > 0 && (
+          <div>
+            <h3 className="mb-3 flex items-center gap-2 text-base font-semibold">
+              <XCircle size={16} className="text-default-400" />
+              Deaktivierte Module ({inactiveModules.length})
+            </h3>
+            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+              {inactiveModules.map((module) => (
+                <Card key={module.key} className="border border-default-100 bg-default-50/20 opacity-70">
+                  <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>
+                      {module.description && (
+                        <div className="text-small text-default-400 truncate">{module.description}</div>
+                      )}
+                    </div>
+                    <Switch isSelected={module.enabled} onValueChange={(v) => toggleModule(module.key, v)} />
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {modules.length === 0 && (
+          <div className="flex flex-col items-center gap-2 py-8 text-center text-small text-default-400">
+            <Puzzle size={24} />
+            Keine Module verfügbar
+          </div>
+        )}
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/Music.tsx b/frontend/src/pages/Music.tsx
new file mode 100644
index 0000000..c2f3db2
--- /dev/null
+++ b/frontend/src/pages/Music.tsx
@@ -0,0 +1,62 @@
+import { Card, CardContent, CardHeader, Chip, Button } from '@heroui/react';
+import { Music, Play, List, Repeat, ExternalLink } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+import { StatCard } from '../components/shared/StatCard';
+
+export function MusicPage() {
+  const { musicStatus } = useApp();
+
+  return (
+    <SectionCard title="Musik-Status" subtitle="Aktuelle Wiedergabe und Queues pro Guild.">
+      <div className="space-y-5">
+        <div className="grid gap-4 sm:grid-cols-3">
+          <StatCard icon={<Music size={18} />} label="Aktive Guilds" value={musicStatus.activeGuilds} color="primary" />
+          <StatCard icon={<Play size={18} />} label="Aktive Sessions" value={musicStatus.sessions.length} color="success" />
+        </div>
+
+        <div className="space-y-3">
+          <h3 className="text-base font-semibold">Sessions ({musicStatus.sessions.length})</h3>
+          {musicStatus.sessions.length ? musicStatus.sessions.map((session) => (
+            <Card key={session.guildId} className="border border-default-100 bg-default-50/20">
+              <CardContent className="flex flex-col gap-3 p-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Music size={16} className="text-primary-400" />
+                    <span className="font-semibold text-small">{session.guildId}</span>
+                  </div>
+                  <div className="flex gap-2">
+                    <Chip size="sm" variant="flat" startContent={<Repeat size={12} />}>
+                      {session.loop}
+                    </Chip>
+                    <Chip size="sm" variant="flat" startContent={<List size={12} />}>
+                      {session.queueLength} in Queue
+                    </Chip>
+                  </div>
+                </div>
+                {session.nowPlaying ? (
+                  <div className="rounded-xl bg-default-100/50 px-4 py-3 text-small">
+                    <span className="text-default-500">Jetzt läuft: </span>
+                    <a href={session.nowPlaying.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-primary-400 hover:underline">
+                      {session.nowPlaying.title}
+                      <ExternalLink size={12} />
+                    </a>
+                  </div>
+                ) : (
+                  <div className="rounded-xl bg-default-100/30 px-4 py-3 text-small text-default-400">
+                    Keine aktive Wiedergabe
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )) : (
+            <div className="flex flex-col items-center gap-2 py-8 text-center text-small text-default-400">
+              <Music size={24} />
+              Keine aktiven Musik-Sessions
+            </div>
+          )}
+        </div>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/ReactionRoles.tsx b/frontend/src/pages/ReactionRoles.tsx
new file mode 100644
index 0000000..4aaed44
--- /dev/null
+++ b/frontend/src/pages/ReactionRoles.tsx
@@ -0,0 +1,77 @@
+import { Card, CardContent, CardHeader, Input, TextArea, Button, Chip, Separator } from '@heroui/react';
+import { Tag, Save, Hash, List } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+
+export function ReactionRoles() {
+  const { reactionRoles, reactionDraft, setReactionDraft, saveReactionRole } = useApp();
+
+  return (
+    <SectionCard title="Reaction Roles" subtitle="Sets anzeigen und neue Zuordnungen anlegen">
+      <div className="grid gap-5 xl:grid-cols-[1fr_420px]">
+        <div>
+          <h3 className="mb-3 text-base font-semibold">Bestehende Sets ({reactionRoles.length})</h3>
+          <div className="space-y-3">
+            {reactionRoles.length ? reactionRoles.map((set, i) => (
+              <Card key={set.id || i} className="border border-default-100 bg-default-50/20">
+                <CardContent className="flex items-center gap-3 p-4">
+                  <div className="flex size-10 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
+                    <Tag size={18} />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="font-semibold text-small truncate">{set.title || 'Reaction Role'}</div>
+                    <div className="text-tiny text-default-400 truncate">Channel: {set.channelId || '-'}</div>
+                  </div>
+                  <Chip size="sm" variant="flat">{(set.entries?.length || 0)} Einträge</Chip>
+                </CardContent>
+              </Card>
+            )) : (
+              <div className="flex flex-col items-center gap-2 py-8 text-center text-small text-default-400">
+                <Tag size={24} />
+                Keine Sets
+              </div>
+            )}
+          </div>
+        </div>
+
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Neues Set</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Input
+              label="Titel"
+              placeholder="Rollenauswahl"
+              value={reactionDraft.title}
+              onValueChange={(v) => setReactionDraft((s) => ({ ...s, title: v }))}
+            />
+
+            <Input
+              label="Channel ID"
+              placeholder="Channel für die Nachricht"
+              value={reactionDraft.channelId}
+              onValueChange={(v) => setReactionDraft((s) => ({ ...s, channelId: v }))}
+            />
+
+            <div>
+              <label className="block text-small font-medium mb-1">Einträge</label>
+              <TextArea
+                placeholder="Emoji | Role ID | Label&#10;:emoji: | 123456789 | Rolle 1&#10;:wave: | 987654321 | Rolle 2"
+                minRows={6}
+                value={reactionDraft.entries}
+                onValueChange={(v) => setReactionDraft((s) => ({ ...s, entries: v }))}
+              />
+              <p className="mt-1 text-tiny text-default-400">
+                Pro Zeile: Emoji | Role ID | Label (optional) | Beschreibung (optional)
+              </p>
+            </div>
+
+            <Button color="primary" startContent={<Save size={16} />} onPress={saveReactionRole}>
+              Reaction Role speichern
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
new file mode 100644
index 0000000..6102b2b
--- /dev/null
+++ b/frontend/src/pages/Register.tsx
@@ -0,0 +1,137 @@
+import { Card, CardContent, CardHeader, Input, TextArea, Button, Chip, Tabs, Tab, Separator } from '@heroui/react';
+import { ClipboardList, Pencil, Trash2, Send, Plus, FileText } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+import { formatDate } from '../utils/formatters';
+
+export function Register() {
+  const {
+    registerForms, registerApps, registerTab, setRegisterTab,
+    formDraft, setFormDraft, editingFormId, setEditingFormId,
+    saveForm, deleteForm, sendFormPanel
+  } = useApp();
+
+  return (
+    <SectionCard title="Registrierungsformulare" subtitle="Bewerbungs-Formulare und eingegangene Anträge verwalten.">
+      <Tabs aria-label="Register Tabs" color="primary" selectedKey={registerTab} variant="bordered" onSelectionChange={(key) => setRegisterTab(String(key))}>
+        <Tab key="forms" title="Formulare" />
+        <Tab key="apps" title="Anträge" />
+      </Tabs>
+
+      {registerTab === 'forms' && (
+        <div className="mt-5 grid gap-5 xl:grid-cols-[1fr_420px]">
+          <div>
+            <h3 className="mb-3 text-base font-semibold">Bestehende Formulare ({registerForms.length})</h3>
+            <div className="space-y-3">
+              {registerForms.length ? registerForms.map((f) => (
+                <Card key={f.id} className="border border-default-100 bg-default-50/20">
+                  <CardContent className="flex flex-col gap-3 p-4">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2 min-w-0">
+                        <FileText size={16} className="text-primary-400 shrink-0" />
+                        <span className="font-semibold text-small truncate">{f.name}</span>
+                      </div>
+                      <div className="flex gap-1">
+                        <Button isIconOnly size="sm" variant="light" onPress={() => {
+                          setFormDraft({
+                            name: f.name, description: f.description || '',
+                            reviewChannelId: f.reviewChannelId || '',
+                            notifyRoleIds: (f.notifyRoleIds || []).join(', '),
+                            fields: (f.fields || []).map((fd) =>
+                              fd.label + '|' + fd.type + (fd.required ? '|required' : '') + (fd.options ? '|' + fd.options.join(',') : '')
+                            ).join('\n')
+                          });
+                          setEditingFormId(f.id);
+                        }}>
+                          <Pencil size={14} />
+                        </Button>
+                        <Button isIconOnly size="sm" variant="light" color="danger" onPress={() => deleteForm(f.id)}>
+                          <Trash2 size={14} />
+                        </Button>
+                      </div>
+                    </div>
+                    <p className="text-small text-default-400">{f.description || 'Keine Beschreibung'}</p>
+                    <div className="flex items-center gap-2 text-tiny">
+                      <Chip size="sm" variant="flat" color={f.isActive ? 'success' : 'default'}>
+                        {f.isActive ? 'Aktiv' : 'Inaktiv'}
+                      </Chip>
+                      <span className="text-default-400">{f.fields?.length || 0} Felder</span>
+                      <Button size="sm" variant="flat" startContent={<Send size={12} />} onPress={() => sendFormPanel(f.id)}>
+                        Panel senden
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              )) : (
+                <div className="flex flex-col items-center gap-2 py-8 text-center text-small text-default-400">
+                  <ClipboardList size={24} />
+                  Keine Formulare
+                </div>
+              )}
+            </div>
+          </div>
+
+          <Card className="border border-default-100 bg-default-50/20">
+            <CardHeader className="px-5 pt-5 pb-0">
+              <h3 className="text-base font-semibold">{editingFormId ? 'Formular bearbeiten' : 'Neues Formular'}</h3>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4 p-5">
+              <Input label="Name" value={formDraft.name} onValueChange={(v) => setFormDraft((s) => ({ ...s, name: v }))} />
+              <Input label="Beschreibung" value={formDraft.description} onValueChange={(v) => setFormDraft((s) => ({ ...s, description: v }))} />
+              <Input label="Review Channel ID" value={formDraft.reviewChannelId} onValueChange={(v) => setFormDraft((s) => ({ ...s, reviewChannelId: v }))} />
+              <Input label="Benachrichtigungs-Rollen (Komma-getrennt)" value={formDraft.notifyRoleIds} onValueChange={(v) => setFormDraft((s) => ({ ...s, notifyRoleIds: v }))} />
+              <TextArea label="Felder (label|type|required|options)" minRows={6} value={formDraft.fields} onValueChange={(v) => setFormDraft((s) => ({ ...s, fields: v }))} />
+              <p className="text-tiny text-default-400">
+                Pro Zeile: label | type (text/paragraph/select/multi) | required | option1,option2
+              </p>
+              <div className="flex gap-2">
+                <Button color="primary" onPress={saveForm}>{editingFormId ? 'Aktualisieren' : 'Erstellen'}</Button>
+                {editingFormId && (
+                  <Button variant="flat" onPress={() => { setEditingFormId(null); setFormDraft({ name: '', description: '', reviewChannelId: '', notifyRoleIds: '', fields: '' }); }}>
+                    Abbrechen
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {registerTab === 'apps' && (
+        <div className="mt-5">
+          <h3 className="mb-3 text-base font-semibold">Eingegangene Anträge ({registerApps.length})</h3>
+          <div className="space-y-3">
+            {registerApps.length ? registerApps.map((app) => (
+              <Card key={app.id} className="border border-default-100 bg-default-50/20">
+                <CardContent className="flex flex-col gap-3 p-4">
+                  <div className="flex items-center justify-between">
+                    <div className="font-semibold">{app.username || app.userId}</div>
+                    <Chip size="sm" variant="flat" color={app.status === 'approved' ? 'success' : app.status === 'rejected' ? 'danger' : 'warning'}>
+                      {app.status}
+                    </Chip>
+                  </div>
+                  <div className="text-tiny text-default-400">{formatDate(app.createdAt)}</div>
+                  {app.answers?.length ? (
+                    <div className="space-y-1">
+                      {app.answers.map((a, i) => (
+                        <div key={i} className="text-small">
+                          <span className="text-default-500">{a.label || 'Frage'}: </span>
+                          {a.value}
+                        </div>
+                      ))}
+                    </div>
+                  ) : null}
+                </CardContent>
+              </Card>
+            )) : (
+              <div className="flex flex-col items-center gap-2 py-8 text-center text-small text-default-400">
+                <ClipboardList size={24} />
+                Keine Anträge
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/ServerStats.tsx b/frontend/src/pages/ServerStats.tsx
new file mode 100644
index 0000000..41f79fc
--- /dev/null
+++ b/frontend/src/pages/ServerStats.tsx
@@ -0,0 +1,94 @@
+import { Card, CardContent, CardHeader, Input, Button, Chip, Switch, Separator } from '@heroui/react';
+import { Activity, Save, Trash2, Plus, BarChart3 } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+
+export function ServerStats() {
+  const { statsDraft, setStatsDraft, saveServerStats, statsItemDraft, setStatsItemDraft, addStatsItem, deleteStatsItem } = useApp();
+
+  const items = (statsDraft?.items || []);
+
+  return (
+    <SectionCard title="Server Stats" subtitle="Counter und Refresh-Intervall steuern">
+      <div className="grid gap-5 xl:grid-cols-[420px_1fr]">
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Konfiguration</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Switch isSelected={statsDraft?.enabled === true} onValueChange={(v) => setStatsDraft((s) => ({ ...(s || {}), enabled: v }))}>
+              <div className="flex items-center gap-2"><BarChart3 size={16} /> Server Stats aktiv</div>
+            </Switch>
+
+            <Input
+              label="Kategorie-Name"
+              placeholder="?? Server Stats"
+              value={statsDraft?.categoryName || ''}
+              onValueChange={(v) => setStatsDraft((s) => ({ ...(s || {}), categoryName: v }))}
+            />
+
+            <Input
+              label="Refresh (Minuten)"
+              type="number"
+              value={String(statsDraft?.refreshMinutes || 10)}
+              onValueChange={(v) => setStatsDraft((s) => ({ ...(s || {}), refreshMinutes: Number(v || 10) }))}
+            />
+
+            <Button color="primary" startContent={<Save size={16} />} onPress={saveServerStats}>
+              Server Stats speichern
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Items ({items.length})</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3 p-5">
+            {items.length ? items.map((item, i) => (
+              <div key={i} className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                <div className="flex items-center gap-2">
+                  <Activity size={14} className="text-primary-400" />
+                  <span className="font-medium">{item.label || item.key}</span>
+                  <Chip size="sm" variant="flat">{item.type || '-'}</Chip>
+                </div>
+                <Button isIconOnly size="sm" variant="light" color="danger" onPress={() => deleteStatsItem(i)}>
+                  <Trash2 size={14} />
+                </Button>
+              </div>
+            )) : (
+              <div className="flex flex-col items-center gap-2 py-4 text-center text-tiny text-default-400">
+                <BarChart3 size={20} />
+                Keine Items
+              </div>
+            )}
+
+            <Separator />
+
+            <div>
+              <h4 className="text-small font-semibold mb-2">Item hinzufügen</h4>
+              <div className="flex flex-col gap-2">
+                <Input placeholder="Label" value={statsItemDraft.label} onValueChange={(v) => setStatsItemDraft((s) => ({ ...s, label: v }))} />
+                <select
+                  className="w-full rounded-xl border border-default-200 bg-default-50 px-3 py-2 text-sm outline-none"
+                  value={statsItemDraft.type}
+                  onChange={(e) => setStatsItemDraft((s) => ({ ...s, type: e.target.value }))}
+                >
+                  <option value="members">Mitglieder</option>
+                  <option value="channels">Channels</option>
+                  <option value="roles">Rollen</option>
+                  <option value="boosts">Boosts</option>
+                  <option value="online">Online</option>
+                  <option value="custom">Custom</option>
+                </select>
+                <Button size="sm" color="primary" startContent={<Plus size={14} />} onPress={addStatsItem}>
+                  Hinzufügen
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
new file mode 100644
index 0000000..196c111
--- /dev/null
+++ b/frontend/src/pages/Settings.tsx
@@ -0,0 +1,81 @@
+import { Card, CardContent, CardHeader, Input, Button, Switch, Separator } from '@heroui/react';
+import { Settings, Save, Logs, Bell, Shield, Edit3, Trash2 } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+
+export function SettingsPage() {
+  const { settings, setSettings, saveSettingsPayload } = useApp();
+
+  return (
+    <SectionCard title="Einstellungen & Logging" subtitle="Globale Guild-Settings und Log-Kategorien">
+      <div className="grid gap-5 xl:grid-cols-2">
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Allgemein</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Input
+              label="Welcome Channel ID"
+              placeholder="Channel ID"
+              value={settings.welcomeChannelId || ''}
+              onValueChange={(v) => setSettings((s) => ({ ...s, welcomeChannelId: v }))}
+            />
+
+            <Input
+              label="Log Channel ID"
+              placeholder="Channel ID"
+              value={settings.logChannelId || ''}
+              onValueChange={(v) => setSettings((s) => ({ ...s, logChannelId: v }))}
+            />
+
+            <Input
+              label="Support Role ID"
+              placeholder="Role ID"
+              value={settings.supportRoleId || ''}
+              onValueChange={(v) => setSettings((s) => ({ ...s, supportRoleId: v }))}
+            />
+
+            <Separator />
+
+            <Button color="primary" startContent={<Save size={16} />} onPress={() => saveSettingsPayload(settings, 'Settings gespeichert')}>
+              Speichern
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Logging Kategorien</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Switch isSelected={settings.loggingConfig?.categories?.joinLeave !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), joinLeave: v } } }))}>
+              <div className="flex items-center gap-2"><Logs size={14} /> Join / Leave loggen</div>
+            </Switch>
+
+            <Switch isSelected={settings.loggingConfig?.categories?.messageEdit !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), messageEdit: v } } }))}>
+              <div className="flex items-center gap-2"><Edit3 size={14} /> Message Edit loggen</div>
+            </Switch>
+
+            <Switch isSelected={settings.loggingConfig?.categories?.messageDelete !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), messageDelete: v } } }))}>
+              <div className="flex items-center gap-2"><Trash2 size={14} /> Message Delete loggen</div>
+            </Switch>
+
+            <Switch isSelected={settings.loggingConfig?.categories?.automodActions !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), automodActions: v } } }))}>
+              <div className="flex items-center gap-2"><Shield size={14} /> Automod Actions loggen</div>
+            </Switch>
+
+            <Switch isSelected={settings.loggingConfig?.categories?.ticketActions !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), ticketActions: v } } }))}>
+              <div className="flex items-center gap-2"><Bell size={14} /> Ticket Actions loggen</div>
+            </Switch>
+
+            <Separator />
+
+            <Button color="primary" startContent={<Save size={16} />} onPress={() => saveSettingsPayload(settings, 'Settings gespeichert')}>
+              Speichern
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/Statuspage.tsx b/frontend/src/pages/Statuspage.tsx
new file mode 100644
index 0000000..c083061
--- /dev/null
+++ b/frontend/src/pages/Statuspage.tsx
@@ -0,0 +1,93 @@
+import { Card, CardContent, CardHeader, Input, Button, Chip, Switch, Separator } from '@heroui/react';
+import { RadioTower, Save, Trash2, Plus, Activity as ActivityIcon } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+import type { StatusService } from '../types';
+
+export function Statuspage() {
+  const { statusDraft, setStatusDraft, saveStatuspage, statusServiceDraft, setStatusServiceDraft, addStatusService, deleteStatusService } = useApp();
+
+  const services = ((statusDraft?.services || []) as StatusService[]);
+
+  return (
+    <SectionCard title="Statuspage" subtitle="Statusseite und Service-Liste verwalten">
+      <div className="grid gap-5 xl:grid-cols-[420px_1fr]">
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Konfiguration</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Switch isSelected={statusDraft?.enabled !== false} onValueChange={(v) => setStatusDraft((s) => ({ ...(s || {}), enabled: v }))}>
+              <div className="flex items-center gap-2"><RadioTower size={16} /> Statuspage aktiv</div>
+            </Switch>
+
+            <Input
+              label="Channel ID"
+              placeholder="Channel für Status-Updates"
+              value={statusDraft?.channelId || ''}
+              onValueChange={(v) => setStatusDraft((s) => ({ ...(s || {}), channelId: v }))}
+            />
+
+            <Input
+              label="Intervall (ms)"
+              type="number"
+              value={String(statusDraft?.intervalMs || 60000)}
+              onValueChange={(v) => setStatusDraft((s) => ({ ...(s || {}), intervalMs: Number(v || 60000) }))}
+            />
+
+            <Button color="primary" startContent={<Save size={16} />} onPress={saveStatuspage}>
+              Statuspage speichern
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Services ({services.length})</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3 p-5">
+            {services.length ? services.map((service) => (
+              <div key={service.id} className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                <div className="flex items-center gap-3 min-w-0">
+                    <div className="size-2 rounded-full shrink-0" />
+                  <div className="min-w-0">
+                    <span className="font-medium">{service.name || 'Service'}</span>
+                    <span className="ml-2 text-default-400 text-tiny truncate">{service.url || ''}</span>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Chip size="sm" variant="flat" color={
+                    service.status === 'operational' ? 'success' :
+                    service.status === 'degraded' ? 'warning' :
+                    service.status === 'down' ? 'danger' : 'default'
+                  }>{service.status || 'unknown'}</Chip>
+                  <Button isIconOnly size="sm" variant="light" color="danger" onPress={() => deleteStatusService(service.id)}>
+                    <Trash2 size={14} />
+                  </Button>
+                </div>
+              </div>
+            )) : (
+              <div className="flex flex-col items-center gap-2 py-4 text-center text-tiny text-default-400">
+                <ActivityIcon size={20} />
+                Keine Services
+              </div>
+            )}
+
+            <Separator />
+
+            <div>
+              <h4 className="text-small font-semibold mb-2">Service hinzufügen</h4>
+              <div className="flex flex-col gap-2">
+                <Input placeholder="Name" value={statusServiceDraft.name} onValueChange={(v) => setStatusServiceDraft((s) => ({ ...s, name: v }))} />
+                <Input placeholder="URL (optional)" value={statusServiceDraft.url} onValueChange={(v) => setStatusServiceDraft((s) => ({ ...s, url: v }))} />
+                <Button size="sm" color="primary" startContent={<Plus size={14} />} onPress={addStatusService}>
+                  Hinzufügen
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/SupportLogin.tsx b/frontend/src/pages/SupportLogin.tsx
new file mode 100644
index 0000000..9c21f6f
--- /dev/null
+++ b/frontend/src/pages/SupportLogin.tsx
@@ -0,0 +1,119 @@
+import { Card, CardContent, CardHeader, Input, TextArea, Button, Chip, Switch, Separator } from '@heroui/react';
+import { LogIn, UserRound, Eye, Save, Send, RefreshCw } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+
+export function SupportLogin() {
+  const { supportLogin, setSupportLogin, saveSupportLogin } = useApp();
+
+  return (
+    <SectionCard title="Support Login" subtitle="Login-Panel für Supporter konfigurieren">
+      <div className="grid gap-5 xl:grid-cols-[1fr_400px]">
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Panel-Konfiguration</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Switch
+              isSelected={supportLogin?.config?.autoRefresh !== false}
+              onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, autoRefresh: v } } : s)}
+            >
+              Auto-Refresh aktiv
+            </Switch>
+
+            <Input
+              label="Panel Channel ID"
+              placeholder="Channel ID eingeben"
+              value={supportLogin?.config?.panelChannelId || ''}
+              onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, panelChannelId: v } } : s)}
+            />
+
+            <Input
+              label="Titel"
+              value={supportLogin?.config?.title || 'Support Login'}
+              onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, title: v } } : s)}
+            />
+
+            <TextArea
+              label="Beschreibung"
+              value={supportLogin?.config?.description || ''}
+              onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, description: v } } : s)}
+            />
+
+            <Input
+              label="Login Button Label"
+              value={supportLogin?.config?.loginLabel || 'Ich bin jetzt im Support'}
+              onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, loginLabel: v } } : s)}
+            />
+
+            <Input
+              label="Logout Button Label"
+              value={supportLogin?.config?.logoutLabel || 'Ich bin nicht mehr im Support'}
+              onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, logoutLabel: v } } : s)}
+            />
+
+            <Separator />
+
+            <div className="flex gap-2">
+              <Button color="primary" startContent={<Save size={16} />} onPress={saveSupportLogin}>
+                Speichern & Panel senden
+              </Button>
+              <Button variant="flat" startContent={<Send size={16} />}>
+                Panel manuell senden
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="space-y-4">
+          <Card className="border border-default-100 bg-default-50/20">
+            <CardHeader className="px-5 pt-5 pb-0">
+              <h3 className="text-base font-semibold">Live Vorschau</h3>
+            </CardHeader>
+            <CardContent className="p-5">
+              <div className="rounded-xl border border-default-100 bg-gradient-to-b from-default-50/40 to-background p-4">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="flex size-10 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
+                    <LogIn size={20} />
+                  </div>
+                  <div>
+                    <div className="font-semibold">{supportLogin?.config?.title || 'Support Login'}</div>
+                    <div className="text-tiny text-default-400">{supportLogin?.config?.description || 'Melde dich als Support an/ab.'}</div>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <Button size="sm" color="primary" variant="flat">{supportLogin?.config?.loginLabel || 'Login'}</Button>
+                  <Button size="sm" variant="flat">{supportLogin?.config?.logoutLabel || 'Logout'}</Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border border-default-100 bg-default-50/20">
+            <CardHeader className="px-5 pt-5 pb-0">
+              <h3 className="text-base font-semibold">Aktive Supporter</h3>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-2 p-5">
+              {supportLogin?.status?.active?.length ? supportLogin.status.active.map((s, i) => (
+                <div key={i} className="flex items-center gap-3 rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                  <div className="size-2 rounded-full bg-success-400" />
+                  <Avatar name={s.username?.[0]} size="sm" className="size-6" />
+                  <span className="font-medium">{s.username || s.userId}</span>
+                  <Chip size="sm" variant="flat" color="success" className="ml-auto">Online</Chip>
+                </div>
+              )) : (
+                <div className="flex flex-col items-center gap-2 py-4 text-center text-tiny text-default-400">
+                  <UserRound size={20} />
+                  Keine aktiven Supporter
+                </div>
+              )}
+              <p className="mt-2 text-tiny text-default-400">
+                Support Role ID: {supportLogin?.supportRoleId || 'Nicht gesetzt'}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </SectionCard>
+  );
+}
diff --git a/frontend/src/pages/Tickets.tsx b/frontend/src/pages/Tickets.tsx
new file mode 100644
index 0000000..e0ae78f
--- /dev/null
+++ b/frontend/src/pages/Tickets.tsx
@@ -0,0 +1,346 @@
+import { useMemo } from 'react';
+import { Card, CardContent, CardHeader, Chip, Button, Tabs, Tab, Input, TextArea, Separator } from '@heroui/react';
+import { Ticket, Clock, UserRound, CheckCircle, MessageSquare, FileText, Pencil, Trash2, ChevronRight } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { formatDate } from '../utils/formatters';
+import { SectionCard } from '../components/shared/SectionCard';
+import { StatCard } from '../components/shared/StatCard';
+import { EmptyState } from '../components/shared/EmptyState';
+
+export function Tickets() {
+  const {
+    tickets, pipeline, sla, automations, kbArticles, ticketTab, setTicketTab,
+    ticketDetail, setTicketDetail, ticketMessages, loadTicketMessages,
+    updateTicketStatus, closeTicket, automationDraft, setAutomationDraft,
+    saveAutomation, kbDraft, setKbDraft, saveKbArticle, kbEditDraft, setKbEditDraft,
+    updateKbArticle, deleteKbArticle, automationEditDraft, setAutomationEditDraft,
+    updateAutomation, deleteAutomation, overview
+  } = useApp();
+
+  const openTickets = useMemo(() => tickets.filter((t) => t.status !== 'closed'), [tickets]);
+
+  return (
+    <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>
+
+      {ticketTab === 'overview' && (
+        <div className="mt-5 space-y-5">
+          <div className="grid gap-4 sm:grid-cols-4">
+            <StatCard icon={<Ticket size={18} />} label="Offen" value={overview?.tickets?.open ?? 0} color="warning" />
+            <StatCard icon={<Clock size={18} />} label="In Bearbeitung" value={overview?.tickets?.inProgress ?? 0} color="primary" />
+            <StatCard icon={<CheckCircle size={18} />} label="Geschlossen" value={overview?.tickets?.closed ?? 0} color="default" />
+            <StatCard icon={<UserRound size={18} />} label="Gesamt" value={tickets.length} />
+          </div>
+
+          <div className="grid gap-5 xl:grid-cols-2">
+            <div>
+              <h3 className="mb-3 text-base font-semibold">Offene Tickets ({openTickets.length})</h3>
+              <div className="space-y-3">
+                {openTickets.length ? openTickets.map((t) => (
+                  <Card key={t.id} className="border border-default-100 bg-default-50/20">
+                    <CardContent className="flex flex-col gap-3 p-4">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2 min-w-0">
+                          <div className={`size-2 rounded-full shrink-0 ${
+                            t.status === 'open' ? 'bg-warning-400' :
+                            t.status === 'in-progress' ? 'bg-primary-400' :
+                            t.status === 'waiting' ? 'bg-default-400' : 'bg-success-400'
+                          }`} />
+                          <span className="font-semibold text-small truncate">{t.topic || 'Ticket'}</span>
+                        </div>
+                        <Chip size="sm" variant="flat" color={t.status === 'open' ? 'warning' : t.status === 'closed' ? 'default' : 'primary'}>
+                          {t.status || 'open'}
+                        </Chip>
+                      </div>
+                      <div className="flex items-center gap-2 text-tiny text-default-400">
+                        <span>{t.category || 'Allgemein'}</span>
+                        <span>·</span>
+                        <span>{formatDate(t.createdAt)}</span>
+                        {t.claimedById && (
+                          <>
+                            <span>·</span>
+                            <Chip size="sm" variant="flat" color="success" className="h-5">Claimed</Chip>
+                          </>
+                        )}
+                      </div>
+                      <div className="flex gap-2">
+                        <select
+                          aria-label="Status"
+                          className="w-40 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=""
+                          onChange={(e) => { if (e.target.value) updateTicketStatus(t.id, e.target.value); }}
+                        >
+                          <option value="">Status ändern</option>
+                          <option value="open">Open</option>
+                          <option value="in-progress">In Progress</option>
+                          <option value="waiting">Warten</option>
+                          <option value="closed">Closed</option>
+                        </select>
+                        <Button size="sm" color="danger" variant="flat" onPress={() => closeTicket(t.id)}>Schließen</Button>
+                        <Button size="sm" variant="flat" onPress={() => { setTicketDetail(t); loadTicketMessages(t.id); }}>Details</Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                )) : <EmptyState message="Keine offenen Tickets" icon={<Ticket size={24} />} />}
+              </div>
+            </div>
+
+            <div>
+              <h3 className="mb-3 text-base font-semibold">Alle Tickets ({tickets.length})</h3>
+              <div className="space-y-2">
+                {tickets.length ? tickets.map((t) => (
+                  <div key={t.id} className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/20 px-4 py-3">
+                    <div className="min-w-0">
+                      <div className="text-small font-medium truncate">{t.topic || t.id}</div>
+                      <div className="text-tiny text-default-400">{t.category || '-'} · {formatDate(t.createdAt)}</div>
+                    </div>
+                    <Chip size="sm" variant="flat" color={t.status === 'open' ? 'warning' : t.status === 'closed' ? 'default' : 'primary'}>
+                      {t.status}
+                    </Chip>
+                  </div>
+                )) : <EmptyState message="Keine Tickets" />}
+              </div>
+            </div>
+          </div>
+
+          {ticketDetail && (
+            <Card className="border border-default-100">
+              <CardHeader className="flex items-center justify-between px-5 pt-5 pb-0">
+                <h3 className="text-lg font-bold">{ticketDetail.topic || 'Ticket-Details'}</h3>
+                <Button size="sm" variant="light" onPress={() => setTicketDetail(null)}>Schließen</Button>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-4 p-5">
+                <div className="grid grid-cols-3 gap-3 text-small">
+                  <div className="rounded-lg bg-default-100/40 px-3 py-2">
+                    <span className="text-default-400">Status:</span> {ticketDetail.status}
+                  </div>
+                  <div className="rounded-lg bg-default-100/40 px-3 py-2">
+                    <span className="text-default-400">Priorität:</span> {ticketDetail.priority || 'normal'}
+                  </div>
+                  <div className="rounded-lg bg-default-100/40 px-3 py-2">
+                    <span className="text-default-400">Kategorie:</span> {ticketDetail.category || '-'}
+                  </div>
+                </div>
+                <Separator />
+                <div>
+                  <h4 className="mb-2 text-small font-semibold">Nachrichten ({ticketMessages.length})</h4>
+                  <div className="max-h-60 space-y-2 overflow-auto">
+                    {ticketMessages.length ? ticketMessages.map((msg, i) => (
+                      <div key={i} className="rounded-lg bg-default-100/40 px-3 py-2 text-small">
+                        <span className="text-tiny text-default-400">{msg.author?.tag || msg.authorId}: </span>
+                        {msg.content || '(Embed)'}
+                      </div>
+                    )) : <p className="text-tiny text-default-400">Keine Nachrichten</p>}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      )}
+
+      {ticketTab === 'pipeline' && (
+        <div className="mt-5 grid gap-4 lg:grid-cols-2 2xl:grid-cols-4">
+          {[
+            { key: 'neu', label: 'Neu', color: 'warning' as const },
+            { key: 'in_bearbeitung', label: 'In Bearbeitung', color: 'primary' as const },
+            { key: 'warten_auf_user', label: 'Warten auf User', color: 'default' as const },
+            { key: 'erledigt', label: 'Erledigt', color: 'success' as const },
+          ].map(({ key, label, color }) => (
+            <Card key={key} className="border border-default-100 bg-default-50/20">
+              <CardHeader className="px-4 pt-4 pb-0">
+                <div className="flex items-center gap-2">
+                  <div className={`size-2.5 rounded-full bg-${color}-400`} />
+                  <h3 className="text-sm font-semibold">{label}</h3>
+                  <Chip size="sm" variant="flat" color={color}>{(pipeline[key] || []).length}</Chip>
+                </div>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-2 p-4">
+                {(pipeline[key] || []).length ? (pipeline[key] || []).map((t) => (
+                  <div key={t.id} className="rounded-xl border border-default-100 bg-default-50/30 p-3 text-small">
+                    <div className="font-medium truncate">{t.topic || t.id}</div>
+                    <div className="mt-1 text-tiny text-default-400">{formatDate(t.createdAt)}</div>
+                    <Button size="sm" variant="flat" className="mt-2 h-6 min-w-0 px-2 text-tiny" onPress={() => {
+                      const nextStatus = key === 'neu' ? 'in-progress' : key === 'in_bearbeitung' ? 'waiting' : key === 'warten_auf_user' ? 'closed' : 'closed';
+                      updateTicketStatus(t.id, nextStatus);
+                    }}>
+                      {key === 'erledigt' ? 'Schließen' : key === 'warten_auf_user' ? 'Schließen' : 'Weiter'}
+                    </Button>
+                  </div>
+                )) : <p className="text-tiny text-default-400 text-center py-4">Keine Tickets</p>}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {ticketTab === 'sla' && (
+        <div className="mt-5 grid gap-5 xl:grid-cols-2">
+          <Card className="border border-default-100 bg-default-50/20">
+            <CardHeader className="px-5 pt-5 pb-0">
+              <h3 className="text-base font-semibold">SLA pro Supporter</h3>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-2 p-5">
+              {(sla.supporters || []).length ? sla.supporters.map((row: any, i: number) => (
+                <div key={i} className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+                  <div className="flex items-center gap-2">
+                    <UserRound size={14} className="text-default-400" />
+                    <span className="font-medium">{row.supporterId || '-'}</span>
+                  </div>
+                  <div className="flex gap-3 text-tiny text-default-500">
+                    <span>{row.tickets || 0} Tickets</span>
+                    <span>TTC: {row.avgTTC ? `${Math.round(row.avgTTC / 1000)}s` : '-'}</span>
+                    <span>TTFR: {row.avgTTFR ? `${Math.round(row.avgTTFR / 1000)}s` : '-'}</span>
+                  </div>
+                </div>
+              )) : <p className="text-tiny text-default-400 text-center py-4">Keine Daten</p>}
+            </CardContent>
+          </Card>
+          <Card className="border border-default-100 bg-default-50/20">
+            <CardHeader className="px-5 pt-5 pb-0">
+              <h3 className="text-base font-semibold">SLA pro Tag</h3>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-2 p-5">
+              {(sla.days || []).length ? sla.days.slice(-14).map((row: any, i: number) => (
+                <div key={i} className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-2 text-tiny">
+                  <span className="font-medium">{row.date || '-'}</span>
+                  <div className="flex gap-2 text-default-500">
+                    <span>{row.tickets || 0}</span>
+                    <span>TTC: {row.avgTTC ? `${Math.round(row.avgTTC / 1000)}s` : '-'}</span>
+                    <span>TTFR: {row.avgTTFR ? `${Math.round(row.avgTTFR / 1000)}s` : '-'}</span>
+                  </div>
+                </div>
+              )) : <p className="text-tiny text-default-400 text-center py-4">Keine Daten</p>}
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {ticketTab === 'automations' && (
+        <div className="mt-5 grid gap-5 xl:grid-cols-[1fr_420px]">
+          <div>
+            <h3 className="mb-3 text-base font-semibold">Regeln ({automations.length})</h3>
+            <div className="space-y-3">
+              {automations.length ? automations.map((rule) => (
+                <Card key={rule.id} className="border border-default-100 bg-default-50/20">
+                  <CardContent className="flex flex-col gap-2 p-4">
+                    <div className="flex items-center justify-between">
+                      <div className="font-semibold text-small">{rule.name || 'Automation'}</div>
+                      <Chip size="sm" variant="flat" color={rule.active !== false ? 'success' : 'default'}>
+                        {rule.active !== false ? 'Aktiv' : 'Inaktiv'}
+                      </Chip>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button size="sm" variant="flat" startContent={<Pencil size={14} />} onPress={() => setAutomationEditDraft({ id: rule.id, name: rule.name || '', conditionValue: rule.condition?.category || '', actionValue: rule.action?.message || '' })}>
+                        Bearbeiten
+                      </Button>
+                      <Button size="sm" variant="flat" color="danger" startContent={<Trash2 size={14} />} onPress={() => deleteAutomation(rule.id)}>
+                        Löschen
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              )) : <EmptyState message="Keine Regeln" icon={<FileText size={24} />} />}
+            </div>
+          </div>
+          <div>
+            {automationEditDraft ? (
+              <Card className="border border-default-100 bg-default-50/20">
+                <CardHeader className="px-5 pt-5 pb-0">
+                  <h3 className="text-base font-semibold">Automation bearbeiten</h3>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-4 p-5">
+                  <Input label="Name" value={automationEditDraft.name} onValueChange={(v) => setAutomationEditDraft((s) => ({ ...s, name: v }))} />
+                  <Input label="Kategorie / Zustand" value={automationEditDraft.conditionValue} onValueChange={(v) => setAutomationEditDraft((s) => ({ ...s, conditionValue: v }))} />
+                  <TextArea label="Aktion / Nachricht" value={automationEditDraft.actionValue} onValueChange={(v) => setAutomationEditDraft((s) => ({ ...s, actionValue: v }))} />
+                  <div className="flex gap-2">
+                    <Button color="primary" onPress={() => updateAutomation(automationEditDraft.id)}>Aktualisieren</Button>
+                    <Button variant="flat" onPress={() => setAutomationEditDraft(null)}>Abbrechen</Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ) : (
+              <Card className="border border-default-100 bg-default-50/20">
+                <CardHeader className="px-5 pt-5 pb-0">
+                  <h3 className="text-base font-semibold">Neue Automation</h3>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-4 p-5">
+                  <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>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+      )}
+
+      {ticketTab === 'kb' && (
+        <div className="mt-5 grid gap-5 xl:grid-cols-[1fr_420px]">
+          <div>
+            <h3 className="mb-3 text-base font-semibold">Artikel ({kbArticles.length})</h3>
+            <div className="space-y-3">
+              {kbArticles.length ? kbArticles.map((article) => (
+                <Card key={article.id} className="border border-default-100 bg-default-50/20">
+                  <CardContent className="flex flex-col gap-2 p-4">
+                    <div className="flex items-center justify-between">
+                      <div className="font-semibold text-small truncate">{article.title || 'Artikel'}</div>
+                      <Chip size="sm" variant="flat">{(article.keywords?.length || 0)} Keywords</Chip>
+                    </div>
+                    <p className="text-small text-default-400 line-clamp-2">{article.content || '-'}</p>
+                    <div className="flex gap-2">
+                      <Button size="sm" variant="flat" startContent={<Pencil size={14} />} onPress={() => setKbEditDraft({ id: article.id, title: article.title || '', keywords: (article.keywords || []).join(', '), content: article.content || '' })}>
+                        Bearbeiten
+                      </Button>
+                      <Button size="sm" variant="flat" color="danger" startContent={<Trash2 size={14} />} onPress={() => deleteKbArticle(article.id)}>
+                        Löschen
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              )) : <EmptyState message="Keine Artikel" icon={<FileText size={24} />} />}
+            </div>
+          </div>
+          <div>
+            {kbEditDraft ? (
+              <Card className="border border-default-100 bg-default-50/20">
+                <CardHeader className="px-5 pt-5 pb-0">
+                  <h3 className="text-base font-semibold">Artikel bearbeiten</h3>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-4 p-5">
+                  <Input label="Titel" value={kbEditDraft.title} onValueChange={(v) => setKbEditDraft((s) => ({ ...s, title: v }))} />
+                  <Input label="Keywords" value={kbEditDraft.keywords} onValueChange={(v) => setKbEditDraft((s) => ({ ...s, keywords: v }))} />
+                  <TextArea label="Inhalt" minRows={5} value={kbEditDraft.content} onValueChange={(v) => setKbEditDraft((s) => ({ ...s, content: v }))} />
+                  <div className="flex gap-2">
+                    <Button color="primary" onPress={() => updateKbArticle(kbEditDraft.id)}>Aktualisieren</Button>
+                    <Button variant="flat" onPress={() => setKbEditDraft(null)}>Abbrechen</Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ) : (
+              <Card className="border border-default-100 bg-default-50/20">
+                <CardHeader className="px-5 pt-5 pb-0">
+                  <h3 className="text-base font-semibold">Neuer KB-Artikel</h3>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-4 p-5">
+                  <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>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+      )}
+    </SectionCard>
+  );
+}
+
diff --git a/frontend/src/pages/Welcome.tsx b/frontend/src/pages/Welcome.tsx
new file mode 100644
index 0000000..2a0fb7f
--- /dev/null
+++ b/frontend/src/pages/Welcome.tsx
@@ -0,0 +1,86 @@
+import { Card, CardContent, CardHeader, Input, TextArea, Button, Chip, Switch, Separator } from '@heroui/react';
+import { Sparkles, Save, Eye } from 'lucide-react';
+import { useApp } from '../context/AppContext';
+import { SectionCard } from '../components/shared/SectionCard';
+
+export function Welcome() {
+  const { settings, setSettings, saveSettingsPayload } = useApp();
+
+  return (
+    <SectionCard title="Willkommen" subtitle="Welcome-Embeds und Join-Nachrichten">
+      <div className="grid gap-5 xl:grid-cols-2">
+        <Card className="border border-default-100 bg-default-50/20">
+          <CardHeader className="px-5 pt-5 pb-0">
+            <h3 className="text-base font-semibold">Welcome konfigurieren</h3>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 p-5">
+            <Switch isSelected={settings.welcomeConfig?.enabled !== false} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), enabled: v } }))}>
+              <div className="flex items-center gap-2"><Sparkles size={16} /> Welcome aktiv</div>
+            </Switch>
+
+            <Input
+              label="Channel ID"
+              placeholder="Channel ID für Willkommensnachrichten"
+              value={settings.welcomeConfig?.channelId || settings.welcomeChannelId || ''}
+              onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), channelId: v } }))}
+            />
+
+            <Input
+              label="Titel"
+              placeholder="Willkommen {user}!"
+              value={settings.welcomeConfig?.embedTitle || ''}
+              onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedTitle: v } }))}
+            />
+
+            <TextArea
+              label="Beschreibung"
+              placeholder="Beschreibung des Embeds"
+              value={settings.welcomeConfig?.embedDescription || ''}
+              onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedDescription: v } }))}
+            />
+
+            <Input
+              label="Footer"
+              placeholder={new Date().getFullYear().toString()}
+              value={settings.welcomeConfig?.embedFooter || ''}
+              onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedFooter: v } }))}
+            />
+
+            <Separator />
+
+            <Button color="primary" startContent={<Save size={16} />} onPress={() => saveSettingsPayload({ welcomeConfig: settings.welcomeConfig || {} }, 'Welcome gespeichert')}>
+              Speichern
+            </Button>
+          </CardContent>
+        </Card>
+
+        <div className="flex flex-col gap-4">
+          <Card className="border border-default-100 bg-default-50/20">
+            <CardHeader className="px-5 pt-5 pb-0">
+              <h3 className="text-base font-semibold">Live Vorschau</h3>
+            </CardHeader>
+            <CardContent className="p-5">
+              <div className="rounded-xl border border-default-100 bg-gradient-to-b from-default-50/40 to-background p-4">
+                <div className="flex items-start gap-3">
+                  <div className="flex size-10 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
+                    <Sparkles size={20} />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="font-semibold text-lg">{settings.welcomeConfig?.embedTitle || 'Willkommen!'}</div>
+                    <p className="mt-1 text-small text-default-500">{settings.welcomeConfig?.embedDescription || 'Willkommen auf dem Server!'}</p>
+                    {settings.welcomeConfig?.embedFooter && (
+                      <p className="mt-2 text-tiny text-default-400">{settings.welcomeConfig.embedFooter}</p>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <p className="mt-3 text-tiny text-default-400">
+                Nutze {'{user}'} für den Benutzernamen und {'{server}'} für den Servernamen.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </SectionCard>
+  );
+}