diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index d56403b..fff9efc 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,57 +1,19 @@
 "use client";
 
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useEffect } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useLDAPConfig } from "@/hooks/useLDAPConfig";
 import { useTenantLDAPConfig } from "@/hooks/useTenantLDAPConfig";
 import { useTenantUsers } from "@/hooks/useTenantUsers";
-import {
-  getUsers,
-  createUser,
-  updateUser,
-  deleteUser,
-  getAuditLog,
-  getSMTPStatus,
-  getHealth,
-  getStorageStats,
-  getServices,
-  serviceAction,
-  getSystemStats,
-  getMailTimeseries,
-  uploadMailFiles,
-  getUploadProgress,
-  getSecurityAudit,
-  fixSecurityIssue,
-  getTenants,
-  createTenant,
-  updateTenant,
-  deleteTenant,
-  getTenantDomains,
-  addTenantDomain,
-  removeTenantDomain,
-  getTenantLogoUrl,
-  uploadTenantLogo,
-  deleteTenantLogo,
-  uploadMyTenantLogo,
-  deleteMyTenantLogo,
-  type User,
-  type AuditEntry,
-  type SMTPStatus,
-  type StorageStats,
-  type ServiceStatus,
-  type SystemStats,
-  type TimeseriesPoint,
-  type UploadJob,
-  type SecurityAuditResult,
-  type Tenant,
-  type TenantDefaultUser,
-  type TenantDomain,
-  getCertInfo,
-  uploadCert,
-  generateSelfSignedCert,
-  requestACMECert,
-  type CertInfo,
-} from "@/lib/api";
+import { useAdminDashboard } from "@/hooks/useAdminDashboard";
+import { useAdminUsers } from "@/hooks/useAdminUsers";
+import { useAdminAudit } from "@/hooks/useAdminAudit";
+import { useAdminServices } from "@/hooks/useAdminServices";
+import { useAdminSecurity } from "@/hooks/useAdminSecurity";
+import { useAdminUpload } from "@/hooks/useAdminUpload";
+import { useAdminTenants } from "@/hooks/useAdminTenants";
+import { useTenantLogos } from "@/hooks/useTenantLogos";
+import { useAdminCert } from "@/hooks/useAdminCert";
 import { Navbar } from "@/components/navbar";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -75,73 +37,17 @@ import { QuotaTab } from "@/components/admin/tabs/QuotaTab";
 import { SMTPOutTab } from "@/components/admin/tabs/SMTPOutTab";
 import { ResetPasswordDialog, DeleteUserDialog } from "@/components/admin/UserDialogs";
 
-const AUDIT_PAGE_SIZE = 25;
-
 export default function AdminPage() {
   const { user, loading: authLoading } = useAuth("domain_admin", "/admin/login");
   const isSuperAdmin = user?.role === "superadmin";
 
-  // Dashboard state
-  const [smtpStatus, setSmtpStatus] = useState<SMTPStatus | null>(null);
-  const [storageStats, setStorageStats] = useState<StorageStats | null>(null);
-  const [systemStats, setSystemStats] = useState<SystemStats | null>(null);
-  const [timeseries, setTimeseries] = useState<TimeseriesPoint[]>([]);
-  const [apiOnline, setApiOnline] = useState<boolean | null>(null);
-  const [dashLoading, setDashLoading] = useState(true);
-  const [dashRefreshed, setDashRefreshed] = useState<Date | null>(null);
-  const [countdown, setCountdown] = useState(30);
-
-  // Services state
-  const [services, setServices] = useState<ServiceStatus[]>([]);
-  const [servicesLoading, setServicesLoading] = useState(false);
-  const [serviceActionLoading, setServiceActionLoading] = useState<string | null>(null);
-  const [serviceError, setServiceError] = useState("");
-
-  // Users state
-  const [users, setUsers] = useState<User[]>([]);
-  const [usersLoading, setUsersLoading] = useState(true);
-  const [usersError, setUsersError] = useState("");
-
-  // Create user dialog
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [newUsername, setNewUsername] = useState("");
-  const [newEmail, setNewEmail] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [newRole, setNewRole] = useState("user");
-  const [createLoading, setCreateLoading] = useState(false);
-  const [createError, setCreateError] = useState("");
-
-  // User action state
-  const [userActionLoading, setUserActionLoading] = useState<number | null>(null);
-  const [resetPasswordUserId, setResetPasswordUserId] = useState<number | null>(null);
-  const [resetPasswordValue, setResetPasswordValue] = useState("");
-  const [resetPasswordError, setResetPasswordError] = useState("");
-  const [resetPasswordLoading, setResetPasswordLoading] = useState(false);
-
-  // Delete confirmation dialog
-  const [deleteDialogUser, setDeleteDialogUser] = useState<User | null>(null);
-  const [deleteActionLoading, setDeleteActionLoading] = useState<"deactivate" | "delete" | null>(null);
-  const [deleteDialogError, setDeleteDialogError] = useState("");
-
-  // Audit state
-  const [auditEntries, setAuditEntries] = useState<AuditEntry[]>([]);
-  const [auditTotal, setAuditTotal] = useState(0);
-  const [auditPage, setAuditPage] = useState(1);
-  const [auditLoading, setAuditLoading] = useState(false);
-
-  // Security audit state
-  const [securityAudit, setSecurityAudit] = useState<SecurityAuditResult | null>(null);
-  const [securityLoading, setSecurityLoading] = useState(false);
-  const [securityError, setSecurityError] = useState("");
-  const [fixLoading, setFixLoading] = useState<string | null>(null);
-  const [fixMessage, setFixMessage] = useState("");
-
-  // Upload state
-  const [uploadDragging, setUploadDragging] = useState(false);
-  const [uploadJob, setUploadJob] = useState<UploadJob | null>(null);
-  const [uploadError, setUploadError] = useState("");
-  const [uploadLoading, setUploadLoading] = useState(false);
-  const uploadPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const dashboard = useAdminDashboard(!!user);
+  const usersState = useAdminUsers();
+  const audit = useAdminAudit();
+  const servicesState = useAdminServices();
+  const security = useAdminSecurity();
+  const upload = useAdminUpload();
+  const cert = useAdminCert();
 
   // LDAP state (global, superadmin) — managed by useLDAPConfig hook
   const {
@@ -161,26 +67,7 @@ export default function AdminPage() {
     handleDeleteLDAP,
   } = useLDAPConfig();
 
-  // Tenants state
-  const [tenants, setTenants] = useState<Tenant[]>([]);
-  const [tenantsLoading, setTenantsLoading] = useState(false);
-  const [tenantsError, setTenantsError] = useState("");
-  const [tenantDialogOpen, setTenantDialogOpen] = useState(false);
-  const [newTenantName, setNewTenantName] = useState("");
-  const [newTenantSlug, setNewTenantSlug] = useState("");
-  const [tenantCreateLoading, setTenantCreateLoading] = useState(false);
-  const [tenantCreateError, setTenantCreateError] = useState("");
-  const [tenantCreatedUsers, setTenantCreatedUsers] = useState<TenantDefaultUser[]>([]);
-  const [tenantCreatedName, setTenantCreatedName] = useState("");
-  const [tenantCredDialogOpen, setTenantCredDialogOpen] = useState(false);
-  const [tenantDeleteId, setTenantDeleteId] = useState<number | null>(null);
-  const [tenantDeleteLoading, setTenantDeleteLoading] = useState(false);
-  const [domainDialogTenant, setDomainDialogTenant] = useState<Tenant | null>(null);
-  const [tenantDomains, setTenantDomains] = useState<TenantDomain[]>([]);
-  const [domainsLoading, setDomainsLoading] = useState(false);
-  const [newDomain, setNewDomain] = useState("");
-  const [addDomainLoading, setAddDomainLoading] = useState(false);
-  const [domainError, setDomainError] = useState("");
+  const tenantsState = useAdminTenants();
 
   // Tenant LDAP state (domain_admin own tenant) — managed by useTenantLDAPConfig hook
   const {
@@ -206,14 +93,11 @@ export default function AdminPage() {
     handleDeleteTenantLDAP,
   } = useTenantLDAPConfig();
 
-  // Superadmin: tenant LDAP dialog
-  const [tenantLdapDialogId, setTenantLdapDialogId] = useState<number | null>(null);
-
-  // Logo dialog (superadmin: any tenant)
-  const [logoDialogTenant, setLogoDialogTenant] = useState<Tenant | null>(null);
-  const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
-  const [logoUploading, setLogoUploading] = useState(false);
-  const [logoError, setLogoError] = useState("");
+  const logos = useTenantLogos(tenantsState.setTenants, {
+    setOwnLogoPreviewUrl,
+    setOwnLogoUploading,
+    setOwnLogoError,
+  });
 
   // Tenant users dialog — managed by useTenantUsers hook
   const {
@@ -230,457 +114,16 @@ export default function AdminPage() {
     handleSyncLDAPUsers,
   } = useTenantUsers();
 
-
-  // Certificate state
-  const [certInfo, setCertInfo] = useState<CertInfo | null>(null);
-  const [certLoading, setCertLoading] = useState(false);
-  const [certError, setCertError] = useState("");
-  const [certSuccess, setCertSuccess] = useState("");
-  const [certFile, setCertFile] = useState<File | null>(null);
-  const [keyFile, setKeyFile] = useState<File | null>(null);
-  const [certUploadLoading, setCertUploadLoading] = useState(false);
-  const [selfSignedCN, setSelfSignedCN] = useState("archivmail");
-  const [selfSignedDNS, setSelfSignedDNS] = useState("archivmail");
-  const [selfSignedIPs, setSelfSignedIPs] = useState("192.168.1.131");
-  const [selfSignedYears, setSelfSignedYears] = useState("10");
-  const [selfSignedLoading, setSelfSignedLoading] = useState(false);
-  const [acmeDomain, setAcmeDomain] = useState("");
-  const [acmeEmail, setAcmeEmail] = useState("");
-  const [acmeLoading, setAcmeLoading] = useState(false);
-  const [acmeOutput, setAcmeOutput] = useState("");
-
-  const loadDashboard = useCallback(async () => {
-    setDashLoading(true);
-    try {
-      const [smtp, health, storage, sysStats, ts] = await Promise.allSettled([
-        getSMTPStatus(),
-        getHealth(),
-        getStorageStats(),
-        getSystemStats(),
-        getMailTimeseries(30),
-      ]);
-      setSmtpStatus(smtp.status === "fulfilled" ? smtp.value : null);
-      setApiOnline(health.status === "fulfilled" && health.value.status === "ok");
-      setStorageStats(storage.status === "fulfilled" ? storage.value : null);
-      setSystemStats(sysStats.status === "fulfilled" ? sysStats.value : null);
-      setTimeseries(ts.status === "fulfilled" ? ts.value.points : []);
-      setDashRefreshed(new Date());
-    } finally {
-      setDashLoading(false);
-    }
-  }, []);
-
-  const loadUsers = useCallback(async () => {
-    setUsersLoading(true);
-    setUsersError("");
-    try {
-      const data = await getUsers();
-      setUsers(data || []);
-    } catch {
-      setUsersError("Benutzer konnten nicht geladen werden.");
-    } finally {
-      setUsersLoading(false);
-    }
-  }, []);
-
-  const loadAudit = useCallback(async (p: number) => {
-    setAuditLoading(true);
-    try {
-      const data = await getAuditLog({ page: p, page_size: AUDIT_PAGE_SIZE });
-      setAuditEntries(data.entries || []);
-      setAuditTotal(data.total);
-      setAuditPage(p);
-    } catch {
-      setAuditEntries([]);
-    } finally {
-      setAuditLoading(false);
-    }
-  }, []);
-
-  const loadServices = useCallback(async () => {
-    setServicesLoading(true);
-    setServiceError("");
-    try {
-      const data = await getServices();
-      setServices(data || []);
-    } catch {
-      setServiceError("Dienste konnten nicht abgerufen werden.");
-    } finally {
-      setServicesLoading(false);
-    }
-  }, []);
-
-  const loadCert = useCallback(async () => {
-    setCertLoading(true);
-    setCertError("");
-    try {
-      const info = await getCertInfo();
-      setCertInfo(info);
-    } catch (e) {
-      setCertError(String(e));
-    } finally {
-      setCertLoading(false);
-    }
-  }, []);
-
-  async function handleUploadFiles(files: File[]) {
-    const valid = files.filter(f => f.name.toLowerCase().endsWith(".eml") || f.name.toLowerCase().endsWith(".mbox"));
-    if (valid.length === 0) {
-      setUploadError("Nur .eml und .mbox Dateien erlaubt.");
-      return;
-    }
-    setUploadError("");
-    setUploadJob(null);
-    setUploadLoading(true);
-    try {
-      const { job_id } = await uploadMailFiles(valid);
-      const poll = setInterval(async () => {
-        try {
-          const job = await getUploadProgress(job_id);
-          setUploadJob(job);
-          if (job.status !== "running") {
-            clearInterval(poll);
-            uploadPollRef.current = null;
-            setUploadLoading(false);
-          }
-        } catch {
-          clearInterval(poll);
-          uploadPollRef.current = null;
-          setUploadLoading(false);
-        }
-      }, 1500);
-      uploadPollRef.current = poll;
-    } catch (e: unknown) {
-      setUploadError(e instanceof Error ? e.message : "Upload fehlgeschlagen.");
-      setUploadLoading(false);
-    }
-  }
-
-  async function handleServiceAction(name: string, action: "start" | "stop" | "restart" | "enable" | "disable" | "block_external" | "allow_external") {
-    setServiceActionLoading(`${name}:${action}`);
-    setServiceError("");
-    try {
-      const updated = await serviceAction(name, action);
-      setServices((prev) => prev.map((s) => (s.name === updated.name ? updated : s)));
-    } catch (e: unknown) {
-      setServiceError(e instanceof Error ? e.message : "Aktion fehlgeschlagen.");
-    } finally {
-      setServiceActionLoading(null);
-    }
-  }
-
-  const dashIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const { loadUsers } = usersState;
+  const { loadAudit } = audit;
+  const { loadServices } = servicesState;
 
   useEffect(() => {
     if (!user) return;
-    loadDashboard();
     loadUsers();
     loadAudit(1);
     loadServices();
-
-    setCountdown(30);
-    dashIntervalRef.current = setInterval(() => {
-      loadDashboard();
-      setCountdown(30);
-    }, 30_000);
-
-    const ticker = setInterval(() => {
-      setCountdown((c) => (c > 0 ? c - 1 : 0));
-    }, 1_000);
-
-    return () => {
-      if (dashIntervalRef.current) clearInterval(dashIntervalRef.current);
-      clearInterval(ticker);
-    };
-  }, [user, loadDashboard, loadUsers, loadAudit, loadServices]);
-
-  async function handleCreateUser(e: React.FormEvent) {
-    e.preventDefault();
-    setCreateLoading(true);
-    setCreateError("");
-    try {
-      await createUser({
-        username: newUsername,
-        email: newEmail,
-        password: newPassword,
-        role: newRole,
-      });
-      setDialogOpen(false);
-      setNewUsername("");
-      setNewEmail("");
-      setNewPassword("");
-      setNewRole("user");
-      loadUsers();
-    } catch {
-      setCreateError("Benutzer konnte nicht erstellt werden.");
-    } finally {
-      setCreateLoading(false);
-    }
-  }
-
-  async function handleToggleActive(u: User) {
-    setUserActionLoading(u.id);
-    try {
-      await updateUser(u.id, { active: !u.active });
-      loadUsers();
-    } catch {
-      // ignore
-    } finally {
-      setUserActionLoading(null);
-    }
-  }
-
-  async function handleDeactivateConfirmed() {
-    if (!deleteDialogUser) return;
-    setDeleteActionLoading("deactivate");
-    setDeleteDialogError("");
-    try {
-      await updateUser(deleteDialogUser.id, { active: false });
-      setDeleteDialogUser(null);
-      loadUsers();
-    } catch {
-      setDeleteDialogError("Deaktivierung fehlgeschlagen.");
-    } finally {
-      setDeleteActionLoading(null);
-    }
-  }
-
-  async function handleDeleteConfirmed() {
-    if (!deleteDialogUser) return;
-    setDeleteActionLoading("delete");
-    setDeleteDialogError("");
-    try {
-      await deleteUser(deleteDialogUser.id);
-      setDeleteDialogUser(null);
-      loadUsers();
-    } catch (err: unknown) {
-      setDeleteDialogError(err instanceof Error ? err.message : "Löschen fehlgeschlagen.");
-    } finally {
-      setDeleteActionLoading(null);
-    }
-  }
-
-  async function handleResetPassword(e: React.FormEvent) {
-    e.preventDefault();
-    if (!resetPasswordUserId) return;
-    setResetPasswordLoading(true);
-    setResetPasswordError("");
-    try {
-      await updateUser(resetPasswordUserId, { password: resetPasswordValue });
-      setResetPasswordUserId(null);
-      setResetPasswordValue("");
-    } catch {
-      setResetPasswordError("Passwort konnte nicht geändert werden.");
-    } finally {
-      setResetPasswordLoading(false);
-    }
-  }
-
-  async function runSecurityAudit() {
-    setSecurityLoading(true);
-    setSecurityError("");
-    setFixMessage("");
-    try {
-      const result = await getSecurityAudit();
-      setSecurityAudit(result);
-    } catch {
-      setSecurityError("Security-Audit konnte nicht ausgeführt werden.");
-    } finally {
-      setSecurityLoading(false);
-    }
-  }
-
-  async function runFix(action: string) {
-    setFixLoading(action);
-    setFixMessage("");
-    setSecurityError("");
-    try {
-      const res = await fixSecurityIssue(action);
-      setFixMessage(res.message);
-      await runSecurityAudit();
-    } catch (e: unknown) {
-      setSecurityError(e instanceof Error ? e.message : "Fix fehlgeschlagen.");
-    } finally {
-      setFixLoading(null);
-    }
-  }
-
-  // Tenants handlers
-  const loadTenants = useCallback(async () => {
-    setTenantsLoading(true);
-    setTenantsError("");
-    try {
-      const data = await getTenants();
-      setTenants(data || []);
-    } catch {
-      setTenantsError("Mandanten konnten nicht geladen werden.");
-    } finally {
-      setTenantsLoading(false);
-    }
-  }, []);
-
-
-  async function handleCreateTenant(e: React.FormEvent) {
-    e.preventDefault();
-    setTenantCreateLoading(true);
-    setTenantCreateError("");
-    try {
-      const result = await createTenant(newTenantName, newTenantSlug);
-      setTenantDialogOpen(false);
-      setTenantCreatedName(result.name);
-      setTenantCreatedUsers(result.default_users ?? []);
-      setTenantCredDialogOpen(true);
-      setNewTenantName("");
-      setNewTenantSlug("");
-      await loadTenants();
-    } catch (err: unknown) {
-      setTenantCreateError(err instanceof Error ? err.message : "Erstellen fehlgeschlagen.");
-    } finally {
-      setTenantCreateLoading(false);
-    }
-  }
-
-  async function handleToggleTenant(t: Tenant) {
-    try {
-      await updateTenant(t.id, { active: !t.active });
-      await loadTenants();
-    } catch { /* ignore */ }
-  }
-
-  async function handleDeleteTenant() {
-    if (!tenantDeleteId) return;
-    setTenantDeleteLoading(true);
-    try {
-      await deleteTenant(tenantDeleteId);
-      setTenantDeleteId(null);
-      await loadTenants();
-    } catch { /* ignore */ } finally {
-      setTenantDeleteLoading(false);
-    }
-  }
-
-  async function openDomainDialog(t: Tenant) {
-    setDomainDialogTenant(t);
-    setDomainsLoading(true);
-    setDomainError("");
-    setNewDomain("");
-    try {
-      const domains = await getTenantDomains(t.id);
-      setTenantDomains(domains || []);
-    } catch { setDomainError("Domains konnten nicht geladen werden."); }
-    finally { setDomainsLoading(false); }
-  }
-
-  async function handleAddDomain() {
-    if (!domainDialogTenant || !newDomain) return;
-    setAddDomainLoading(true);
-    setDomainError("");
-    try {
-      await addTenantDomain(domainDialogTenant.id, newDomain);
-      setNewDomain("");
-      const domains = await getTenantDomains(domainDialogTenant.id);
-      setTenantDomains(domains || []);
-    } catch (err: unknown) {
-      setDomainError(err instanceof Error ? err.message : "Domain konnte nicht hinzugefügt werden.");
-    } finally {
-      setAddDomainLoading(false);
-    }
-  }
-
-  async function handleRemoveDomain(domainId: number) {
-    if (!domainDialogTenant) return;
-    setDomainError("");
-    try {
-      await removeTenantDomain(domainDialogTenant.id, domainId);
-      const domains = await getTenantDomains(domainDialogTenant.id);
-      setTenantDomains(domains || []);
-    } catch (err: unknown) {
-      setDomainError(err instanceof Error ? err.message : "Domain konnte nicht entfernt werden.");
-    }
-  }
-
-  // Logo handlers (superadmin: any tenant)
-  async function openLogoDialog(t: Tenant) {
-    setLogoDialogTenant(t);
-    setLogoError("");
-    setLogoPreviewUrl(null);
-    if (t.has_logo) {
-      try {
-        const res = await fetch(getTenantLogoUrl(t.id), { credentials: "include" });
-        if (res.ok) {
-          const blob = await res.blob();
-          setLogoPreviewUrl(URL.createObjectURL(blob));
-        }
-      } catch {
-        // preview not critical
-      }
-    }
-  }
-
-  async function handleLogoUpload(file: File) {
-    if (!logoDialogTenant) return;
-    setLogoUploading(true);
-    setLogoError("");
-    try {
-      await uploadTenantLogo(logoDialogTenant.id, file);
-      const res = await fetch(getTenantLogoUrl(logoDialogTenant.id), { credentials: "include" });
-      if (res.ok) {
-        const blob = await res.blob();
-        setLogoPreviewUrl(URL.createObjectURL(blob));
-      }
-      setTenants((prev) => prev.map((t) => t.id === logoDialogTenant.id ? { ...t, has_logo: true } : t));
-    } catch (err: unknown) {
-      setLogoError(err instanceof Error ? err.message : "Upload fehlgeschlagen.");
-    } finally {
-      setLogoUploading(false);
-    }
-  }
-
-  async function handleLogoDelete() {
-    if (!logoDialogTenant) return;
-    setLogoUploading(true);
-    setLogoError("");
-    try {
-      await deleteTenantLogo(logoDialogTenant.id);
-      setLogoPreviewUrl(null);
-      setTenants((prev) => prev.map((t) => t.id === logoDialogTenant.id ? { ...t, has_logo: false } : t));
-    } catch (err: unknown) {
-      setLogoError(err instanceof Error ? err.message : "Löschen fehlgeschlagen.");
-    } finally {
-      setLogoUploading(false);
-    }
-  }
-
-  // Logo handlers (domain_admin: own tenant)
-  async function handleOwnLogoUpload(file: File) {
-    setOwnLogoUploading(true);
-    setOwnLogoError("");
-    try {
-      await uploadMyTenantLogo(file);
-      const res = await fetch(`/api/tenant/logo`, { credentials: "include" });
-      if (res.ok) {
-        const blob = await res.blob();
-        setOwnLogoPreviewUrl(URL.createObjectURL(blob));
-      }
-    } catch (err: unknown) {
-      setOwnLogoError(err instanceof Error ? err.message : "Upload fehlgeschlagen.");
-    } finally {
-      setOwnLogoUploading(false);
-    }
-  }
-
-  async function handleOwnLogoDelete() {
-    setOwnLogoUploading(true);
-    setOwnLogoError("");
-    try {
-      await deleteMyTenantLogo();
-      setOwnLogoPreviewUrl(null);
-    } catch (err: unknown) {
-      setOwnLogoError(err instanceof Error ? err.message : "Löschen fehlgeschlagen.");
-    } finally {
-      setOwnLogoUploading(false);
-    }
-  }
+  }, [user, loadUsers, loadAudit, loadServices]);
 
   return (
     <div className="min-h-screen">
@@ -710,8 +153,8 @@ export default function AdminPage() {
               <TabsTrigger value="imap-settings">IMAP</TabsTrigger>
             )}
             {isSuperAdmin && <TabsTrigger value="security">Security</TabsTrigger>}
-            {isSuperAdmin && <TabsTrigger value="cert" onClick={loadCert}>Zertifikat</TabsTrigger>}
-            {isSuperAdmin && <TabsTrigger value="tenants" onClick={loadTenants}>Mandanten</TabsTrigger>}
+            {isSuperAdmin && <TabsTrigger value="cert" onClick={cert.loadCert}>Zertifikat</TabsTrigger>}
+            {isSuperAdmin && <TabsTrigger value="tenants" onClick={tenantsState.loadTenants}>Mandanten</TabsTrigger>}
             {isSuperAdmin && <TabsTrigger value="retention">Retention</TabsTrigger>}
             {isSuperAdmin && <TabsTrigger value="archiving-rules">Regeln</TabsTrigger>}
             {isSuperAdmin && <TabsTrigger value="quotas">Quotas</TabsTrigger>}
@@ -722,17 +165,17 @@ export default function AdminPage() {
           <TabsContent value="dashboard" className="mt-4 space-y-6">
             <DashboardTab
               isSuperAdmin={isSuperAdmin}
-              smtpStatus={smtpStatus}
-              storageStats={storageStats}
-              systemStats={systemStats}
-              timeseries={timeseries}
-              apiOnline={apiOnline}
-              dashLoading={dashLoading}
-              dashRefreshed={dashRefreshed}
-              countdown={countdown}
-              users={users}
-              usersLoading={usersLoading}
-              onRefresh={() => { loadDashboard(); setCountdown(30); }}
+              smtpStatus={dashboard.smtpStatus}
+              storageStats={dashboard.storageStats}
+              systemStats={dashboard.systemStats}
+              timeseries={dashboard.timeseries}
+              apiOnline={dashboard.apiOnline}
+              dashLoading={dashboard.dashLoading}
+              dashRefreshed={dashboard.dashRefreshed}
+              countdown={dashboard.countdown}
+              users={usersState.users}
+              usersLoading={usersState.usersLoading}
+              onRefresh={dashboard.refresh}
             />
           </TabsContent>
 
@@ -740,12 +183,12 @@ export default function AdminPage() {
             <TabsContent value="services" className="mt-4">
               <ServicesTab
                 isSuperAdmin={isSuperAdmin}
-                services={services}
-                servicesLoading={servicesLoading}
-                serviceActionLoading={serviceActionLoading}
-                serviceError={serviceError}
-                onLoadServices={loadServices}
-                onServiceAction={handleServiceAction}
+                services={servicesState.services}
+                servicesLoading={servicesState.servicesLoading}
+                serviceActionLoading={servicesState.serviceActionLoading}
+                serviceError={servicesState.serviceError}
+                onLoadServices={servicesState.loadServices}
+                onServiceAction={servicesState.handleServiceAction}
               />
             </TabsContent>
           )}
@@ -753,65 +196,65 @@ export default function AdminPage() {
           <TabsContent value="users">
             <UsersTab
               isSuperAdmin={isSuperAdmin}
-              users={users}
-              tenants={tenants}
-              usersLoading={usersLoading}
-              usersError={usersError}
-              dialogOpen={dialogOpen}
-              setDialogOpen={setDialogOpen}
-              newUsername={newUsername}
-              setNewUsername={setNewUsername}
-              newEmail={newEmail}
-              setNewEmail={setNewEmail}
-              newPassword={newPassword}
-              setNewPassword={setNewPassword}
-              newRole={newRole}
-              setNewRole={setNewRole}
-              createLoading={createLoading}
-              createError={createError}
-              onCreateUser={handleCreateUser}
-              userActionLoading={userActionLoading}
-              onToggleActive={handleToggleActive}
+              users={usersState.users}
+              tenants={tenantsState.tenants}
+              usersLoading={usersState.usersLoading}
+              usersError={usersState.usersError}
+              dialogOpen={usersState.dialogOpen}
+              setDialogOpen={usersState.setDialogOpen}
+              newUsername={usersState.newUsername}
+              setNewUsername={usersState.setNewUsername}
+              newEmail={usersState.newEmail}
+              setNewEmail={usersState.setNewEmail}
+              newPassword={usersState.newPassword}
+              setNewPassword={usersState.setNewPassword}
+              newRole={usersState.newRole}
+              setNewRole={usersState.setNewRole}
+              createLoading={usersState.createLoading}
+              createError={usersState.createError}
+              onCreateUser={usersState.handleCreateUser}
+              userActionLoading={usersState.userActionLoading}
+              onToggleActive={usersState.handleToggleActive}
               onOpenResetPassword={(userId) => {
-                setResetPasswordUserId(userId);
-                setResetPasswordValue("");
-                setResetPasswordError("");
+                usersState.setResetPasswordUserId(userId);
+                usersState.setResetPasswordValue("");
+                usersState.setResetPasswordError("");
               }}
-              onOpenDeleteDialog={(u) => { setDeleteDialogUser(u); setDeleteDialogError(""); }}
+              onOpenDeleteDialog={(u) => { usersState.setDeleteDialogUser(u); usersState.setDeleteDialogError(""); }}
             />
           </TabsContent>
 
           <TabsContent value="audit">
             <AuditTab
-              auditEntries={auditEntries}
-              auditTotal={auditTotal}
-              auditPage={auditPage}
-              auditLoading={auditLoading}
-              onLoadAudit={loadAudit}
+              auditEntries={audit.auditEntries}
+              auditTotal={audit.auditTotal}
+              auditPage={audit.auditPage}
+              auditLoading={audit.auditLoading}
+              onLoadAudit={audit.loadAudit}
             />
           </TabsContent>
 
           <TabsContent value="import">
             <ImportTab
-              uploadDragging={uploadDragging}
-              setUploadDragging={setUploadDragging}
-              uploadJob={uploadJob}
-              uploadError={uploadError}
-              uploadLoading={uploadLoading}
-              onUploadFiles={handleUploadFiles}
+              uploadDragging={upload.uploadDragging}
+              setUploadDragging={upload.setUploadDragging}
+              uploadJob={upload.uploadJob}
+              uploadError={upload.uploadError}
+              uploadLoading={upload.uploadLoading}
+              onUploadFiles={upload.handleUploadFiles}
             />
           </TabsContent>
 
           {isSuperAdmin && (
             <TabsContent value="security">
               <SecurityTab
-                securityAudit={securityAudit}
-                securityLoading={securityLoading}
-                securityError={securityError}
-                fixLoading={fixLoading}
-                fixMessage={fixMessage}
-                onRunAudit={runSecurityAudit}
-                onRunFix={runFix}
+                securityAudit={security.securityAudit}
+                securityLoading={security.securityLoading}
+                securityError={security.securityError}
+                fixLoading={security.fixLoading}
+                fixMessage={security.fixMessage}
+                onRunAudit={security.runSecurityAudit}
+                onRunFix={security.runFix}
               />
             </TabsContent>
           )}
@@ -855,8 +298,8 @@ export default function AdminPage() {
                 onSave={handleSaveTenantLDAP}
                 onTest={handleTestTenantLDAP}
                 onDelete={handleDeleteTenantLDAP}
-                onOwnLogoUpload={handleOwnLogoUpload}
-                onOwnLogoDelete={handleOwnLogoDelete}
+                onOwnLogoUpload={logos.handleOwnLogoUpload}
+                onOwnLogoDelete={logos.handleOwnLogoDelete}
               />
             </TabsContent>
           )}
@@ -864,38 +307,38 @@ export default function AdminPage() {
           {isSuperAdmin && (
             <TabsContent value="cert">
               <CertTab
-                certInfo={certInfo}
-                certLoading={certLoading}
-                certError={certError}
-                certSuccess={certSuccess}
-                certFile={certFile}
-                setCertFile={setCertFile}
-                keyFile={keyFile}
-                setKeyFile={setKeyFile}
-                certUploadLoading={certUploadLoading}
-                setCertUploadLoading={setCertUploadLoading}
-                selfSignedCN={selfSignedCN}
-                setSelfSignedCN={setSelfSignedCN}
-                selfSignedDNS={selfSignedDNS}
-                setSelfSignedDNS={setSelfSignedDNS}
-                selfSignedIPs={selfSignedIPs}
-                setSelfSignedIPs={setSelfSignedIPs}
-                selfSignedYears={selfSignedYears}
-                setSelfSignedYears={setSelfSignedYears}
-                selfSignedLoading={selfSignedLoading}
-                setSelfSignedLoading={setSelfSignedLoading}
-                acmeDomain={acmeDomain}
-                setAcmeDomain={setAcmeDomain}
-                acmeEmail={acmeEmail}
-                setAcmeEmail={setAcmeEmail}
-                acmeLoading={acmeLoading}
-                setAcmeLoading={setAcmeLoading}
-                acmeOutput={acmeOutput}
-                setAcmeOutput={setAcmeOutput}
-                setCertError={setCertError}
-                setCertSuccess={setCertSuccess}
-                setCertInfo={setCertInfo}
-                onLoadCert={loadCert}
+                certInfo={cert.certInfo}
+                certLoading={cert.certLoading}
+                certError={cert.certError}
+                certSuccess={cert.certSuccess}
+                certFile={cert.certFile}
+                setCertFile={cert.setCertFile}
+                keyFile={cert.keyFile}
+                setKeyFile={cert.setKeyFile}
+                certUploadLoading={cert.certUploadLoading}
+                setCertUploadLoading={cert.setCertUploadLoading}
+                selfSignedCN={cert.selfSignedCN}
+                setSelfSignedCN={cert.setSelfSignedCN}
+                selfSignedDNS={cert.selfSignedDNS}
+                setSelfSignedDNS={cert.setSelfSignedDNS}
+                selfSignedIPs={cert.selfSignedIPs}
+                setSelfSignedIPs={cert.setSelfSignedIPs}
+                selfSignedYears={cert.selfSignedYears}
+                setSelfSignedYears={cert.setSelfSignedYears}
+                selfSignedLoading={cert.selfSignedLoading}
+                setSelfSignedLoading={cert.setSelfSignedLoading}
+                acmeDomain={cert.acmeDomain}
+                setAcmeDomain={cert.setAcmeDomain}
+                acmeEmail={cert.acmeEmail}
+                setAcmeEmail={cert.setAcmeEmail}
+                acmeLoading={cert.acmeLoading}
+                setAcmeLoading={cert.setAcmeLoading}
+                acmeOutput={cert.acmeOutput}
+                setAcmeOutput={cert.setAcmeOutput}
+                setCertError={cert.setCertError}
+                setCertSuccess={cert.setCertSuccess}
+                setCertInfo={cert.setCertInfo}
+                onLoadCert={cert.loadCert}
               />
             </TabsContent>
           )}
@@ -903,37 +346,37 @@ export default function AdminPage() {
           {isSuperAdmin && (
             <TabsContent value="tenants">
               <TenantsTab
-                tenants={tenants}
-                tenantsLoading={tenantsLoading}
-                tenantsError={tenantsError}
-                tenantDialogOpen={tenantDialogOpen}
-                setTenantDialogOpen={setTenantDialogOpen}
-                newTenantName={newTenantName}
-                setNewTenantName={setNewTenantName}
-                newTenantSlug={newTenantSlug}
-                setNewTenantSlug={setNewTenantSlug}
-                tenantCreateLoading={tenantCreateLoading}
-                tenantCreateError={tenantCreateError}
-                onCreateTenant={handleCreateTenant}
-                tenantCredDialogOpen={tenantCredDialogOpen}
-                setTenantCredDialogOpen={setTenantCredDialogOpen}
-                tenantCreatedName={tenantCreatedName}
-                tenantCreatedUsers={tenantCreatedUsers}
-                tenantDeleteId={tenantDeleteId}
-                setTenantDeleteId={setTenantDeleteId}
-                tenantDeleteLoading={tenantDeleteLoading}
-                onDeleteTenant={handleDeleteTenant}
-                domainDialogTenant={domainDialogTenant}
-                setDomainDialogTenant={setDomainDialogTenant}
-                tenantDomains={tenantDomains}
-                domainsLoading={domainsLoading}
-                newDomain={newDomain}
-                setNewDomain={setNewDomain}
-                addDomainLoading={addDomainLoading}
-                domainError={domainError}
-                onOpenDomainDialog={openDomainDialog}
-                onAddDomain={handleAddDomain}
-                onRemoveDomain={handleRemoveDomain}
+                tenants={tenantsState.tenants}
+                tenantsLoading={tenantsState.tenantsLoading}
+                tenantsError={tenantsState.tenantsError}
+                tenantDialogOpen={tenantsState.tenantDialogOpen}
+                setTenantDialogOpen={tenantsState.setTenantDialogOpen}
+                newTenantName={tenantsState.newTenantName}
+                setNewTenantName={tenantsState.setNewTenantName}
+                newTenantSlug={tenantsState.newTenantSlug}
+                setNewTenantSlug={tenantsState.setNewTenantSlug}
+                tenantCreateLoading={tenantsState.tenantCreateLoading}
+                tenantCreateError={tenantsState.tenantCreateError}
+                onCreateTenant={tenantsState.handleCreateTenant}
+                tenantCredDialogOpen={tenantsState.tenantCredDialogOpen}
+                setTenantCredDialogOpen={tenantsState.setTenantCredDialogOpen}
+                tenantCreatedName={tenantsState.tenantCreatedName}
+                tenantCreatedUsers={tenantsState.tenantCreatedUsers}
+                tenantDeleteId={tenantsState.tenantDeleteId}
+                setTenantDeleteId={tenantsState.setTenantDeleteId}
+                tenantDeleteLoading={tenantsState.tenantDeleteLoading}
+                onDeleteTenant={tenantsState.handleDeleteTenant}
+                domainDialogTenant={tenantsState.domainDialogTenant}
+                setDomainDialogTenant={tenantsState.setDomainDialogTenant}
+                tenantDomains={tenantsState.tenantDomains}
+                domainsLoading={tenantsState.domainsLoading}
+                newDomain={tenantsState.newDomain}
+                setNewDomain={tenantsState.setNewDomain}
+                addDomainLoading={tenantsState.addDomainLoading}
+                domainError={tenantsState.domainError}
+                onOpenDomainDialog={tenantsState.openDomainDialog}
+                onAddDomain={tenantsState.handleAddDomain}
+                onRemoveDomain={tenantsState.handleRemoveDomain}
                 tenantUsersDialogId={tenantUsersDialogId}
                 setTenantUsersDialogId={setTenantUsersDialogId}
                 tenantUsersDialogName={tenantUsersDialogName}
@@ -945,18 +388,18 @@ export default function AdminPage() {
                 tenantUsersSyncResult={tenantUsersSyncResult}
                 onOpenUsersDialog={openUsersDialog}
                 onSyncLDAPUsers={handleSyncLDAPUsers}
-                logoDialogTenant={logoDialogTenant}
-                logoPreviewUrl={logoPreviewUrl}
-                logoUploading={logoUploading}
-                logoError={logoError}
-                onOpenLogoDialog={openLogoDialog}
-                onLogoUpload={handleLogoUpload}
-                onLogoDelete={handleLogoDelete}
-                onLogoDialogClose={() => { setLogoDialogTenant(null); setLogoPreviewUrl(null); }}
-                tenantLdapDialogId={tenantLdapDialogId}
-                setTenantLdapDialogId={setTenantLdapDialogId}
-                onLoadTenants={loadTenants}
-                onToggleTenant={handleToggleTenant}
+                logoDialogTenant={logos.logoDialogTenant}
+                logoPreviewUrl={logos.logoPreviewUrl}
+                logoUploading={logos.logoUploading}
+                logoError={logos.logoError}
+                onOpenLogoDialog={logos.openLogoDialog}
+                onLogoUpload={logos.handleLogoUpload}
+                onLogoDelete={logos.handleLogoDelete}
+                onLogoDialogClose={() => { logos.setLogoDialogTenant(null); logos.setLogoPreviewUrl(null); }}
+                tenantLdapDialogId={tenantsState.tenantLdapDialogId}
+                setTenantLdapDialogId={tenantsState.setTenantLdapDialogId}
+                onLoadTenants={tenantsState.loadTenants}
+                onToggleTenant={tenantsState.handleToggleTenant}
               />
             </TabsContent>
           )}
@@ -997,22 +440,22 @@ export default function AdminPage() {
 
       {/* Global dialogs (not tab-specific) */}
       <ResetPasswordDialog
-        open={resetPasswordUserId !== null}
-        onClose={() => setResetPasswordUserId(null)}
-        value={resetPasswordValue}
-        setValue={setResetPasswordValue}
-        error={resetPasswordError}
-        loading={resetPasswordLoading}
-        onSubmit={handleResetPassword}
+        open={usersState.resetPasswordUserId !== null}
+        onClose={() => usersState.setResetPasswordUserId(null)}
+        value={usersState.resetPasswordValue}
+        setValue={usersState.setResetPasswordValue}
+        error={usersState.resetPasswordError}
+        loading={usersState.resetPasswordLoading}
+        onSubmit={usersState.handleResetPassword}
       />
 
       <DeleteUserDialog
-        user={deleteDialogUser}
-        onClose={() => setDeleteDialogUser(null)}
-        deleteActionLoading={deleteActionLoading}
-        deleteDialogError={deleteDialogError}
-        onDeactivate={handleDeactivateConfirmed}
-        onDelete={handleDeleteConfirmed}
+        user={usersState.deleteDialogUser}
+        onClose={() => usersState.setDeleteDialogUser(null)}
+        deleteActionLoading={usersState.deleteActionLoading}
+        deleteDialogError={usersState.deleteDialogError}
+        onDeactivate={usersState.handleDeactivateConfirmed}
+        onDelete={usersState.handleDeleteConfirmed}
       />
     </div>
   );
diff --git a/src/app/imap/page.tsx b/src/app/imap/page.tsx
index fe1515a..a5d2fc7 100644
--- a/src/app/imap/page.tsx
+++ b/src/app/imap/page.tsx
@@ -1,737 +1,134 @@
 "use client";
 
-import { useState, useEffect, useCallback, useRef } from "react";
 import { useAuth } from "@/hooks/useAuth";
+import { useImapAccounts } from "@/hooks/useImapAccounts";
 import { Navbar } from "@/components/navbar";
-import {
-  getImapAccounts,
-  createImapAccount,
-  deleteImapAccount,
-  testImapConnection,
-  startImapImport,
-  getImapProgress,
-  triggerImapSync,
-  updateImapInterval,
-  updateImapAccount,
-  type ImapAccount,
-  type ImapFolder,
-} from "@/lib/api";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardHeader,
-  CardContent,
-} from "@/components/ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
-import { Progress } from "@/components/ui/progress";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Separator } from "@/components/ui/separator";
+import { Card, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { ImapAccountCard } from "@/components/imap/ImapAccountCard";
+import { ImapAccountDialog } from "@/components/imap/ImapAccountDialog";
+import { ImapEditDialog } from "@/components/imap/ImapEditDialog";
+import { ImapDeleteDialog } from "@/components/imap/ImapDeleteDialog";
 
 export default function ImapPage() {
   const { user, loading: authLoading } = useAuth();
-  const [accounts, setAccounts] = useState<ImapAccount[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
-
-  // Edit state
-  const [editAccount, setEditAccount] = useState<ImapAccount | null>(null);
-  const [editName, setEditName] = useState("");
-  const [editHost, setEditHost] = useState("");
-  const [editPort, setEditPort] = useState("993");
-  const [editTls, setEditTls] = useState("ssl");
-  const [editUsername, setEditUsername] = useState("");
-  const [editPassword, setEditPassword] = useState("");
-  const [editSaving, setEditSaving] = useState(false);
-  const [editError, setEditError] = useState("");
-
-  // Form state
-  const [formName, setFormName] = useState("");
-  const [formHost, setFormHost] = useState("");
-  const [formPort, setFormPort] = useState("993");
-  const [formTls, setFormTls] = useState("ssl");
-  const [formUsername, setFormUsername] = useState("");
-  const [formPassword, setFormPassword] = useState("");
-
-  // Test state
-  const [testing, setTesting] = useState(false);
-  const [testError, setTestError] = useState("");
-  const [testFolders, setTestFolders] = useState<ImapFolder[] | null>(null);
-  const [excludedFolders, setExcludedFolders] = useState<Set<string>>(new Set());
-
-  // Saving state
-  const [saving, setSaving] = useState(false);
-
-  // Import error state
-  const [importError, setImportError] = useState<string>("");
-
-  // Polling refs
-  const pollingRefs = useRef<Map<number, ReturnType<typeof setInterval>>>(new Map());
-  const pollErrorCount = useRef<Map<number, number>>(new Map());
-
-  const loadAccounts = useCallback(async () => {
-    try {
-      const data = await getImapAccounts();
-      setAccounts(data);
-    } catch {
-      // ignore
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (user) loadAccounts();
-  }, [user, loadAccounts]);
-
-  // Start polling for running accounts (import or sync)
-  useEffect(() => {
-    for (const acc of accounts) {
-      const isActive = acc.status === "running" || acc.sync_running;
-      if (isActive && !pollingRefs.current.has(acc.id)) {
-        pollErrorCount.current.set(acc.id, 0);
-        const interval = setInterval(async () => {
-          try {
-            const updated = await getImapProgress(acc.id);
-            pollErrorCount.current.set(acc.id, 0);
-            setAccounts((prev) =>
-              prev.map((a) => (a.id === updated.id ? updated : a))
-            );
-            if (updated.status !== "running" && !updated.sync_running) {
-              clearInterval(pollingRefs.current.get(acc.id)!);
-              pollingRefs.current.delete(acc.id);
-              pollErrorCount.current.delete(acc.id);
-            }
-          } catch {
-            // Only stop polling after 5 consecutive failures (tolerates brief network hiccups)
-            const errors = (pollErrorCount.current.get(acc.id) ?? 0) + 1;
-            pollErrorCount.current.set(acc.id, errors);
-            if (errors >= 5) {
-              clearInterval(pollingRefs.current.get(acc.id)!);
-              pollingRefs.current.delete(acc.id);
-              pollErrorCount.current.delete(acc.id);
-            }
-          }
-        }, 2000);
-        pollingRefs.current.set(acc.id, interval);
-      }
-    }
-    // Cleanup intervals for accounts that are no longer active
-    for (const [id, interval] of pollingRefs.current) {
-      const acc = accounts.find((a) => a.id === id);
-      if (!acc || (acc.status !== "running" && !acc.sync_running)) {
-        clearInterval(interval);
-        pollingRefs.current.delete(id);
-      }
-    }
-  }, [accounts]);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      for (const interval of pollingRefs.current.values()) {
-        clearInterval(interval);
-      }
-    };
-  }, []);
-
-  function resetForm() {
-    setFormName("");
-    setFormHost("");
-    setFormPort("993");
-    setFormTls("ssl");
-    setFormUsername("");
-    setFormPassword("");
-    setTestFolders(null);
-    setTestError("");
-    setExcludedFolders(new Set());
-  }
-
-  async function handleTest() {
-    setTesting(true);
-    setTestError("");
-    setTestFolders(null);
-    try {
-      const result = await testImapConnection({
-        host: formHost,
-        port: parseInt(formPort, 10) || 993,
-        tls: formTls,
-        username: formUsername,
-        password: formPassword,
-      });
-      if (result.ok && result.folders) {
-        setTestFolders(result.folders);
-        const excluded = new Set<string>();
-        for (const f of result.folders) {
-          if (f.excluded) excluded.add(f.name);
-        }
-        setExcludedFolders(excluded);
-      } else {
-        setTestError(result.error || "Verbindungstest fehlgeschlagen");
-      }
-    } catch (err) {
-      setTestError(err instanceof Error ? err.message : "Verbindungstest fehlgeschlagen");
-    } finally {
-      setTesting(false);
-    }
-  }
-
-  async function handleSave() {
-    setSaving(true);
-    try {
-      await createImapAccount({
-        name: formName,
-        host: formHost,
-        port: parseInt(formPort, 10) || 993,
-        tls: formTls,
-        username: formUsername,
-        password: formPassword,
-        excluded_folders: Array.from(excludedFolders),
-      });
-      setDialogOpen(false);
-      resetForm();
-      await loadAccounts();
-    } catch (err) {
-      setTestError(err instanceof Error ? err.message : "Speichern fehlgeschlagen");
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  async function handleStartImport(id: number) {
-    setImportError("");
-    try {
-      const updated = await startImapImport(id);
-      setAccounts((prev) => prev.map((a) => (a.id === updated.id ? updated : a)));
-    } catch (err) {
-      setImportError(err instanceof Error ? err.message : "Import konnte nicht gestartet werden.");
-    }
-  }
-
-  async function handleDelete(id: number) {
-    try {
-      await deleteImapAccount(id);
-      setAccounts((prev) => prev.filter((a) => a.id !== id));
-    } catch (err) {
-      alert("Fehler beim Löschen: " + (err instanceof Error ? err.message : String(err)));
-    }
-    setDeleteConfirm(null);
-  }
-
-  function openEdit(acc: ImapAccount) {
-    setEditAccount(acc);
-    setEditName(acc.name);
-    setEditHost(acc.host);
-    setEditPort(String(acc.port));
-    setEditTls(acc.tls);
-    setEditUsername(acc.username);
-    setEditPassword("");
-    setEditError("");
-  }
-
-  async function handleEditSave() {
-    if (!editAccount) return;
-    if (!editName || !editHost || !editUsername) {
-      setEditError("Name, Host und Benutzername sind Pflichtfelder.");
-      return;
-    }
-    setEditSaving(true);
-    setEditError("");
-    try {
-      const updated = await updateImapAccount(editAccount.id, {
-        name: editName,
-        host: editHost,
-        port: parseInt(editPort, 10),
-        tls: editTls,
-        username: editUsername,
-        password: editPassword || undefined,
-      });
-      setAccounts((prev) => prev.map((a) => (a.id === updated.id ? updated : a)));
-      setEditAccount(null);
-    } catch (err) {
-      setEditError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setEditSaving(false);
-    }
-  }
-
-  async function handleSyncNow(id: number) {
-    try {
-      const updated = await triggerImapSync(id);
-      setAccounts((prev) => prev.map((a) => (a.id === updated.id ? updated : a)));
-    } catch {
-      // ignore — conflict means sync already running
-    }
-  }
-
-  async function handleIntervalChange(id: number, value: string) {
-    const intervalMin = parseInt(value, 10);
-    try {
-      const updated = await updateImapInterval(id, intervalMin);
-      setAccounts((prev) => prev.map((a) => (a.id === updated.id ? updated : a)));
-    } catch {
-      // ignore
-    }
-  }
-
-  function toggleExcluded(folderName: string) {
-    setExcludedFolders((prev) => {
-      const next = new Set(prev);
-      if (next.has(folderName)) {
-        next.delete(folderName);
-      } else {
-        next.add(folderName);
-      }
-      return next;
-    });
-  }
-
-  function statusBadge(status: string) {
-    switch (status) {
-      case "running":
-        return <Badge className="bg-blue-600 text-white">Importiert...</Badge>;
-      case "error":
-        return <Badge variant="destructive">Fehler</Badge>;
-      default:
-        return <Badge variant="secondary">Bereit</Badge>;
-    }
-  }
-
-  function syncBadge(acc: ImapAccount) {
-    if (acc.sync_running) {
-      return <Badge className="bg-blue-500 text-white">Sync laeuft...</Badge>;
-    }
-    if (!acc.sync_status) return null;
-    if (acc.sync_status === "ok") {
-      return <Badge className="bg-green-600 text-white">Sync OK</Badge>;
-    }
-    if (acc.sync_status === "error") {
-      return <Badge variant="destructive">Sync Fehler</Badge>;
-    }
-    return null;
-  }
+  const imap = useImapAccounts(user);
 
   return (
     <div className="min-h-screen">
       <Navbar username={user?.username ?? ""} role={user?.role ?? ""} />
       <main className="mx-auto max-w-4xl px-4 py-6">
-        {(authLoading || !user) ? (
+        {authLoading || !user ? (
           <div className="space-y-4">
             <Skeleton className="h-8 w-48" />
             <Skeleton className="h-64 w-full" />
           </div>
-        ) : (<>
-        <div className="flex items-center justify-between mb-6">
-          <h1 className="text-2xl font-bold">IMAP Import</h1>
-          <Button
-            onClick={() => {
-              resetForm();
-              setDialogOpen(true);
-            }}
-          >
-            Konto hinzufuegen
-          </Button>
-        </div>
-
-        {importError && (
-          <p className="mb-4 text-sm text-destructive" role="alert">{importError}</p>
-        )}
-
-        {loading ? (
-          <div className="space-y-4">
-            {[1, 2].map((i) => (
-              <Skeleton key={i} className="h-32 w-full" />
-            ))}
-          </div>
-        ) : accounts.length === 0 ? (
-          <Card>
-            <CardContent className="p-8 text-center text-muted-foreground">
-              Noch keine IMAP-Konten konfiguriert. Klicken Sie auf &quot;Konto
-              hinzufuegen&quot;, um zu beginnen.
-            </CardContent>
-          </Card>
         ) : (
-          <div className="space-y-4">
-            {accounts.map((acc) => (
-              <Card key={acc.id}>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <div>
-                    <h3 className="font-semibold">{acc.name}</h3>
-                    <p className="text-sm text-muted-foreground">
-                      {acc.host}:{acc.port} ({acc.tls.toUpperCase()}) &middot; {acc.username}
-                    </p>
-                  </div>
-                  {statusBadge(acc.status)}
-                </CardHeader>
-                <CardContent>
-                  {acc.status === "running" && acc.progress_total === 0 && (
-                    <div className="mb-3 space-y-1">
-                      <Progress value={undefined} className="animate-pulse" />
-                      <p className="text-xs text-muted-foreground">
-                        Zaehle E-Mails auf dem Server...
-                      </p>
-                    </div>
-                  )}
-                  {acc.status === "running" && acc.progress_total > 0 && (
-                    <div className="mb-3 space-y-1">
-                      <Progress
-                        value={
-                          (acc.progress_current / acc.progress_total) * 100
-                        }
-                      />
-                      <p className="text-xs text-muted-foreground">
-                        {acc.progress_current} von {acc.progress_total} E-Mails
-                      </p>
-                    </div>
-                  )}
-
-                  {acc.status === "error" && acc.error_msg && (
-                    <p className="mb-3 text-sm text-destructive">
-                      {acc.error_msg}
-                    </p>
-                  )}
-
-                  {acc.last_import_at && (
-                    <p className="text-sm text-muted-foreground mb-3">
-                      Letzter Import:{" "}
-                      {new Date(acc.last_import_at).toLocaleString("de-DE")} (
-                      {acc.last_import_count} E-Mails)
-                    </p>
-                  )}
-
-                  {/* PROJ-8: Sync status */}
-                  {acc.last_sync_at && (
-                    <div className="flex items-center gap-2 mb-3">
-                      <p className="text-sm text-muted-foreground">
-                        Letzter Sync:{" "}
-                        {new Date(acc.last_sync_at).toLocaleString("de-DE")} (
-                        {acc.last_sync_count} neu)
-                      </p>
-                      {syncBadge(acc)}
-                    </div>
-                  )}
-
-                  {acc.sync_running && !acc.last_sync_at && syncBadge(acc)}
-
-                  {acc.sync_error_msg && acc.sync_status === "error" && (
-                    <p className="mb-3 text-sm text-destructive">
-                      Sync-Fehler: {acc.sync_error_msg}
-                    </p>
-                  )}
-
-                  {acc.excluded_folders && acc.excluded_folders.length > 0 && (
-                    <p className="text-xs text-muted-foreground mb-3">
-                      Ausgeschlossene Ordner: {acc.excluded_folders.join(", ")}
-                    </p>
-                  )}
-
-                  {/* PROJ-8: Sync interval selector */}
-                  <div className="mb-3 flex items-center gap-3">
-                    <span className="text-sm text-muted-foreground whitespace-nowrap">
-                      Auto-Sync:
-                    </span>
-                    <Select
-                      value={String(acc.sync_interval_min ?? 0)}
-                      onValueChange={(v) => handleIntervalChange(acc.id, v)}
-                    >
-                      <SelectTrigger className="w-40 h-8 text-sm">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="0">Deaktiviert</SelectItem>
-                        <SelectItem value="5">5 min</SelectItem>
-                        <SelectItem value="15">15 min</SelectItem>
-                        <SelectItem value="30">30 min</SelectItem>
-                        <SelectItem value="60">1 Stunde</SelectItem>
-                        <SelectItem value="360">6 Stunden</SelectItem>
-                        <SelectItem value="1440">24 Stunden</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-
-                  <div className="flex gap-2 flex-wrap">
-                    <Button
-                      size="sm"
-                      disabled={acc.status === "running"}
-                      onClick={() => handleStartImport(acc.id)}
-                    >
-                      Import starten
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      disabled={acc.status === "running" || acc.sync_running}
-                      onClick={() => handleSyncNow(acc.id)}
-                    >
-                      Sync jetzt
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => openEdit(acc)}
-                    >
-                      Bearbeiten
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="destructive"
-                      disabled={acc.status === "running"}
-                      onClick={() => setDeleteConfirm(acc.id)}
-                    >
-                      Loeschen
-                    </Button>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        )}
-
-        {/* Add Account Dialog */}
-        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-          <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
-            <DialogHeader>
-              <DialogTitle>IMAP-Konto hinzufuegen</DialogTitle>
-            </DialogHeader>
-            <div className="space-y-4">
-              <div className="space-y-1">
-                <Label htmlFor="imap-name">Name</Label>
-                <Input
-                  id="imap-name"
-                  placeholder="z.B. Firmen-Mail"
-                  value={formName}
-                  onChange={(e) => setFormName(e.target.value)}
-                />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div className="space-y-1">
-                  <Label htmlFor="imap-host">Host</Label>
-                  <Input
-                    id="imap-host"
-                    placeholder="imap.example.com"
-                    value={formHost}
-                    onChange={(e) => setFormHost(e.target.value)}
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label htmlFor="imap-port">Port</Label>
-                  <Input
-                    id="imap-port"
-                    type="number"
-                    value={formPort}
-                    onChange={(e) => setFormPort(e.target.value)}
-                  />
-                </div>
-              </div>
-              <div className="space-y-1">
-                <Label>Verschluesselung</Label>
-                <Select value={formTls} onValueChange={setFormTls}>
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="ssl">SSL/TLS</SelectItem>
-                    <SelectItem value="starttls">STARTTLS</SelectItem>
-                    <SelectItem value="none">Unverschluesselt</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-1">
-                <Label htmlFor="imap-user">Benutzername</Label>
-                <Input
-                  id="imap-user"
-                  placeholder="user@example.com"
-                  value={formUsername}
-                  onChange={(e) => setFormUsername(e.target.value)}
-                />
-              </div>
-              <div className="space-y-1">
-                <Label htmlFor="imap-pass">Passwort</Label>
-                <Input
-                  id="imap-pass"
-                  type="password"
-                  value={formPassword}
-                  onChange={(e) => setFormPassword(e.target.value)}
-                />
-              </div>
-
+          <>
+            <div className="flex items-center justify-between mb-6">
+              <h1 className="text-2xl font-bold">IMAP Import</h1>
               <Button
-                variant="outline"
-                onClick={handleTest}
-                disabled={testing || !formHost || !formUsername || !formPassword}
-                className="w-full"
-              >
-                {testing ? "Teste Verbindung..." : "Verbindung testen"}
-              </Button>
-
-              {testError && (
-                <p className="text-sm text-destructive">{testError}</p>
-              )}
-
-              {testFolders && (
-                <>
-                  <Separator />
-                  <div>
-                    <h4 className="text-sm font-medium mb-2">
-                      Erkannte Ordner
-                    </h4>
-                    <div className="space-y-2 max-h-48 overflow-y-auto">
-                      {testFolders.map((folder) => (
-                        <div
-                          key={folder.name}
-                          className="flex items-center gap-2"
-                        >
-                          <Checkbox
-                            id={`folder-${folder.name}`}
-                            checked={!excludedFolders.has(folder.name)}
-                            onCheckedChange={() =>
-                              toggleExcluded(folder.name)
-                            }
-                          />
-                          <Label
-                            htmlFor={`folder-${folder.name}`}
-                            className="text-sm flex-1 cursor-pointer"
-                          >
-                            {folder.name}
-                          </Label>
-                          {folder.excluded && folder.reason && (
-                            <span className="text-xs text-muted-foreground">
-                              ({folder.reason === "special_use"
-                                ? "IMAP-Flag"
-                                : "Namens-Erkennung"})
-                            </span>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                    <p className="text-xs text-muted-foreground mt-2">
-                      Deaktivierte Ordner werden nicht importiert.
-                    </p>
-                  </div>
-                </>
-              )}
-            </div>
-            <DialogFooter>
-              <Button
-                variant="outline"
                 onClick={() => {
-                  setDialogOpen(false);
-                  resetForm();
+                  imap.resetForm();
+                  imap.setDialogOpen(true);
                 }}
               >
-                Abbrechen
+                Konto hinzufuegen
               </Button>
-              <Button
-                onClick={handleSave}
-                disabled={
-                  saving ||
-                  !formName ||
-                  !formHost ||
-                  !formUsername ||
-                  !formPassword
-                }
-              >
-                {saving ? "Speichert..." : "Speichern"}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Edit Account Dialog */}
-        <Dialog open={editAccount !== null} onOpenChange={(open) => { if (!open) setEditAccount(null); }}>
-          <DialogContent className="max-w-lg">
-            <DialogHeader>
-              <DialogTitle>IMAP-Konto bearbeiten</DialogTitle>
-            </DialogHeader>
-            <div className="space-y-4">
-              <div className="space-y-1">
-                <Label>Name</Label>
-                <Input value={editName} onChange={(e) => setEditName(e.target.value)} placeholder="z.B. Firmen-Mail" />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div className="space-y-1">
-                  <Label>Host</Label>
-                  <Input value={editHost} onChange={(e) => setEditHost(e.target.value)} placeholder="imap.example.com" />
-                </div>
-                <div className="space-y-1">
-                  <Label>Port</Label>
-                  <Input value={editPort} onChange={(e) => setEditPort(e.target.value)} type="number" />
-                </div>
-              </div>
-              <div className="space-y-1">
-                <Label>TLS</Label>
-                <Select value={editTls} onValueChange={setEditTls}>
-                  <SelectTrigger><SelectValue /></SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="ssl">SSL/TLS</SelectItem>
-                    <SelectItem value="starttls">STARTTLS</SelectItem>
-                    <SelectItem value="none">Keine</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-1">
-                <Label>Benutzername</Label>
-                <Input value={editUsername} onChange={(e) => setEditUsername(e.target.value)} placeholder="user@example.com" />
-              </div>
-              <div className="space-y-1">
-                <Label>Passwort <span className="text-muted-foreground text-xs">(leer lassen = unveraendert)</span></Label>
-                <Input value={editPassword} onChange={(e) => setEditPassword(e.target.value)} type="password" placeholder="Neues Passwort eingeben" />
-              </div>
-              {editError && <p className="text-sm text-destructive">{editError}</p>}
             </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setEditAccount(null)}>Abbrechen</Button>
-              <Button onClick={handleEditSave} disabled={editSaving}>
-                {editSaving ? "Speichert..." : "Speichern"}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
 
-        {/* Delete Confirmation Dialog */}
-        <Dialog
-          open={deleteConfirm !== null}
-          onOpenChange={() => setDeleteConfirm(null)}
-        >
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Konto loeschen?</DialogTitle>
-            </DialogHeader>
-            <p className="text-sm text-muted-foreground">
-              Soll dieses IMAP-Konto wirklich entfernt werden? Bereits
-              importierte E-Mails bleiben im Archiv erhalten.
-            </p>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setDeleteConfirm(null)}>
-                Abbrechen
-              </Button>
-              <Button
-                variant="destructive"
-                onClick={() => deleteConfirm !== null && handleDelete(deleteConfirm)}
-              >
-                Loeschen
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-        </>)}
+            {imap.importError && (
+              <p className="mb-4 text-sm text-destructive" role="alert">
+                {imap.importError}
+              </p>
+            )}
+
+            {imap.loading ? (
+              <div className="space-y-4">
+                {[1, 2].map((i) => (
+                  <Skeleton key={i} className="h-32 w-full" />
+                ))}
+              </div>
+            ) : imap.accounts.length === 0 ? (
+              <Card>
+                <CardContent className="p-8 text-center text-muted-foreground">
+                  Noch keine IMAP-Konten konfiguriert. Klicken Sie auf &quot;Konto
+                  hinzufuegen&quot;, um zu beginnen.
+                </CardContent>
+              </Card>
+            ) : (
+              <div className="space-y-4">
+                {imap.accounts.map((acc) => (
+                  <ImapAccountCard
+                    key={acc.id}
+                    acc={acc}
+                    onStartImport={imap.handleStartImport}
+                    onSyncNow={imap.handleSyncNow}
+                    onEdit={imap.openEdit}
+                    onDelete={imap.setDeleteConfirm}
+                    onIntervalChange={imap.handleIntervalChange}
+                  />
+                ))}
+              </div>
+            )}
+
+            <ImapAccountDialog
+              open={imap.dialogOpen}
+              onOpenChange={imap.setDialogOpen}
+              formName={imap.formName}
+              setFormName={imap.setFormName}
+              formHost={imap.formHost}
+              setFormHost={imap.setFormHost}
+              formPort={imap.formPort}
+              setFormPort={imap.setFormPort}
+              formTls={imap.formTls}
+              setFormTls={imap.setFormTls}
+              formUsername={imap.formUsername}
+              setFormUsername={imap.setFormUsername}
+              formPassword={imap.formPassword}
+              setFormPassword={imap.setFormPassword}
+              testing={imap.testing}
+              testError={imap.testError}
+              testFolders={imap.testFolders}
+              excludedFolders={imap.excludedFolders}
+              saving={imap.saving}
+              onTest={imap.handleTest}
+              onSave={imap.handleSave}
+              onCancel={() => {
+                imap.setDialogOpen(false);
+                imap.resetForm();
+              }}
+              onToggleExcluded={imap.toggleExcluded}
+            />
+
+            <ImapEditDialog
+              editAccount={imap.editAccount}
+              onClose={() => imap.setEditAccount(null)}
+              editName={imap.editName}
+              setEditName={imap.setEditName}
+              editHost={imap.editHost}
+              setEditHost={imap.setEditHost}
+              editPort={imap.editPort}
+              setEditPort={imap.setEditPort}
+              editTls={imap.editTls}
+              setEditTls={imap.setEditTls}
+              editUsername={imap.editUsername}
+              setEditUsername={imap.setEditUsername}
+              editPassword={imap.editPassword}
+              setEditPassword={imap.setEditPassword}
+              editSaving={imap.editSaving}
+              editError={imap.editError}
+              onSave={imap.handleEditSave}
+            />
+
+            <ImapDeleteDialog
+              deleteConfirm={imap.deleteConfirm}
+              onCancel={() => imap.setDeleteConfirm(null)}
+              onConfirm={imap.handleDelete}
+            />
+          </>
+        )}
       </main>
     </div>
   );
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index c046356..b612fc1 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -1,86 +1,23 @@
 "use client";
 
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/hooks/useAuth";
-import { searchEmails, exportMailsZIP, exportEDiscovery, uploadMailFilesUser, getUploadProgressUser, listSavedSearches, createSavedSearch, deleteSavedSearch, type SearchHit, type SearchMatchField, type UploadJob, type SavedSearch } from "@/lib/api";
-import { sanitizeSnippet } from "@/lib/sanitize";
+import { useSearch, DEFAULT_PAGE_SIZE } from "@/hooks/useSearch";
+import { useSavedSearches } from "@/hooks/useSavedSearches";
+import { useMailUpload } from "@/hooks/useMailUpload";
+import { exportMailsZIP, exportEDiscovery } from "@/lib/api";
 import { Navbar } from "@/components/navbar";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Progress } from "@/components/ui/progress";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { Bookmark, BookmarkPlus, Trash2 } from "lucide-react";
-
-const DEFAULT_PAGE_SIZE = 25;
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-const MATCH_FIELD_LABEL: Record<SearchMatchField, string> = {
-  subject: "📨 Subject",
-  body: "✉️ Body",
-  attachment_text: "📄 PDF-Anhang",
-  attachment_names: "📎 Dateiname",
-  from_addr: "👤 Absender",
-  to_addr: "📧 Empfänger",
-};
-
-function MatchSourceBadge({ field }: { field: SearchMatchField }) {
-  return (
-    <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground whitespace-nowrap">
-      {MATCH_FIELD_LABEL[field]}
-    </span>
-  );
-}
-
-function SnippetLine({ hit }: { hit: SearchHit }) {
-  if (!hit.snippet) return null;
-  return (
-    <div className="mt-1 flex items-start gap-2 text-xs text-muted-foreground font-normal">
-      {hit.match_field && <MatchSourceBadge field={hit.match_field} />}
-      <span
-        className="min-w-0 flex-1 truncate [&_b]:font-semibold [&_b]:text-foreground"
-        dangerouslySetInnerHTML={{ __html: sanitizeSnippet(hit.snippet) }}
-      />
-    </div>
-  );
-}
+import { SearchFilterBar } from "@/components/search/SearchFilterBar";
+import { SearchResultsTable } from "@/components/search/SearchResultsTable";
+import {
+  ExportZipDialog,
+  EDiscoveryDialog,
+  UploadDialog,
+} from "@/components/search/ExportDialogs";
 
 export default function SearchPage() {
   const { user, loading: authLoading } = useAuth();
@@ -88,19 +25,34 @@ export default function SearchPage() {
 
   const pageSize = user?.list_page_size ?? DEFAULT_PAGE_SIZE;
 
-  const [query, setQuery] = useState("");
-  const [fromFilter, setFromFilter] = useState("");
-  const [toFilter, setToFilter] = useState("");
-  const [dateFrom, setDateFrom] = useState("");
-  const [dateTo, setDateTo] = useState("");
-  const [sort, setSort] = useState("date_desc");
-  const [hasAttachment, setHasAttachment] = useState<boolean | undefined>(undefined);
-
-  const [results, setResults] = useState<SearchHit[]>([]);
-  const [total, setTotal] = useState(0);
-  const [page, setPage] = useState(1);
-  const [searching, setSearching] = useState(false);
-  const [searched, setSearched] = useState(false);
+  const search = useSearch(user, pageSize);
+  const {
+    query,
+    setQuery,
+    fromFilter,
+    setFromFilter,
+    toFilter,
+    setToFilter,
+    dateFrom,
+    setDateFrom,
+    dateTo,
+    setDateTo,
+    sort,
+    setSort,
+    hasAttachment,
+    setHasAttachment,
+    results,
+    setResults,
+    total,
+    setTotal,
+    page,
+    setPage,
+    searching,
+    setSearching,
+    searched,
+    setSearched,
+    doSearch,
+  } = search;
 
   // Selection state
   const [selected, setSelected] = useState<Set<string>>(new Set());
@@ -111,56 +63,35 @@ export default function SearchPage() {
   const [ediscoveryCaseName, setEdiscoveryCaseName] = useState("");
   const [ediscoveryLoading, setEdiscoveryLoading] = useState(false);
 
-  // Upload state
-  const [uploadOpen, setUploadOpen] = useState(false);
-  const [uploadDragging, setUploadDragging] = useState(false);
-  const [uploadJob, setUploadJob] = useState<UploadJob | null>(null);
-  const [uploadError, setUploadError] = useState("");
-  const [uploadLoading, setUploadLoading] = useState(false);
-  const uploadPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const upload = useMailUpload(() => doSearch(1));
 
-  // Saved searches state
-  const [savedSearches, setSavedSearches] = useState<SavedSearch[]>([]);
-  const [savedLoading, setSavedLoading] = useState(false);
-  const [savePopoverOpen, setSavePopoverOpen] = useState(false);
-  const [saveName, setSaveName] = useState("");
-  const [saving, setSaving] = useState(false);
-  const [savedListOpen, setSavedListOpen] = useState(false);
+  const saved = useSavedSearches({
+    user,
+    pageSize,
+    query,
+    fromFilter,
+    toFilter,
+    dateFrom,
+    dateTo,
+    hasAttachment,
+    setQuery,
+    setFromFilter,
+    setToFilter,
+    setDateFrom,
+    setDateTo,
+    setHasAttachment,
+    setResults,
+    setTotal,
+    setPage,
+    setSearching,
+    setSearched,
+  });
 
   // Clear selection when results change
   useEffect(() => {
     setSelected(new Set());
   }, [results]);
 
-  const doSearch = useCallback(
-    async (p: number) => {
-      setSearching(true);
-      try {
-        const res = await searchEmails({
-          q: query || undefined,
-          from: fromFilter || undefined,
-          to: toFilter || undefined,
-          date_from: dateFrom || undefined,
-          date_to: dateTo || undefined,
-          sort: sort !== "date_desc" ? sort : undefined,
-          has_attachment: hasAttachment,
-          page: p,
-          page_size: pageSize,
-        });
-        setResults(res.hits || []);
-        setTotal(res.total);
-        setPage(p);
-        setSearched(true);
-      } catch {
-        setResults([]);
-        setTotal(0);
-      } finally {
-        setSearching(false);
-      }
-    },
-    [query, fromFilter, toFilter, dateFrom, dateTo, sort, hasAttachment, pageSize]
-  );
-
   // Superadmin has no mail access — redirect to admin dashboard
   useEffect(() => {
     if (user?.role === "superadmin") {
@@ -168,24 +99,6 @@ export default function SearchPage() {
     }
   }, [user, router]);
 
-  // Alle Mails beim Öffnen der Seite laden — direkt, ohne useCallback-Closure
-  useEffect(() => {
-    if (!user || user.role === "superadmin") return;
-    setSearching(true);
-    searchEmails({ page: 1, page_size: pageSize })
-      .then((res) => {
-        setResults(res.hits || []);
-        setTotal(res.total);
-        setPage(1);
-        setSearched(true);
-      })
-      .catch(() => {
-        setResults([]);
-        setTotal(0);
-      })
-      .finally(() => setSearching(false));
-  }, [user, pageSize]);
-
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     doSearch(1);
@@ -235,139 +148,8 @@ export default function SearchPage() {
     }
   }
 
-  async function handleUploadFiles(files: FileList | File[]) {
-    const allowed = Array.from(files).filter((f) => {
-      const n = f.name.toLowerCase();
-      return n.endsWith(".eml") || n.endsWith(".mbox");
-    });
-    if (allowed.length === 0) {
-      setUploadError("Nur .eml und .mbox Dateien erlaubt.");
-      return;
-    }
-    setUploadError("");
-    setUploadJob(null);
-    setUploadLoading(true);
-    try {
-      const { job_id } = await uploadMailFilesUser(allowed);
-      uploadPollRef.current = setInterval(async () => {
-        try {
-          const job = await getUploadProgressUser(job_id);
-          setUploadJob(job);
-          if (job.status !== "running") {
-            clearInterval(uploadPollRef.current!);
-            uploadPollRef.current = null;
-            setUploadLoading(false);
-            // Refresh search results after successful import
-            if (job.status === "done") doSearch(1);
-          }
-        } catch {
-          clearInterval(uploadPollRef.current!);
-          uploadPollRef.current = null;
-          setUploadLoading(false);
-        }
-      }, 1500);
-    } catch (e) {
-      setUploadError(e instanceof Error ? e.message : "Upload fehlgeschlagen.");
-      setUploadLoading(false);
-    }
-  }
-
-  function handleUploadClose() {
-    if (uploadPollRef.current) {
-      clearInterval(uploadPollRef.current);
-      uploadPollRef.current = null;
-    }
-    setUploadOpen(false);
-    setUploadJob(null);
-    setUploadError("");
-    setUploadLoading(false);
-  }
-
-  // Load saved searches on mount
-  useEffect(() => {
-    if (!user || user.role === "superadmin") return;
-    setSavedLoading(true);
-    listSavedSearches()
-      .then((list) => setSavedSearches(list || []))
-      .catch(() => setSavedSearches([]))
-      .finally(() => setSavedLoading(false));
-  }, [user]);
-
   const hasActiveSearch = !!(query || fromFilter || toFilter || dateFrom || dateTo || hasAttachment);
-
-  function buildCurrentQuery(): Record<string, string> {
-    const q: Record<string, string> = {};
-    if (query) q.q = query;
-    if (fromFilter) q.from = fromFilter;
-    if (toFilter) q.to = toFilter;
-    if (dateFrom) q.date_from = dateFrom;
-    if (dateTo) q.date_to = dateTo;
-    if (hasAttachment) q.has_attachment = "true";
-    return q;
-  }
-
-  async function handleSaveSearch() {
-    if (!saveName.trim()) return;
-    setSaving(true);
-    try {
-      const saved = await createSavedSearch(saveName.trim(), buildCurrentQuery());
-      setSavedSearches((prev) => [saved, ...prev]);
-      setSaveName("");
-      setSavePopoverOpen(false);
-    } catch (e) {
-      alert(`Suche speichern fehlgeschlagen: ${e instanceof Error ? e.message : e}`);
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  function handleApplySavedSearch(s: SavedSearch) {
-    setQuery(s.query.q || "");
-    setFromFilter(s.query.from || "");
-    setToFilter(s.query.to || "");
-    setDateFrom(s.query.date_from || "");
-    setDateTo(s.query.date_to || "");
-    setHasAttachment(s.query.has_attachment === "true" ? true : undefined);
-    setSavedListOpen(false);
-    // Trigger search after state updates
-    setTimeout(() => {
-      // We need to search with the saved query directly since state isn't updated yet
-      setSearching(true);
-      searchEmails({
-        q: s.query.q || undefined,
-        from: s.query.from || undefined,
-        to: s.query.to || undefined,
-        date_from: s.query.date_from || undefined,
-        date_to: s.query.date_to || undefined,
-        has_attachment: s.query.has_attachment === "true" ? true : undefined,
-        page: 1,
-        page_size: pageSize,
-      })
-        .then((res) => {
-          setResults(res.hits || []);
-          setTotal(res.total);
-          setPage(1);
-          setSearched(true);
-        })
-        .catch(() => {
-          setResults([]);
-          setTotal(0);
-        })
-        .finally(() => setSearching(false));
-    }, 0);
-  }
-
-  async function handleDeleteSavedSearch(id: number) {
-    try {
-      await deleteSavedSearch(id);
-      setSavedSearches((prev) => prev.filter((s) => s.id !== id));
-    } catch (e) {
-      alert(`Loeschen fehlgeschlagen: ${e instanceof Error ? e.message : e}`);
-    }
-  }
-
   const totalPages = Math.ceil(total / pageSize);
-  const allSelected = results.length > 0 && results.every((h) => selected.has(h.id));
 
   return (
     <div className="min-h-screen">
@@ -384,183 +166,38 @@ export default function SearchPage() {
         <div className="flex gap-6">
         {/* Main content */}
         <div className="flex-1 min-w-0">
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="flex flex-wrap items-center gap-2">
-            <Input
-              placeholder="Volltextsuche..."
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              className="w-full flex-1 sm:w-auto"
-              aria-label="Suchbegriff"
-            />
-            <Button type="submit" disabled={searching} className="flex-1 sm:flex-none">
-              {searching ? "Suche..." : "Suchen"}
-            </Button>
-            <Button type="button" variant="outline" onClick={() => setUploadOpen(true)} className="flex-1 sm:flex-none">
-              Importieren
-            </Button>
-            {hasActiveSearch && (
-              <Popover open={savePopoverOpen} onOpenChange={setSavePopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button type="button" variant="outline" size="icon" title="Suche speichern" aria-label="Suche speichern">
-                    <BookmarkPlus className="h-4 w-4" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-72" align="end">
-                  <div className="space-y-3">
-                    <p className="text-sm font-medium">Suche speichern</p>
-                    <Input
-                      placeholder="Name der Suche..."
-                      value={saveName}
-                      onChange={(e) => setSaveName(e.target.value)}
-                      onKeyDown={(e) => { if (e.key === "Enter") handleSaveSearch(); }}
-                      aria-label="Name der gespeicherten Suche"
-                      autoFocus
-                    />
-                    <div className="flex justify-end gap-2">
-                      <Button size="sm" variant="outline" onClick={() => setSavePopoverOpen(false)}>
-                        Abbrechen
-                      </Button>
-                      <Button size="sm" onClick={handleSaveSearch} disabled={saving || !saveName.trim()}>
-                        {saving ? "Speichern..." : "Speichern"}
-                      </Button>
-                    </div>
-                  </div>
-                </PopoverContent>
-              </Popover>
-            )}
-            <Popover open={savedListOpen} onOpenChange={setSavedListOpen}>
-              <PopoverTrigger asChild>
-                <Button type="button" variant="outline" size="icon" title="Gespeicherte Suchen" aria-label="Gespeicherte Suchen">
-                  <Bookmark className="h-4 w-4" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-80" align="end">
-                <p className="text-sm font-medium mb-3">Gespeicherte Suchen</p>
-                {savedLoading ? (
-                  <div className="space-y-2">
-                    <Skeleton className="h-8 w-full" />
-                    <Skeleton className="h-8 w-full" />
-                  </div>
-                ) : savedSearches.length === 0 ? (
-                  <p className="text-sm text-muted-foreground py-4 text-center">
-                    Keine gespeicherten Suchen vorhanden.
-                  </p>
-                ) : (
-                  <div className="space-y-1 max-h-64 overflow-y-auto">
-                    {savedSearches.map((s) => (
-                      <div
-                        key={s.id}
-                        className="flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted group"
-                      >
-                        <button
-                          type="button"
-                          className="flex-1 text-left text-sm truncate"
-                          onClick={() => handleApplySavedSearch(s)}
-                          title={Object.entries(s.query).map(([k, v]) => `${k}: ${v}`).join(", ")}
-                        >
-                          {s.name}
-                        </button>
-                        <span className="text-xs text-muted-foreground whitespace-nowrap hidden group-hover:inline">
-                          {new Date(s.created_at).toLocaleDateString("de-DE")}
-                        </span>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
-                          onClick={(e) => { e.stopPropagation(); handleDeleteSavedSearch(s.id); }}
-                          aria-label={`Suche "${s.name}" loeschen`}
-                        >
-                          <Trash2 className="h-3.5 w-3.5 text-destructive" />
-                        </Button>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </PopoverContent>
-            </Popover>
-          </div>
-
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
-            <div className="space-y-1">
-              <Label htmlFor="from-filter" className="text-xs">
-                Von (Absender)
-              </Label>
-              <Input
-                id="from-filter"
-                placeholder="absender@example.com"
-                value={fromFilter}
-                onChange={(e) => setFromFilter(e.target.value)}
-                aria-label="Absender filtern"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="to-filter" className="text-xs">
-                An (Empfänger)
-              </Label>
-              <Input
-                id="to-filter"
-                placeholder="empfaenger@example.com"
-                value={toFilter}
-                onChange={(e) => setToFilter(e.target.value)}
-                aria-label="Empfänger filtern"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="date-from" className="text-xs">
-                Datum von
-              </Label>
-              <Input
-                id="date-from"
-                type="date"
-                value={dateFrom}
-                onChange={(e) => setDateFrom(e.target.value)}
-                aria-label="Datum von"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="date-to" className="text-xs">
-                Datum bis
-              </Label>
-              <Input
-                id="date-to"
-                type="date"
-                value={dateTo}
-                onChange={(e) => setDateTo(e.target.value)}
-                aria-label="Datum bis"
-              />
-            </div>
-          </div>
-
-          <div className="flex flex-wrap items-center gap-4">
-            <div className="flex items-center gap-2">
-              <Label htmlFor="sort-select" className="text-xs whitespace-nowrap">Sortierung</Label>
-              <Select value={sort} onValueChange={setSort}>
-                <SelectTrigger id="sort-select" className="h-8 w-40 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="date_desc">Datum (neu → alt)</SelectItem>
-                  <SelectItem value="date_asc">Datum (alt → neu)</SelectItem>
-                  <SelectItem value="relevance">Relevanz</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center gap-2">
-              <Switch
-                id="attach-toggle"
-                checked={hasAttachment === true}
-                onCheckedChange={(checked) =>
-                  setHasAttachment(checked ? true : undefined)
-                }
-              />
-              <Label htmlFor="attach-toggle" className="text-xs cursor-pointer">
-                Nur mit Anhang
-              </Label>
-            </div>
-          </div>
-        </form>
+        <SearchFilterBar
+          query={query}
+          setQuery={setQuery}
+          fromFilter={fromFilter}
+          setFromFilter={setFromFilter}
+          toFilter={toFilter}
+          setToFilter={setToFilter}
+          dateFrom={dateFrom}
+          setDateFrom={setDateFrom}
+          dateTo={dateTo}
+          setDateTo={setDateTo}
+          sort={sort}
+          setSort={setSort}
+          hasAttachment={hasAttachment}
+          setHasAttachment={setHasAttachment}
+          searching={searching}
+          onSubmit={handleSubmit}
+          onOpenUpload={() => upload.setUploadOpen(true)}
+          hasActiveSearch={hasActiveSearch}
+          savePopoverOpen={saved.savePopoverOpen}
+          setSavePopoverOpen={saved.setSavePopoverOpen}
+          saveName={saved.saveName}
+          setSaveName={saved.setSaveName}
+          saving={saved.saving}
+          onSaveSearch={saved.handleSaveSearch}
+          savedListOpen={saved.savedListOpen}
+          setSavedListOpen={saved.setSavedListOpen}
+          savedLoading={saved.savedLoading}
+          savedSearches={saved.savedSearches}
+          onApplySavedSearch={saved.handleApplySavedSearch}
+          onDeleteSavedSearch={saved.handleDeleteSavedSearch}
+        />
 
         <div className="mt-6">
           {searching ? (
@@ -598,272 +235,56 @@ export default function SearchPage() {
                 </Button>
               </div>
 
-              <Card className="overflow-x-auto">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-10">
-                        <Checkbox
-                          checked={allSelected}
-                          onCheckedChange={(checked) => {
-                            if (checked) setSelected(new Set(results.map((h) => h.id)));
-                            else setSelected(new Set());
-                          }}
-                          aria-label="Alle auswählen"
-                        />
-                      </TableHead>
-                      <TableHead className="w-28 sm:w-32">Datum</TableHead>
-                      <TableHead className="hidden w-56 md:table-cell">Von</TableHead>
-                      <TableHead>Betreff</TableHead>
-                      <TableHead className="hidden w-48 lg:table-cell">An</TableHead>
-                      <TableHead className="w-8 text-center" title="Anhang">📎</TableHead>
-                      <TableHead className="hidden w-20 text-right sm:table-cell">Größe</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {results.map((hit) => (
-                      <TableRow
-                        key={hit.id}
-                        className="cursor-pointer hover:bg-muted/50"
-                        onClick={() => router.push(`/mail/${hit.id}`)}
-                        role="link"
-                        tabIndex={0}
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") router.push(`/mail/${hit.id}`);
-                        }}
-                        aria-label={`E-Mail von ${hit.from || "unbekannt"}: ${hit.subject || "Kein Betreff"}`}
-                      >
-                        <TableCell onClick={(e) => e.stopPropagation()}>
-                          <Checkbox
-                            checked={selected.has(hit.id)}
-                            onCheckedChange={(checked) => {
-                              setSelected((prev) => {
-                                const next = new Set(prev);
-                                if (checked) next.add(hit.id);
-                                else next.delete(hit.id);
-                                return next;
-                              });
-                            }}
-                            aria-label="Mail auswählen"
-                          />
-                        </TableCell>
-                        <TableCell className="whitespace-nowrap text-sm text-muted-foreground">
-                          {hit.date
-                            ? new Date(hit.date).toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" })
-                            : "-"}
-                        </TableCell>
-                        <TableCell className="hidden max-w-[14rem] truncate text-sm md:table-cell">{hit.from || "-"}</TableCell>
-                        <TableCell className="max-w-[60vw] font-medium sm:max-w-none">
-                          <div className="flex items-center gap-2">
-                            <span className="truncate">{hit.subject || "(kein Betreff)"}</span>
-                            {hit.thread_size && hit.thread_size > 1 && (
-                              <span className="inline-flex items-center rounded-full bg-muted px-1.5 py-0.5 text-xs text-muted-foreground font-normal">
-                                {hit.thread_size}
-                              </span>
-                            )}
-                          </div>
-                          {/* Absender nur auf Mobile, da Spalte "Von" dort ausgeblendet ist */}
-                          {hit.from && (
-                            <div className="mt-0.5 truncate text-xs text-muted-foreground md:hidden">
-                              {hit.from}
-                            </div>
-                          )}
-                          <SnippetLine hit={hit} />
-                        </TableCell>
-                        <TableCell className="hidden max-w-[12rem] truncate text-sm text-muted-foreground lg:table-cell">{hit.to || "-"}</TableCell>
-                        <TableCell className="text-center text-sm">
-                          {hit.has_attachments ? "📎" : ""}
-                        </TableCell>
-                        <TableCell className="hidden text-right text-xs text-muted-foreground whitespace-nowrap sm:table-cell">
-                          {hit.size ? formatBytes(hit.size) : ""}
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </Card>
-
-              {totalPages > 1 && (
-                <div className="mt-4 flex items-center justify-center gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    disabled={page <= 1}
-                    onClick={() => doSearch(page - 1)}
-                  >
-                    Zurueck
-                  </Button>
-                  <span className="text-sm text-muted-foreground">
-                    Seite {page} von {totalPages}
-                  </span>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    disabled={page >= totalPages}
-                    onClick={() => doSearch(page + 1)}
-                  >
-                    Weiter
-                  </Button>
-                </div>
-              )}
+              <SearchResultsTable
+                results={results}
+                selected={selected}
+                setSelected={setSelected}
+                total={total}
+                page={page}
+                totalPages={totalPages}
+                onPageChange={(p) => doSearch(p)}
+              />
             </>
           ) : null}
         </div>
         </div>{/* end flex-1 */}
         </div>{/* end flex gap-6 */}
 
-        <Dialog open={exportOpen} onOpenChange={setExportOpen}>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>E-Mails exportieren</DialogTitle>
-              <DialogDescription>
-                {selected.size} E-Mail{selected.size !== 1 ? "s" : ""} als ZIP herunterladen
-              </DialogDescription>
-            </DialogHeader>
-            <div className="flex items-center gap-3 py-2">
-              <Switch
-                id="attachments"
-                checked={exportAttachments}
-                onCheckedChange={setExportAttachments}
-              />
-              <Label htmlFor="attachments">Anhänge einschließen</Label>
-            </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setExportOpen(false)}>
-                Abbrechen
-              </Button>
-              <Button onClick={handleExportZIP} disabled={exporting}>
-                {exporting ? "Wird exportiert..." : "ZIP herunterladen"}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-        {/* eDiscovery Export Dialog */}
-        <Dialog open={ediscoveryOpen} onOpenChange={setEdiscoveryOpen}>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>eDiscovery Export</DialogTitle>
-              <DialogDescription>
-                Exportiert alle Mails der aktuellen Suche als ZIP mit Metadaten-CSV und README.
-              </DialogDescription>
-            </DialogHeader>
-            <div className="space-y-4 py-2">
-              <div className="space-y-1.5">
-                <Label htmlFor="case-name">Case-Name (optional)</Label>
-                <input
-                  id="case-name"
-                  className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                  placeholder="z.B. Ermittlung-2026-Q1"
-                  value={ediscoveryCaseName}
-                  onChange={(e) => setEdiscoveryCaseName(e.target.value)}
-                />
-              </div>
-              <div className="rounded-md bg-muted px-3 py-2 text-sm text-muted-foreground space-y-1">
-                <div><span className="font-medium">Aktive Filter:</span></div>
-                {query && <div>Suche: <span className="font-mono">{query}</span></div>}
-                {fromFilter && <div>Von: <span className="font-mono">{fromFilter}</span></div>}
-                {toFilter && <div>An: <span className="font-mono">{toFilter}</span></div>}
-                {dateFrom && <div>Von Datum: {dateFrom}</div>}
-                {dateTo && <div>Bis Datum: {dateTo}</div>}
-                {!query && !fromFilter && !toFilter && !dateFrom && !dateTo && (
-                  <div className="italic">Keine Filter — alle archivierten Mails werden exportiert</div>
-                )}
-              </div>
-            </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setEdiscoveryOpen(false)}>
-                Abbrechen
-              </Button>
-              <Button onClick={handleEDiscoveryExport} disabled={ediscoveryLoading}>
-                {ediscoveryLoading ? "Wird exportiert..." : "ZIP herunterladen"}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+        <ExportZipDialog
+          open={exportOpen}
+          onOpenChange={setExportOpen}
+          selectedCount={selected.size}
+          exportAttachments={exportAttachments}
+          setExportAttachments={setExportAttachments}
+          exporting={exporting}
+          onExport={handleExportZIP}
+        />
 
-        {/* Upload Dialog */}
-        <Dialog open={uploadOpen} onOpenChange={(open) => { if (!open) handleUploadClose(); else setUploadOpen(true); }}>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>E-Mails importieren</DialogTitle>
-              <DialogDescription>
-                EML- oder MBOX-Dateien in das Archiv hochladen
-              </DialogDescription>
-            </DialogHeader>
+        <EDiscoveryDialog
+          open={ediscoveryOpen}
+          onOpenChange={setEdiscoveryOpen}
+          caseName={ediscoveryCaseName}
+          setCaseName={setEdiscoveryCaseName}
+          loading={ediscoveryLoading}
+          onExport={handleEDiscoveryExport}
+          query={query}
+          fromFilter={fromFilter}
+          toFilter={toFilter}
+          dateFrom={dateFrom}
+          dateTo={dateTo}
+        />
 
-            {!uploadJob && (
-              <div
-                className={`flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center transition-colors ${
-                  uploadDragging ? "border-primary bg-primary/5" : "border-muted-foreground/30"
-                }`}
-                onDragOver={(e) => { e.preventDefault(); setUploadDragging(true); }}
-                onDragLeave={() => setUploadDragging(false)}
-                onDrop={(e) => {
-                  e.preventDefault();
-                  setUploadDragging(false);
-                  if (e.dataTransfer.files.length > 0) handleUploadFiles(e.dataTransfer.files);
-                }}
-              >
-                <p className="text-sm text-muted-foreground mb-3">
-                  Dateien hierher ziehen oder auswählen
-                </p>
-                <label>
-                  <input
-                    type="file"
-                    accept=".eml,.mbox"
-                    multiple
-                    className="hidden"
-                    onChange={(e) => { if (e.target.files) handleUploadFiles(e.target.files); }}
-                  />
-                  <Button type="button" variant="outline" size="sm" asChild>
-                    <span>Dateien auswählen</span>
-                  </Button>
-                </label>
-                <p className="mt-2 text-xs text-muted-foreground">.eml · .mbox</p>
-              </div>
-            )}
-
-            {uploadError && (
-              <p className="text-sm text-destructive">{uploadError}</p>
-            )}
-
-            {uploadJob && (
-              <div className="space-y-3">
-                <Progress
-                  value={uploadJob.total > 0 ? Math.round(((uploadJob.imported + uploadJob.skipped + uploadJob.errors) / uploadJob.total) * 100) : 0}
-                />
-                <div className="grid grid-cols-3 gap-2 text-center text-sm">
-                  <div>
-                    <div className="font-semibold text-green-600">{uploadJob.imported}</div>
-                    <div className="text-xs text-muted-foreground">Importiert</div>
-                  </div>
-                  <div>
-                    <div className="font-semibold text-yellow-600">{uploadJob.skipped}</div>
-                    <div className="text-xs text-muted-foreground">Duplikate</div>
-                  </div>
-                  <div>
-                    <div className="font-semibold text-red-600">{uploadJob.errors}</div>
-                    <div className="text-xs text-muted-foreground">Fehler</div>
-                  </div>
-                </div>
-                {uploadJob.status === "running" && (
-                  <p className="text-xs text-center text-muted-foreground">
-                    Verarbeite {uploadJob.imported + uploadJob.skipped + uploadJob.errors} / {uploadJob.total} …
-                  </p>
-                )}
-                {uploadJob.status === "done" && (
-                  <p className="text-xs text-center text-green-600 font-medium">Abgeschlossen</p>
-                )}
-              </div>
-            )}
-
-            <DialogFooter>
-              <Button variant="outline" onClick={handleUploadClose} disabled={uploadLoading && uploadJob?.status === "running"}>
-                {uploadJob?.status === "done" ? "Schließen" : "Abbrechen"}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+        <UploadDialog
+          open={upload.uploadOpen}
+          onOpenChange={(open) => { if (!open) upload.handleUploadClose(); else upload.setUploadOpen(true); }}
+          dragging={upload.uploadDragging}
+          setDragging={upload.setUploadDragging}
+          job={upload.uploadJob}
+          error={upload.uploadError}
+          loading={upload.uploadLoading}
+          onUploadFiles={upload.handleUploadFiles}
+          onClose={upload.handleUploadClose}
+        />
         </>)}
       </main>
     </div>
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 4b2eb40..453dd9f 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -1,236 +1,24 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { Navbar } from "@/components/navbar";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import { Badge } from "@/components/ui/badge";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Server, Lock, Info } from "lucide-react";
-import {
-  changePassword,
-  changeEmail,
-  updatePreferences,
-  getTOTPSetup,
-  confirmTOTPSetup,
-  disableTOTP,
-  getSystemInfo,
-  type SystemInfo,
-} from "@/lib/api";
+import { usePasswordChange } from "@/hooks/usePasswordChange";
+import { useProfileSettings } from "@/hooks/useProfileSettings";
+import { useTotpSettings } from "@/hooks/useTotpSettings";
+import { useSystemInfo } from "@/hooks/useSystemInfo";
+import { PasswordSection } from "@/components/settings/PasswordSection";
+import { ProfileSection } from "@/components/settings/ProfileSection";
+import { DisplaySection } from "@/components/settings/DisplaySection";
+import { TotpSection } from "@/components/settings/TotpSection";
+import { ImapSection } from "@/components/settings/ImapSection";
 
 export default function SettingsPage() {
   const { user, loading, refresh } = useAuth();
 
-  // ── Password state ────────────────────────────────────────────────────
-  const [currentPw, setCurrentPw] = useState("");
-  const [newPw, setNewPw] = useState("");
-  const [confirmPw, setConfirmPw] = useState("");
-  const [pwError, setPwError] = useState("");
-  const [pwSuccess, setPwSuccess] = useState("");
-  const [pwLoading, setPwLoading] = useState(false);
-
-  // ── Email state ───────────────────────────────────────────────────────
-  const [email, setEmail] = useState("");
-  const [emailInitialized, setEmailInitialized] = useState(false);
-  const [emailError, setEmailError] = useState("");
-  const [emailSuccess, setEmailSuccess] = useState("");
-  const [emailLoading, setEmailLoading] = useState(false);
-
-  // ── TOTP state ────────────────────────────────────────────────────────
-  const [totpEnabled, setTotpEnabled] = useState(false);
-  const [showSetup, setShowSetup] = useState(false);
-  const [qrCode, setQrCode] = useState("");
-  const [secret, setSecret] = useState("");
-  const [totpCode, setTotpCode] = useState("");
-  const [totpError, setTotpError] = useState("");
-  const [totpSuccess, setTotpSuccess] = useState("");
-  const [totpLoading, setTotpLoading] = useState(false);
-  const [disableDialogOpen, setDisableDialogOpen] = useState(false);
-  const [disableCode, setDisableCode] = useState("");
-  const [disableError, setDisableError] = useState("");
-  const [disableLoading, setDisableLoading] = useState(false);
-
-  // ── Listenanzahl (Eintraege pro Seite) ────────────────────────────────
-  const [listPageSize, setListPageSize] = useState("25");
-  const [listPageSizeInitialized, setListPageSizeInitialized] = useState(false);
-  const [listPageSizeError, setListPageSizeError] = useState("");
-  const [listPageSizeSuccess, setListPageSizeSuccess] = useState("");
-  const [listPageSizeLoading, setListPageSizeLoading] = useState(false);
-
-  // ── System info (FQDN + IMAP-Ports) ───────────────────────────────────
-  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
-  const [systemInfoLoading, setSystemInfoLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-    setSystemInfoLoading(true);
-    getSystemInfo()
-      .then((info) => {
-        if (!cancelled) setSystemInfo(info);
-      })
-      .catch(() => {
-        if (!cancelled) setSystemInfo(null);
-      })
-      .finally(() => {
-        if (!cancelled) setSystemInfoLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  // Initialize email from user data once available
-  if (user && !emailInitialized) {
-    setEmail(user.email || "");
-    setEmailInitialized(true);
-  }
-
-  // Initialize list page size from user data once available
-  if (user && !listPageSizeInitialized) {
-    setListPageSize(String(user.list_page_size || 25));
-    setListPageSizeInitialized(true);
-  }
-
-  // ── Handlers ──────────────────────────────────────────────────────────
-
-  async function handleChangePassword(e: React.FormEvent) {
-    e.preventDefault();
-    setPwError("");
-    setPwSuccess("");
-
-    if (newPw.length < 8) {
-      setPwError("Das neue Passwort muss mindestens 8 Zeichen lang sein.");
-      return;
-    }
-    if (newPw !== confirmPw) {
-      setPwError("Die Passwoerter stimmen nicht ueberein.");
-      return;
-    }
-
-    setPwLoading(true);
-    try {
-      await changePassword(currentPw, newPw);
-      setPwSuccess("Passwort wurde erfolgreich geaendert.");
-      setCurrentPw("");
-      setNewPw("");
-      setConfirmPw("");
-    } catch (err) {
-      setPwError(err instanceof Error ? err.message : "Fehler beim Aendern des Passworts");
-    } finally {
-      setPwLoading(false);
-    }
-  }
-
-  async function handleChangeEmail(e: React.FormEvent) {
-    e.preventDefault();
-    setEmailError("");
-    setEmailSuccess("");
-
-    if (!email || !email.includes("@")) {
-      setEmailError("Bitte eine gueltige E-Mail-Adresse eingeben.");
-      return;
-    }
-
-    setEmailLoading(true);
-    try {
-      const result = await changeEmail(email);
-      setEmail(result.email);
-      setEmailSuccess("E-Mail-Adresse wurde erfolgreich geaendert.");
-    } catch (err) {
-      setEmailError(err instanceof Error ? err.message : "Fehler beim Aendern der E-Mail");
-    } finally {
-      setEmailLoading(false);
-    }
-  }
-
-  async function handleChangeListPageSize(value: string) {
-    setListPageSizeError("");
-    setListPageSizeSuccess("");
-    const parsed = Number(value);
-
-    setListPageSizeLoading(true);
-    try {
-      const result = await updatePreferences(parsed);
-      setListPageSize(String(result.list_page_size));
-      setListPageSizeSuccess("Eintraege pro Seite wurden gespeichert.");
-      await refresh();
-    } catch (err) {
-      setListPageSizeError(err instanceof Error ? err.message : "Fehler beim Speichern");
-    } finally {
-      setListPageSizeLoading(false);
-    }
-  }
-
-  async function handleSetupTOTP() {
-    setTotpError("");
-    setTotpSuccess("");
-    setTotpLoading(true);
-    try {
-      const data = await getTOTPSetup();
-      setQrCode(data.qr_code || "");
-      setSecret(data.secret);
-      setShowSetup(true);
-      setTotpCode("");
-    } catch (err) {
-      setTotpError(err instanceof Error ? err.message : "TOTP-Setup fehlgeschlagen");
-    } finally {
-      setTotpLoading(false);
-    }
-  }
-
-  async function handleConfirmTOTP(e: React.FormEvent) {
-    e.preventDefault();
-    setTotpError("");
-    setTotpLoading(true);
-    try {
-      await confirmTOTPSetup(totpCode);
-      setTotpEnabled(true);
-      setShowSetup(false);
-      setTotpSuccess("2FA wurde erfolgreich aktiviert.");
-      setQrCode("");
-      setSecret("");
-      setTotpCode("");
-    } catch (err) {
-      setTotpError(err instanceof Error ? err.message : "Ungueltiger Code");
-    } finally {
-      setTotpLoading(false);
-    }
-  }
-
-  async function handleDisableTOTP() {
-    setDisableError("");
-    setDisableLoading(true);
-    try {
-      await disableTOTP(disableCode);
-      setTotpEnabled(false);
-      setDisableDialogOpen(false);
-      setDisableCode("");
-      setTotpSuccess("2FA wurde deaktiviert.");
-    } catch (err) {
-      setDisableError(err instanceof Error ? err.message : "Ungueltiger Code");
-    } finally {
-      setDisableLoading(false);
-    }
-  }
-
-  // ── Loading / auth guard ──────────────────────────────────────────────
+  const password = usePasswordChange();
+  const profile = useProfileSettings(user, refresh);
+  const totp = useTotpSettings();
+  const { systemInfo, systemInfoLoading } = useSystemInfo();
 
   if (loading) {
     return (
@@ -253,388 +41,15 @@ export default function SettingsPage() {
           Profil &amp; Einstellungen
         </h1>
 
-        {/* ── Card 1: Passwort aendern ─────────────────────────────────── */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Passwort aendern</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleChangePassword} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="current-password">Aktuelles Passwort</Label>
-                <Input
-                  id="current-password"
-                  type="password"
-                  value={currentPw}
-                  onChange={(e) => setCurrentPw(e.target.value)}
-                  required
-                  autoComplete="current-password"
-                  aria-label="Aktuelles Passwort"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="new-password">Neues Passwort</Label>
-                <Input
-                  id="new-password"
-                  type="password"
-                  value={newPw}
-                  onChange={(e) => setNewPw(e.target.value)}
-                  required
-                  minLength={8}
-                  autoComplete="new-password"
-                  aria-label="Neues Passwort"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="confirm-password">Neues Passwort bestaetigen</Label>
-                <Input
-                  id="confirm-password"
-                  type="password"
-                  value={confirmPw}
-                  onChange={(e) => setConfirmPw(e.target.value)}
-                  required
-                  minLength={8}
-                  autoComplete="new-password"
-                  aria-label="Neues Passwort bestaetigen"
-                />
-              </div>
-              {pwError && (
-                <Alert variant="destructive">
-                  <AlertDescription>{pwError}</AlertDescription>
-                </Alert>
-              )}
-              {pwSuccess && (
-                <Alert>
-                  <AlertDescription>{pwSuccess}</AlertDescription>
-                </Alert>
-              )}
-              <Button type="submit" disabled={pwLoading}>
-                {pwLoading ? "Speichern..." : "Passwort aendern"}
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
-
-        {/* ── Card 2: E-Mail aendern ───────────────────────────────────── */}
-        <Card>
-          <CardHeader>
-            <CardTitle>E-Mail-Adresse aendern</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleChangeEmail} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="email">E-Mail-Adresse</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                  autoComplete="email"
-                  aria-label="E-Mail-Adresse"
-                />
-              </div>
-              {emailError && (
-                <Alert variant="destructive">
-                  <AlertDescription>{emailError}</AlertDescription>
-                </Alert>
-              )}
-              {emailSuccess && (
-                <Alert>
-                  <AlertDescription>{emailSuccess}</AlertDescription>
-                </Alert>
-              )}
-              <Button type="submit" disabled={emailLoading}>
-                {emailLoading ? "Speichern..." : "E-Mail aendern"}
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
-
-        {/* ── Card 2b: Listenanzahl ─────────────────────────────────────── */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Listenansicht</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="list-page-size">Eintraege pro Seite</Label>
-              <Select
-                value={listPageSize}
-                onValueChange={handleChangeListPageSize}
-                disabled={listPageSizeLoading}
-              >
-                <SelectTrigger id="list-page-size" className="w-40">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="25">25</SelectItem>
-                  <SelectItem value="50">50</SelectItem>
-                  <SelectItem value="100">100</SelectItem>
-                  <SelectItem value="200">200</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            {listPageSizeError && (
-              <Alert variant="destructive">
-                <AlertDescription>{listPageSizeError}</AlertDescription>
-              </Alert>
-            )}
-            {listPageSizeSuccess && (
-              <Alert>
-                <AlertDescription>{listPageSizeSuccess}</AlertDescription>
-              </Alert>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* ── Card 3: Zwei-Faktor-Authentifizierung ────────────────────── */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-3">
-              Zwei-Faktor-Authentifizierung (2FA)
-              {totpEnabled ? (
-                <Badge variant="default" className="bg-green-600">
-                  Aktiv
-                </Badge>
-              ) : (
-                <Badge variant="secondary">Inaktiv</Badge>
-              )}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {totpError && (
-              <Alert variant="destructive">
-                <AlertDescription>{totpError}</AlertDescription>
-              </Alert>
-            )}
-            {totpSuccess && (
-              <Alert>
-                <AlertDescription>{totpSuccess}</AlertDescription>
-              </Alert>
-            )}
-
-            {!totpEnabled && !showSetup && (
-              <div>
-                <p className="text-sm text-muted-foreground mb-4">
-                  Schuetzen Sie Ihr Konto mit einem Einmalpasswort (TOTP).
-                  Kompatibel mit Google Authenticator, Authy und anderen
-                  TOTP-Apps.
-                </p>
-                <Button onClick={handleSetupTOTP} disabled={totpLoading}>
-                  {totpLoading ? "Laden..." : "2FA einrichten"}
-                </Button>
-              </div>
-            )}
-
-            {showSetup && (
-              <div className="space-y-4">
-                <p className="text-sm text-muted-foreground">
-                  Scannen Sie den QR-Code mit Ihrer Authenticator-App und geben
-                  Sie den angezeigten Code ein.
-                </p>
-                {qrCode && (
-                  <div className="flex justify-center p-4 bg-white rounded-lg border w-fit mx-auto">
-                    <img
-                      src={`data:image/png;base64,${qrCode}`}
-                      alt="TOTP QR-Code"
-                      width={200}
-                      height={200}
-                    />
-                  </div>
-                )}
-                {secret && (
-                  <div className="space-y-1">
-                    <Label className="text-xs text-muted-foreground">
-                      Manueller Schluessel
-                    </Label>
-                    <code className="block text-sm font-mono bg-muted px-3 py-2 rounded break-all select-all">
-                      {secret}
-                    </code>
-                  </div>
-                )}
-                <form onSubmit={handleConfirmTOTP} className="space-y-3">
-                  <div className="space-y-2">
-                    <Label htmlFor="totp-code">Bestaetigungscode</Label>
-                    <Input
-                      id="totp-code"
-                      type="text"
-                      inputMode="numeric"
-                      pattern="[0-9]{6}"
-                      maxLength={6}
-                      placeholder="000000"
-                      value={totpCode}
-                      onChange={(e) => setTotpCode(e.target.value)}
-                      required
-                      autoComplete="one-time-code"
-                      aria-label="TOTP Bestaetigungscode"
-                    />
-                  </div>
-                  <div className="flex gap-2">
-                    <Button type="submit" disabled={totpLoading}>
-                      {totpLoading ? "Pruefen..." : "Bestaetigen"}
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={() => {
-                        setShowSetup(false);
-                        setQrCode("");
-                        setSecret("");
-                        setTotpCode("");
-                        setTotpError("");
-                      }}
-                    >
-                      Abbrechen
-                    </Button>
-                  </div>
-                </form>
-              </div>
-            )}
-
-            {totpEnabled && (
-              <div>
-                <p className="text-sm text-muted-foreground mb-4">
-                  2FA ist aktiv. Zum Deaktivieren benoetigen Sie einen
-                  aktuellen Code aus Ihrer Authenticator-App.
-                </p>
-                <Button
-                  variant="destructive"
-                  onClick={() => {
-                    setDisableDialogOpen(true);
-                    setDisableCode("");
-                    setDisableError("");
-                  }}
-                >
-                  2FA deaktivieren
-                </Button>
-              </div>
-            )}
-
-            {/* Disable TOTP dialog */}
-            <Dialog open={disableDialogOpen} onOpenChange={setDisableDialogOpen}>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>2FA deaktivieren</DialogTitle>
-                </DialogHeader>
-                <div className="space-y-4">
-                  <p className="text-sm text-muted-foreground">
-                    Geben Sie einen aktuellen Code aus Ihrer Authenticator-App
-                    ein, um 2FA zu deaktivieren.
-                  </p>
-                  <div className="space-y-2">
-                    <Label htmlFor="disable-totp-code">TOTP-Code</Label>
-                    <Input
-                      id="disable-totp-code"
-                      type="text"
-                      inputMode="numeric"
-                      pattern="[0-9]{6}"
-                      maxLength={6}
-                      placeholder="000000"
-                      value={disableCode}
-                      onChange={(e) => setDisableCode(e.target.value)}
-                      autoComplete="one-time-code"
-                      aria-label="TOTP-Code zum Deaktivieren"
-                    />
-                  </div>
-                  {disableError && (
-                    <Alert variant="destructive">
-                      <AlertDescription>{disableError}</AlertDescription>
-                    </Alert>
-                  )}
-                </div>
-                <DialogFooter>
-                  <Button
-                    variant="outline"
-                    onClick={() => setDisableDialogOpen(false)}
-                  >
-                    Abbrechen
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    onClick={handleDisableTOTP}
-                    disabled={disableLoading || disableCode.length !== 6}
-                  >
-                    {disableLoading ? "Pruefen..." : "Deaktivieren"}
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-          </CardContent>
-        </Card>
-        {/* ── Card 4: IMAP-Zugang ──────────────────────────────────────── */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-3">
-              <Server className="h-5 w-5" aria-hidden="true" />
-              IMAP-Zugang
-              <Badge variant="default" className="bg-green-600">
-                Verfuegbar
-              </Badge>
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <p className="text-sm text-muted-foreground">
-              Verbinden Sie Ihren Mail-Client (Thunderbird, Outlook, Apple Mail)
-              mit folgenden Zugangsdaten:
-            </p>
-
-            <div
-              className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm"
-              role="list"
-              aria-label="IMAP-Verbindungsdaten"
-            >
-              <span className="text-muted-foreground flex items-center gap-1.5">
-                <Server className="h-3.5 w-3.5" aria-hidden="true" />
-                Server
-              </span>
-              <span className="font-mono">
-                {systemInfoLoading
-                  ? "Laden..."
-                  : systemInfo?.fqdn ||
-                    (typeof window !== "undefined"
-                      ? window.location.hostname
-                      : "")}
-              </span>
-
-              <span className="text-muted-foreground flex items-center gap-1.5">
-                <Lock className="h-3.5 w-3.5" aria-hidden="true" />
-                IMAP-Port
-              </span>
-              <span className="font-mono">
-                {systemInfo?.imap_port ?? 9993} (SSL/TLS)
-              </span>
-
-              <span className="text-muted-foreground flex items-center gap-1.5">
-                <Lock className="h-3.5 w-3.5" aria-hidden="true" />
-                Alternativ-Port
-              </span>
-              <span className="font-mono">
-                {systemInfo?.imap_port_alt ?? 993} (SSL/TLS)
-              </span>
-
-              <span className="text-muted-foreground flex items-center gap-1.5">
-                <Lock className="h-3.5 w-3.5" aria-hidden="true" />
-                Sicherheit
-              </span>
-              <span className="font-mono">SSL/TLS</span>
-
-              <span className="text-muted-foreground">Benutzername</span>
-              <span className="font-mono">{user.username}</span>
-
-              <span className="text-muted-foreground">Passwort</span>
-              <span className="text-sm italic">Ihr archivmail-Passwort</span>
-            </div>
-
-            <div className="flex items-start gap-2 rounded-md border border-yellow-300 bg-yellow-50 px-3 py-2 text-sm text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-200">
-              <Info className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
-              <span>
-                Der IMAP-Zugang ist schreibgeschuetzt. Loeschen, Verschieben und
-                neue Mails einlegen sind nicht moeglich.
-              </span>
-            </div>
-          </CardContent>
-        </Card>
+        <PasswordSection {...password} />
+        <ProfileSection {...profile} />
+        <DisplaySection {...profile} />
+        <TotpSection {...totp} />
+        <ImapSection
+          systemInfo={systemInfo}
+          systemInfoLoading={systemInfoLoading}
+          username={user.username}
+        />
       </main>
     </div>
   );
diff --git a/src/components/imap/ImapAccountCard.tsx b/src/components/imap/ImapAccountCard.tsx
new file mode 100644
index 0000000..c4b5fc2
--- /dev/null
+++ b/src/components/imap/ImapAccountCard.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { type ImapAccount } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+
+function statusBadge(status: string) {
+  switch (status) {
+    case "running":
+      return <Badge className="bg-blue-600 text-white">Importiert...</Badge>;
+    case "error":
+      return <Badge variant="destructive">Fehler</Badge>;
+    default:
+      return <Badge variant="secondary">Bereit</Badge>;
+  }
+}
+
+function syncBadge(acc: ImapAccount) {
+  if (acc.sync_running) {
+    return <Badge className="bg-blue-500 text-white">Sync laeuft...</Badge>;
+  }
+  if (!acc.sync_status) return null;
+  if (acc.sync_status === "ok") {
+    return <Badge className="bg-green-600 text-white">Sync OK</Badge>;
+  }
+  if (acc.sync_status === "error") {
+    return <Badge variant="destructive">Sync Fehler</Badge>;
+  }
+  return null;
+}
+
+interface ImapAccountCardProps {
+  acc: ImapAccount;
+  onStartImport: (id: number) => void;
+  onSyncNow: (id: number) => void;
+  onEdit: (acc: ImapAccount) => void;
+  onDelete: (id: number) => void;
+  onIntervalChange: (id: number, value: string) => void;
+}
+
+export function ImapAccountCard({
+  acc,
+  onStartImport,
+  onSyncNow,
+  onEdit,
+  onDelete,
+  onIntervalChange,
+}: ImapAccountCardProps) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <div>
+          <h3 className="font-semibold">{acc.name}</h3>
+          <p className="text-sm text-muted-foreground">
+            {acc.host}:{acc.port} ({acc.tls.toUpperCase()}) &middot; {acc.username}
+          </p>
+        </div>
+        {statusBadge(acc.status)}
+      </CardHeader>
+      <CardContent>
+        {acc.status === "running" && acc.progress_total === 0 && (
+          <div className="mb-3 space-y-1">
+            <Progress value={undefined} className="animate-pulse" />
+            <p className="text-xs text-muted-foreground">
+              Zaehle E-Mails auf dem Server...
+            </p>
+          </div>
+        )}
+        {acc.status === "running" && acc.progress_total > 0 && (
+          <div className="mb-3 space-y-1">
+            <Progress
+              value={(acc.progress_current / acc.progress_total) * 100}
+            />
+            <p className="text-xs text-muted-foreground">
+              {acc.progress_current} von {acc.progress_total} E-Mails
+            </p>
+          </div>
+        )}
+
+        {acc.status === "error" && acc.error_msg && (
+          <p className="mb-3 text-sm text-destructive">{acc.error_msg}</p>
+        )}
+
+        {acc.last_import_at && (
+          <p className="text-sm text-muted-foreground mb-3">
+            Letzter Import:{" "}
+            {new Date(acc.last_import_at).toLocaleString("de-DE")} (
+            {acc.last_import_count} E-Mails)
+          </p>
+        )}
+
+        {/* PROJ-8: Sync status */}
+        {acc.last_sync_at && (
+          <div className="flex items-center gap-2 mb-3">
+            <p className="text-sm text-muted-foreground">
+              Letzter Sync:{" "}
+              {new Date(acc.last_sync_at).toLocaleString("de-DE")} (
+              {acc.last_sync_count} neu)
+            </p>
+            {syncBadge(acc)}
+          </div>
+        )}
+
+        {acc.sync_running && !acc.last_sync_at && syncBadge(acc)}
+
+        {acc.sync_error_msg && acc.sync_status === "error" && (
+          <p className="mb-3 text-sm text-destructive">
+            Sync-Fehler: {acc.sync_error_msg}
+          </p>
+        )}
+
+        {acc.excluded_folders && acc.excluded_folders.length > 0 && (
+          <p className="text-xs text-muted-foreground mb-3">
+            Ausgeschlossene Ordner: {acc.excluded_folders.join(", ")}
+          </p>
+        )}
+
+        {/* PROJ-8: Sync interval selector */}
+        <div className="mb-3 flex items-center gap-3">
+          <span className="text-sm text-muted-foreground whitespace-nowrap">
+            Auto-Sync:
+          </span>
+          <Select
+            value={String(acc.sync_interval_min ?? 0)}
+            onValueChange={(v) => onIntervalChange(acc.id, v)}
+          >
+            <SelectTrigger className="w-40 h-8 text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="0">Deaktiviert</SelectItem>
+              <SelectItem value="5">5 min</SelectItem>
+              <SelectItem value="15">15 min</SelectItem>
+              <SelectItem value="30">30 min</SelectItem>
+              <SelectItem value="60">1 Stunde</SelectItem>
+              <SelectItem value="360">6 Stunden</SelectItem>
+              <SelectItem value="1440">24 Stunden</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex gap-2 flex-wrap">
+          <Button
+            size="sm"
+            disabled={acc.status === "running"}
+            onClick={() => onStartImport(acc.id)}
+          >
+            Import starten
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={acc.status === "running" || acc.sync_running}
+            onClick={() => onSyncNow(acc.id)}
+          >
+            Sync jetzt
+          </Button>
+          <Button size="sm" variant="outline" onClick={() => onEdit(acc)}>
+            Bearbeiten
+          </Button>
+          <Button
+            size="sm"
+            variant="destructive"
+            disabled={acc.status === "running"}
+            onClick={() => onDelete(acc.id)}
+          >
+            Loeschen
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/imap/ImapAccountDialog.tsx b/src/components/imap/ImapAccountDialog.tsx
new file mode 100644
index 0000000..58506f2
--- /dev/null
+++ b/src/components/imap/ImapAccountDialog.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import { type ImapFolder } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Separator } from "@/components/ui/separator";
+
+interface ImapAccountDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  formName: string;
+  setFormName: (v: string) => void;
+  formHost: string;
+  setFormHost: (v: string) => void;
+  formPort: string;
+  setFormPort: (v: string) => void;
+  formTls: string;
+  setFormTls: (v: string) => void;
+  formUsername: string;
+  setFormUsername: (v: string) => void;
+  formPassword: string;
+  setFormPassword: (v: string) => void;
+  testing: boolean;
+  testError: string;
+  testFolders: ImapFolder[] | null;
+  excludedFolders: Set<string>;
+  saving: boolean;
+  onTest: () => void;
+  onSave: () => void;
+  onCancel: () => void;
+  onToggleExcluded: (name: string) => void;
+}
+
+export function ImapAccountDialog({
+  open,
+  onOpenChange,
+  formName,
+  setFormName,
+  formHost,
+  setFormHost,
+  formPort,
+  setFormPort,
+  formTls,
+  setFormTls,
+  formUsername,
+  setFormUsername,
+  formPassword,
+  setFormPassword,
+  testing,
+  testError,
+  testFolders,
+  excludedFolders,
+  saving,
+  onTest,
+  onSave,
+  onCancel,
+  onToggleExcluded,
+}: ImapAccountDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>IMAP-Konto hinzufuegen</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <Label htmlFor="imap-name">Name</Label>
+            <Input
+              id="imap-name"
+              placeholder="z.B. Firmen-Mail"
+              value={formName}
+              onChange={(e) => setFormName(e.target.value)}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <Label htmlFor="imap-host">Host</Label>
+              <Input
+                id="imap-host"
+                placeholder="imap.example.com"
+                value={formHost}
+                onChange={(e) => setFormHost(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="imap-port">Port</Label>
+              <Input
+                id="imap-port"
+                type="number"
+                value={formPort}
+                onChange={(e) => setFormPort(e.target.value)}
+              />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Label>Verschluesselung</Label>
+            <Select value={formTls} onValueChange={setFormTls}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="ssl">SSL/TLS</SelectItem>
+                <SelectItem value="starttls">STARTTLS</SelectItem>
+                <SelectItem value="none">Unverschluesselt</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="imap-user">Benutzername</Label>
+            <Input
+              id="imap-user"
+              placeholder="user@example.com"
+              value={formUsername}
+              onChange={(e) => setFormUsername(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="imap-pass">Passwort</Label>
+            <Input
+              id="imap-pass"
+              type="password"
+              value={formPassword}
+              onChange={(e) => setFormPassword(e.target.value)}
+            />
+          </div>
+
+          <Button
+            variant="outline"
+            onClick={onTest}
+            disabled={testing || !formHost || !formUsername || !formPassword}
+            className="w-full"
+          >
+            {testing ? "Teste Verbindung..." : "Verbindung testen"}
+          </Button>
+
+          {testError && <p className="text-sm text-destructive">{testError}</p>}
+
+          {testFolders && (
+            <>
+              <Separator />
+              <div>
+                <h4 className="text-sm font-medium mb-2">Erkannte Ordner</h4>
+                <div className="space-y-2 max-h-48 overflow-y-auto">
+                  {testFolders.map((folder) => (
+                    <div key={folder.name} className="flex items-center gap-2">
+                      <Checkbox
+                        id={`folder-${folder.name}`}
+                        checked={!excludedFolders.has(folder.name)}
+                        onCheckedChange={() => onToggleExcluded(folder.name)}
+                      />
+                      <Label
+                        htmlFor={`folder-${folder.name}`}
+                        className="text-sm flex-1 cursor-pointer"
+                      >
+                        {folder.name}
+                      </Label>
+                      {folder.excluded && folder.reason && (
+                        <span className="text-xs text-muted-foreground">
+                          ({folder.reason === "special_use"
+                            ? "IMAP-Flag"
+                            : "Namens-Erkennung"})
+                        </span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+                <p className="text-xs text-muted-foreground mt-2">
+                  Deaktivierte Ordner werden nicht importiert.
+                </p>
+              </div>
+            </>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Abbrechen
+          </Button>
+          <Button
+            onClick={onSave}
+            disabled={
+              saving || !formName || !formHost || !formUsername || !formPassword
+            }
+          >
+            {saving ? "Speichert..." : "Speichern"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/imap/ImapDeleteDialog.tsx b/src/components/imap/ImapDeleteDialog.tsx
new file mode 100644
index 0000000..cd98410
--- /dev/null
+++ b/src/components/imap/ImapDeleteDialog.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+
+interface ImapDeleteDialogProps {
+  deleteConfirm: number | null;
+  onCancel: () => void;
+  onConfirm: (id: number) => void;
+}
+
+export function ImapDeleteDialog({
+  deleteConfirm,
+  onCancel,
+  onConfirm,
+}: ImapDeleteDialogProps) {
+  return (
+    <Dialog open={deleteConfirm !== null} onOpenChange={onCancel}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Konto loeschen?</DialogTitle>
+        </DialogHeader>
+        <p className="text-sm text-muted-foreground">
+          Soll dieses IMAP-Konto wirklich entfernt werden? Bereits importierte
+          E-Mails bleiben im Archiv erhalten.
+        </p>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Abbrechen
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => deleteConfirm !== null && onConfirm(deleteConfirm)}
+          >
+            Loeschen
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/imap/ImapEditDialog.tsx b/src/components/imap/ImapEditDialog.tsx
new file mode 100644
index 0000000..1a48d3d
--- /dev/null
+++ b/src/components/imap/ImapEditDialog.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { type ImapAccount } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface ImapEditDialogProps {
+  editAccount: ImapAccount | null;
+  onClose: () => void;
+  editName: string;
+  setEditName: (v: string) => void;
+  editHost: string;
+  setEditHost: (v: string) => void;
+  editPort: string;
+  setEditPort: (v: string) => void;
+  editTls: string;
+  setEditTls: (v: string) => void;
+  editUsername: string;
+  setEditUsername: (v: string) => void;
+  editPassword: string;
+  setEditPassword: (v: string) => void;
+  editSaving: boolean;
+  editError: string;
+  onSave: () => void;
+}
+
+export function ImapEditDialog({
+  editAccount,
+  onClose,
+  editName,
+  setEditName,
+  editHost,
+  setEditHost,
+  editPort,
+  setEditPort,
+  editTls,
+  setEditTls,
+  editUsername,
+  setEditUsername,
+  editPassword,
+  setEditPassword,
+  editSaving,
+  editError,
+  onSave,
+}: ImapEditDialogProps) {
+  return (
+    <Dialog
+      open={editAccount !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>IMAP-Konto bearbeiten</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <Label>Name</Label>
+            <Input
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+              placeholder="z.B. Firmen-Mail"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <Label>Host</Label>
+              <Input
+                value={editHost}
+                onChange={(e) => setEditHost(e.target.value)}
+                placeholder="imap.example.com"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label>Port</Label>
+              <Input
+                value={editPort}
+                onChange={(e) => setEditPort(e.target.value)}
+                type="number"
+              />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Label>TLS</Label>
+            <Select value={editTls} onValueChange={setEditTls}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="ssl">SSL/TLS</SelectItem>
+                <SelectItem value="starttls">STARTTLS</SelectItem>
+                <SelectItem value="none">Keine</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1">
+            <Label>Benutzername</Label>
+            <Input
+              value={editUsername}
+              onChange={(e) => setEditUsername(e.target.value)}
+              placeholder="user@example.com"
+            />
+          </div>
+          <div className="space-y-1">
+            <Label>
+              Passwort{" "}
+              <span className="text-muted-foreground text-xs">
+                (leer lassen = unveraendert)
+              </span>
+            </Label>
+            <Input
+              value={editPassword}
+              onChange={(e) => setEditPassword(e.target.value)}
+              type="password"
+              placeholder="Neues Passwort eingeben"
+            />
+          </div>
+          {editError && <p className="text-sm text-destructive">{editError}</p>}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Abbrechen
+          </Button>
+          <Button onClick={onSave} disabled={editSaving}>
+            {editSaving ? "Speichert..." : "Speichern"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/search/ExportDialogs.tsx b/src/components/search/ExportDialogs.tsx
new file mode 100644
index 0000000..4df276c
--- /dev/null
+++ b/src/components/search/ExportDialogs.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import { type UploadJob } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+interface ExportZipDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedCount: number;
+  exportAttachments: boolean;
+  setExportAttachments: (v: boolean) => void;
+  exporting: boolean;
+  onExport: () => void;
+}
+
+export function ExportZipDialog({
+  open,
+  onOpenChange,
+  selectedCount,
+  exportAttachments,
+  setExportAttachments,
+  exporting,
+  onExport,
+}: ExportZipDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>E-Mails exportieren</DialogTitle>
+          <DialogDescription>
+            {selectedCount} E-Mail{selectedCount !== 1 ? "s" : ""} als ZIP herunterladen
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center gap-3 py-2">
+          <Switch
+            id="attachments"
+            checked={exportAttachments}
+            onCheckedChange={setExportAttachments}
+          />
+          <Label htmlFor="attachments">Anhänge einschließen</Label>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Abbrechen
+          </Button>
+          <Button onClick={onExport} disabled={exporting}>
+            {exporting ? "Wird exportiert..." : "ZIP herunterladen"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface EDiscoveryDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  caseName: string;
+  setCaseName: (v: string) => void;
+  loading: boolean;
+  onExport: () => void;
+  query: string;
+  fromFilter: string;
+  toFilter: string;
+  dateFrom: string;
+  dateTo: string;
+}
+
+export function EDiscoveryDialog({
+  open,
+  onOpenChange,
+  caseName,
+  setCaseName,
+  loading,
+  onExport,
+  query,
+  fromFilter,
+  toFilter,
+  dateFrom,
+  dateTo,
+}: EDiscoveryDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>eDiscovery Export</DialogTitle>
+          <DialogDescription>
+            Exportiert alle Mails der aktuellen Suche als ZIP mit Metadaten-CSV und README.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="space-y-1.5">
+            <Label htmlFor="case-name">Case-Name (optional)</Label>
+            <input
+              id="case-name"
+              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              placeholder="z.B. Ermittlung-2026-Q1"
+              value={caseName}
+              onChange={(e) => setCaseName(e.target.value)}
+            />
+          </div>
+          <div className="rounded-md bg-muted px-3 py-2 text-sm text-muted-foreground space-y-1">
+            <div><span className="font-medium">Aktive Filter:</span></div>
+            {query && <div>Suche: <span className="font-mono">{query}</span></div>}
+            {fromFilter && <div>Von: <span className="font-mono">{fromFilter}</span></div>}
+            {toFilter && <div>An: <span className="font-mono">{toFilter}</span></div>}
+            {dateFrom && <div>Von Datum: {dateFrom}</div>}
+            {dateTo && <div>Bis Datum: {dateTo}</div>}
+            {!query && !fromFilter && !toFilter && !dateFrom && !dateTo && (
+              <div className="italic">Keine Filter — alle archivierten Mails werden exportiert</div>
+            )}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Abbrechen
+          </Button>
+          <Button onClick={onExport} disabled={loading}>
+            {loading ? "Wird exportiert..." : "ZIP herunterladen"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface UploadDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dragging: boolean;
+  setDragging: (v: boolean) => void;
+  job: UploadJob | null;
+  error: string;
+  loading: boolean;
+  onUploadFiles: (files: FileList | File[]) => void;
+  onClose: () => void;
+}
+
+export function UploadDialog({
+  open,
+  onOpenChange,
+  dragging,
+  setDragging,
+  job,
+  error,
+  loading,
+  onUploadFiles,
+  onClose,
+}: UploadDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>E-Mails importieren</DialogTitle>
+          <DialogDescription>
+            EML- oder MBOX-Dateien in das Archiv hochladen
+          </DialogDescription>
+        </DialogHeader>
+
+        {!job && (
+          <div
+            className={`flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center transition-colors ${
+              dragging ? "border-primary bg-primary/5" : "border-muted-foreground/30"
+            }`}
+            onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={(e) => {
+              e.preventDefault();
+              setDragging(false);
+              if (e.dataTransfer.files.length > 0) onUploadFiles(e.dataTransfer.files);
+            }}
+          >
+            <p className="text-sm text-muted-foreground mb-3">
+              Dateien hierher ziehen oder auswählen
+            </p>
+            <label>
+              <input
+                type="file"
+                accept=".eml,.mbox"
+                multiple
+                className="hidden"
+                onChange={(e) => { if (e.target.files) onUploadFiles(e.target.files); }}
+              />
+              <Button type="button" variant="outline" size="sm" asChild>
+                <span>Dateien auswählen</span>
+              </Button>
+            </label>
+            <p className="mt-2 text-xs text-muted-foreground">.eml · .mbox</p>
+          </div>
+        )}
+
+        {error && (
+          <p className="text-sm text-destructive">{error}</p>
+        )}
+
+        {job && (
+          <div className="space-y-3">
+            <Progress
+              value={job.total > 0 ? Math.round(((job.imported + job.skipped + job.errors) / job.total) * 100) : 0}
+            />
+            <div className="grid grid-cols-3 gap-2 text-center text-sm">
+              <div>
+                <div className="font-semibold text-green-600">{job.imported}</div>
+                <div className="text-xs text-muted-foreground">Importiert</div>
+              </div>
+              <div>
+                <div className="font-semibold text-yellow-600">{job.skipped}</div>
+                <div className="text-xs text-muted-foreground">Duplikate</div>
+              </div>
+              <div>
+                <div className="font-semibold text-red-600">{job.errors}</div>
+                <div className="text-xs text-muted-foreground">Fehler</div>
+              </div>
+            </div>
+            {job.status === "running" && (
+              <p className="text-xs text-center text-muted-foreground">
+                Verarbeite {job.imported + job.skipped + job.errors} / {job.total} …
+              </p>
+            )}
+            {job.status === "done" && (
+              <p className="text-xs text-center text-green-600 font-medium">Abgeschlossen</p>
+            )}
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={loading && job?.status === "running"}>
+            {job?.status === "done" ? "Schließen" : "Abbrechen"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/search/SearchFilterBar.tsx b/src/components/search/SearchFilterBar.tsx
new file mode 100644
index 0000000..ebb59b3
--- /dev/null
+++ b/src/components/search/SearchFilterBar.tsx
@@ -0,0 +1,270 @@
+"use client";
+
+import { type SavedSearch } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Bookmark, BookmarkPlus, Trash2 } from "lucide-react";
+
+interface SearchFilterBarProps {
+  query: string;
+  setQuery: (v: string) => void;
+  fromFilter: string;
+  setFromFilter: (v: string) => void;
+  toFilter: string;
+  setToFilter: (v: string) => void;
+  dateFrom: string;
+  setDateFrom: (v: string) => void;
+  dateTo: string;
+  setDateTo: (v: string) => void;
+  sort: string;
+  setSort: (v: string) => void;
+  hasAttachment: boolean | undefined;
+  setHasAttachment: (v: boolean | undefined) => void;
+  searching: boolean;
+  onSubmit: (e: React.FormEvent) => void;
+  onOpenUpload: () => void;
+  // Saved searches
+  hasActiveSearch: boolean;
+  savePopoverOpen: boolean;
+  setSavePopoverOpen: (v: boolean) => void;
+  saveName: string;
+  setSaveName: (v: string) => void;
+  saving: boolean;
+  onSaveSearch: () => void;
+  savedListOpen: boolean;
+  setSavedListOpen: (v: boolean) => void;
+  savedLoading: boolean;
+  savedSearches: SavedSearch[];
+  onApplySavedSearch: (s: SavedSearch) => void;
+  onDeleteSavedSearch: (id: number) => void;
+}
+
+export function SearchFilterBar(props: SearchFilterBarProps) {
+  const {
+    query,
+    setQuery,
+    fromFilter,
+    setFromFilter,
+    toFilter,
+    setToFilter,
+    dateFrom,
+    setDateFrom,
+    dateTo,
+    setDateTo,
+    sort,
+    setSort,
+    hasAttachment,
+    setHasAttachment,
+    searching,
+    onSubmit,
+    onOpenUpload,
+    hasActiveSearch,
+    savePopoverOpen,
+    setSavePopoverOpen,
+    saveName,
+    setSaveName,
+    saving,
+    onSaveSearch,
+    savedListOpen,
+    setSavedListOpen,
+    savedLoading,
+    savedSearches,
+    onApplySavedSearch,
+    onDeleteSavedSearch,
+  } = props;
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <Input
+          placeholder="Volltextsuche..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="w-full flex-1 sm:w-auto"
+          aria-label="Suchbegriff"
+        />
+        <Button type="submit" disabled={searching} className="flex-1 sm:flex-none">
+          {searching ? "Suche..." : "Suchen"}
+        </Button>
+        <Button type="button" variant="outline" onClick={onOpenUpload} className="flex-1 sm:flex-none">
+          Importieren
+        </Button>
+        {hasActiveSearch && (
+          <Popover open={savePopoverOpen} onOpenChange={setSavePopoverOpen}>
+            <PopoverTrigger asChild>
+              <Button type="button" variant="outline" size="icon" title="Suche speichern" aria-label="Suche speichern">
+                <BookmarkPlus className="h-4 w-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-72" align="end">
+              <div className="space-y-3">
+                <p className="text-sm font-medium">Suche speichern</p>
+                <Input
+                  placeholder="Name der Suche..."
+                  value={saveName}
+                  onChange={(e) => setSaveName(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") onSaveSearch(); }}
+                  aria-label="Name der gespeicherten Suche"
+                  autoFocus
+                />
+                <div className="flex justify-end gap-2">
+                  <Button size="sm" variant="outline" onClick={() => setSavePopoverOpen(false)}>
+                    Abbrechen
+                  </Button>
+                  <Button size="sm" onClick={onSaveSearch} disabled={saving || !saveName.trim()}>
+                    {saving ? "Speichern..." : "Speichern"}
+                  </Button>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
+        <Popover open={savedListOpen} onOpenChange={setSavedListOpen}>
+          <PopoverTrigger asChild>
+            <Button type="button" variant="outline" size="icon" title="Gespeicherte Suchen" aria-label="Gespeicherte Suchen">
+              <Bookmark className="h-4 w-4" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80" align="end">
+            <p className="text-sm font-medium mb-3">Gespeicherte Suchen</p>
+            {savedLoading ? (
+              <div className="space-y-2">
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+              </div>
+            ) : savedSearches.length === 0 ? (
+              <p className="text-sm text-muted-foreground py-4 text-center">
+                Keine gespeicherten Suchen vorhanden.
+              </p>
+            ) : (
+              <div className="space-y-1 max-h-64 overflow-y-auto">
+                {savedSearches.map((s) => (
+                  <div
+                    key={s.id}
+                    className="flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted group"
+                  >
+                    <button
+                      type="button"
+                      className="flex-1 text-left text-sm truncate"
+                      onClick={() => onApplySavedSearch(s)}
+                      title={Object.entries(s.query).map(([k, v]) => `${k}: ${v}`).join(", ")}
+                    >
+                      {s.name}
+                    </button>
+                    <span className="text-xs text-muted-foreground whitespace-nowrap hidden group-hover:inline">
+                      {new Date(s.created_at).toLocaleDateString("de-DE")}
+                    </span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
+                      onClick={(e) => { e.stopPropagation(); onDeleteSavedSearch(s.id); }}
+                      aria-label={`Suche "${s.name}" loeschen`}
+                    >
+                      <Trash2 className="h-3.5 w-3.5 text-destructive" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <div className="space-y-1">
+          <Label htmlFor="from-filter" className="text-xs">
+            Von (Absender)
+          </Label>
+          <Input
+            id="from-filter"
+            placeholder="absender@example.com"
+            value={fromFilter}
+            onChange={(e) => setFromFilter(e.target.value)}
+            aria-label="Absender filtern"
+          />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="to-filter" className="text-xs">
+            An (Empfänger)
+          </Label>
+          <Input
+            id="to-filter"
+            placeholder="empfaenger@example.com"
+            value={toFilter}
+            onChange={(e) => setToFilter(e.target.value)}
+            aria-label="Empfänger filtern"
+          />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="date-from" className="text-xs">
+            Datum von
+          </Label>
+          <Input
+            id="date-from"
+            type="date"
+            value={dateFrom}
+            onChange={(e) => setDateFrom(e.target.value)}
+            aria-label="Datum von"
+          />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="date-to" className="text-xs">
+            Datum bis
+          </Label>
+          <Input
+            id="date-to"
+            type="date"
+            value={dateTo}
+            onChange={(e) => setDateTo(e.target.value)}
+            aria-label="Datum bis"
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Label htmlFor="sort-select" className="text-xs whitespace-nowrap">Sortierung</Label>
+          <Select value={sort} onValueChange={setSort}>
+            <SelectTrigger id="sort-select" className="h-8 w-40 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="date_desc">Datum (neu → alt)</SelectItem>
+              <SelectItem value="date_asc">Datum (alt → neu)</SelectItem>
+              <SelectItem value="relevance">Relevanz</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center gap-2">
+          <Switch
+            id="attach-toggle"
+            checked={hasAttachment === true}
+            onCheckedChange={(checked) =>
+              setHasAttachment(checked ? true : undefined)
+            }
+          />
+          <Label htmlFor="attach-toggle" className="text-xs cursor-pointer">
+            Nur mit Anhang
+          </Label>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/search/SearchResultsTable.tsx b/src/components/search/SearchResultsTable.tsx
new file mode 100644
index 0000000..30ac95f
--- /dev/null
+++ b/src/components/search/SearchResultsTable.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { type SearchHit, type SearchMatchField } from "@/lib/api";
+import { sanitizeSnippet } from "@/lib/sanitize";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+const MATCH_FIELD_LABEL: Record<SearchMatchField, string> = {
+  subject: "📨 Subject",
+  body: "✉️ Body",
+  attachment_text: "📄 PDF-Anhang",
+  attachment_names: "📎 Dateiname",
+  from_addr: "👤 Absender",
+  to_addr: "📧 Empfänger",
+};
+
+function MatchSourceBadge({ field }: { field: SearchMatchField }) {
+  return (
+    <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground whitespace-nowrap">
+      {MATCH_FIELD_LABEL[field]}
+    </span>
+  );
+}
+
+function SnippetLine({ hit }: { hit: SearchHit }) {
+  if (!hit.snippet) return null;
+  return (
+    <div className="mt-1 flex items-start gap-2 text-xs text-muted-foreground font-normal">
+      {hit.match_field && <MatchSourceBadge field={hit.match_field} />}
+      <span
+        className="min-w-0 flex-1 truncate [&_b]:font-semibold [&_b]:text-foreground"
+        dangerouslySetInnerHTML={{ __html: sanitizeSnippet(hit.snippet) }}
+      />
+    </div>
+  );
+}
+
+interface SearchResultsTableProps {
+  results: SearchHit[];
+  selected: Set<string>;
+  setSelected: React.Dispatch<React.SetStateAction<Set<string>>>;
+  total: number;
+  page: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export function SearchResultsTable({
+  results,
+  selected,
+  setSelected,
+  page,
+  totalPages,
+  onPageChange,
+}: SearchResultsTableProps) {
+  const router = useRouter();
+  const allSelected = results.length > 0 && results.every((h) => selected.has(h.id));
+
+  return (
+    <>
+      <Card className="overflow-x-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-10">
+                <Checkbox
+                  checked={allSelected}
+                  onCheckedChange={(checked) => {
+                    if (checked) setSelected(new Set(results.map((h) => h.id)));
+                    else setSelected(new Set());
+                  }}
+                  aria-label="Alle auswählen"
+                />
+              </TableHead>
+              <TableHead className="w-28 sm:w-32">Datum</TableHead>
+              <TableHead className="hidden w-56 md:table-cell">Von</TableHead>
+              <TableHead>Betreff</TableHead>
+              <TableHead className="hidden w-48 lg:table-cell">An</TableHead>
+              <TableHead className="w-8 text-center" title="Anhang">📎</TableHead>
+              <TableHead className="hidden w-20 text-right sm:table-cell">Größe</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {results.map((hit) => (
+              <TableRow
+                key={hit.id}
+                className="cursor-pointer hover:bg-muted/50"
+                onClick={() => router.push(`/mail/${hit.id}`)}
+                role="link"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") router.push(`/mail/${hit.id}`);
+                }}
+                aria-label={`E-Mail von ${hit.from || "unbekannt"}: ${hit.subject || "Kein Betreff"}`}
+              >
+                <TableCell onClick={(e) => e.stopPropagation()}>
+                  <Checkbox
+                    checked={selected.has(hit.id)}
+                    onCheckedChange={(checked) => {
+                      setSelected((prev) => {
+                        const next = new Set(prev);
+                        if (checked) next.add(hit.id);
+                        else next.delete(hit.id);
+                        return next;
+                      });
+                    }}
+                    aria-label="Mail auswählen"
+                  />
+                </TableCell>
+                <TableCell className="whitespace-nowrap text-sm text-muted-foreground">
+                  {hit.date
+                    ? new Date(hit.date).toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" })
+                    : "-"}
+                </TableCell>
+                <TableCell className="hidden max-w-[14rem] truncate text-sm md:table-cell">{hit.from || "-"}</TableCell>
+                <TableCell className="max-w-[60vw] font-medium sm:max-w-none">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate">{hit.subject || "(kein Betreff)"}</span>
+                    {hit.thread_size && hit.thread_size > 1 && (
+                      <span className="inline-flex items-center rounded-full bg-muted px-1.5 py-0.5 text-xs text-muted-foreground font-normal">
+                        {hit.thread_size}
+                      </span>
+                    )}
+                  </div>
+                  {/* Absender nur auf Mobile, da Spalte "Von" dort ausgeblendet ist */}
+                  {hit.from && (
+                    <div className="mt-0.5 truncate text-xs text-muted-foreground md:hidden">
+                      {hit.from}
+                    </div>
+                  )}
+                  <SnippetLine hit={hit} />
+                </TableCell>
+                <TableCell className="hidden max-w-[12rem] truncate text-sm text-muted-foreground lg:table-cell">{hit.to || "-"}</TableCell>
+                <TableCell className="text-center text-sm">
+                  {hit.has_attachments ? "📎" : ""}
+                </TableCell>
+                <TableCell className="hidden text-right text-xs text-muted-foreground whitespace-nowrap sm:table-cell">
+                  {hit.size ? formatBytes(hit.size) : ""}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Card>
+
+      {totalPages > 1 && (
+        <div className="mt-4 flex items-center justify-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page <= 1}
+            onClick={() => onPageChange(page - 1)}
+          >
+            Zurueck
+          </Button>
+          <span className="text-sm text-muted-foreground">
+            Seite {page} von {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page >= totalPages}
+            onClick={() => onPageChange(page + 1)}
+          >
+            Weiter
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/settings/DisplaySection.tsx b/src/components/settings/DisplaySection.tsx
new file mode 100644
index 0000000..d53c993
--- /dev/null
+++ b/src/components/settings/DisplaySection.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { useProfileSettings } from "@/hooks/useProfileSettings";
+
+type DisplaySectionProps = Pick<
+  ReturnType<typeof useProfileSettings>,
+  | "listPageSize"
+  | "listPageSizeError"
+  | "listPageSizeSuccess"
+  | "listPageSizeLoading"
+  | "handleChangeListPageSize"
+>;
+
+export function DisplaySection({
+  listPageSize,
+  listPageSizeError,
+  listPageSizeSuccess,
+  listPageSizeLoading,
+  handleChangeListPageSize,
+}: DisplaySectionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Listenansicht</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="list-page-size">Eintraege pro Seite</Label>
+          <Select
+            value={listPageSize}
+            onValueChange={handleChangeListPageSize}
+            disabled={listPageSizeLoading}
+          >
+            <SelectTrigger id="list-page-size" className="w-40">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="25">25</SelectItem>
+              <SelectItem value="50">50</SelectItem>
+              <SelectItem value="100">100</SelectItem>
+              <SelectItem value="200">200</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        {listPageSizeError && (
+          <Alert variant="destructive">
+            <AlertDescription>{listPageSizeError}</AlertDescription>
+          </Alert>
+        )}
+        {listPageSizeSuccess && (
+          <Alert>
+            <AlertDescription>{listPageSizeSuccess}</AlertDescription>
+          </Alert>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/settings/ImapSection.tsx b/src/components/settings/ImapSection.tsx
new file mode 100644
index 0000000..c49c2c1
--- /dev/null
+++ b/src/components/settings/ImapSection.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Server, Lock, Info } from "lucide-react";
+import type { SystemInfo } from "@/lib/api";
+
+interface ImapSectionProps {
+  systemInfo: SystemInfo | null;
+  systemInfoLoading: boolean;
+  username: string;
+}
+
+export function ImapSection({
+  systemInfo,
+  systemInfoLoading,
+  username,
+}: ImapSectionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3">
+          <Server className="h-5 w-5" aria-hidden="true" />
+          IMAP-Zugang
+          <Badge variant="default" className="bg-green-600">
+            Verfuegbar
+          </Badge>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          Verbinden Sie Ihren Mail-Client (Thunderbird, Outlook, Apple Mail)
+          mit folgenden Zugangsdaten:
+        </p>
+
+        <div
+          className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm"
+          role="list"
+          aria-label="IMAP-Verbindungsdaten"
+        >
+          <span className="text-muted-foreground flex items-center gap-1.5">
+            <Server className="h-3.5 w-3.5" aria-hidden="true" />
+            Server
+          </span>
+          <span className="font-mono">
+            {systemInfoLoading
+              ? "Laden..."
+              : systemInfo?.fqdn ||
+                (typeof window !== "undefined"
+                  ? window.location.hostname
+                  : "")}
+          </span>
+
+          <span className="text-muted-foreground flex items-center gap-1.5">
+            <Lock className="h-3.5 w-3.5" aria-hidden="true" />
+            IMAP-Port
+          </span>
+          <span className="font-mono">
+            {systemInfo?.imap_port ?? 9993} (SSL/TLS)
+          </span>
+
+          <span className="text-muted-foreground flex items-center gap-1.5">
+            <Lock className="h-3.5 w-3.5" aria-hidden="true" />
+            Alternativ-Port
+          </span>
+          <span className="font-mono">
+            {systemInfo?.imap_port_alt ?? 993} (SSL/TLS)
+          </span>
+
+          <span className="text-muted-foreground flex items-center gap-1.5">
+            <Lock className="h-3.5 w-3.5" aria-hidden="true" />
+            Sicherheit
+          </span>
+          <span className="font-mono">SSL/TLS</span>
+
+          <span className="text-muted-foreground">Benutzername</span>
+          <span className="font-mono">{username}</span>
+
+          <span className="text-muted-foreground">Passwort</span>
+          <span className="text-sm italic">Ihr archivmail-Passwort</span>
+        </div>
+
+        <div className="flex items-start gap-2 rounded-md border border-yellow-300 bg-yellow-50 px-3 py-2 text-sm text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-200">
+          <Info className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+          <span>
+            Der IMAP-Zugang ist schreibgeschuetzt. Loeschen, Verschieben und
+            neue Mails einlegen sind nicht moeglich.
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/settings/PasswordSection.tsx b/src/components/settings/PasswordSection.tsx
new file mode 100644
index 0000000..fd5e166
--- /dev/null
+++ b/src/components/settings/PasswordSection.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import type { usePasswordChange } from "@/hooks/usePasswordChange";
+
+type PasswordSectionProps = ReturnType<typeof usePasswordChange>;
+
+export function PasswordSection({
+  currentPw,
+  setCurrentPw,
+  newPw,
+  setNewPw,
+  confirmPw,
+  setConfirmPw,
+  pwError,
+  pwSuccess,
+  pwLoading,
+  handleChangePassword,
+}: PasswordSectionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Passwort aendern</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleChangePassword} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="current-password">Aktuelles Passwort</Label>
+            <Input
+              id="current-password"
+              type="password"
+              value={currentPw}
+              onChange={(e) => setCurrentPw(e.target.value)}
+              required
+              autoComplete="current-password"
+              aria-label="Aktuelles Passwort"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="new-password">Neues Passwort</Label>
+            <Input
+              id="new-password"
+              type="password"
+              value={newPw}
+              onChange={(e) => setNewPw(e.target.value)}
+              required
+              minLength={8}
+              autoComplete="new-password"
+              aria-label="Neues Passwort"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="confirm-password">Neues Passwort bestaetigen</Label>
+            <Input
+              id="confirm-password"
+              type="password"
+              value={confirmPw}
+              onChange={(e) => setConfirmPw(e.target.value)}
+              required
+              minLength={8}
+              autoComplete="new-password"
+              aria-label="Neues Passwort bestaetigen"
+            />
+          </div>
+          {pwError && (
+            <Alert variant="destructive">
+              <AlertDescription>{pwError}</AlertDescription>
+            </Alert>
+          )}
+          {pwSuccess && (
+            <Alert>
+              <AlertDescription>{pwSuccess}</AlertDescription>
+            </Alert>
+          )}
+          <Button type="submit" disabled={pwLoading}>
+            {pwLoading ? "Speichern..." : "Passwort aendern"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/settings/ProfileSection.tsx b/src/components/settings/ProfileSection.tsx
new file mode 100644
index 0000000..0508b8b
--- /dev/null
+++ b/src/components/settings/ProfileSection.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import type { useProfileSettings } from "@/hooks/useProfileSettings";
+
+type ProfileSectionProps = Pick<
+  ReturnType<typeof useProfileSettings>,
+  "email" | "setEmail" | "emailError" | "emailSuccess" | "emailLoading" | "handleChangeEmail"
+>;
+
+export function ProfileSection({
+  email,
+  setEmail,
+  emailError,
+  emailSuccess,
+  emailLoading,
+  handleChangeEmail,
+}: ProfileSectionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>E-Mail-Adresse aendern</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleChangeEmail} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">E-Mail-Adresse</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              autoComplete="email"
+              aria-label="E-Mail-Adresse"
+            />
+          </div>
+          {emailError && (
+            <Alert variant="destructive">
+              <AlertDescription>{emailError}</AlertDescription>
+            </Alert>
+          )}
+          {emailSuccess && (
+            <Alert>
+              <AlertDescription>{emailSuccess}</AlertDescription>
+            </Alert>
+          )}
+          <Button type="submit" disabled={emailLoading}>
+            {emailLoading ? "Speichern..." : "E-Mail aendern"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/settings/TotpSection.tsx b/src/components/settings/TotpSection.tsx
new file mode 100644
index 0000000..822d14f
--- /dev/null
+++ b/src/components/settings/TotpSection.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import type { useTotpSettings } from "@/hooks/useTotpSettings";
+
+type TotpSectionProps = ReturnType<typeof useTotpSettings>;
+
+export function TotpSection({
+  totpEnabled,
+  showSetup,
+  qrCode,
+  secret,
+  totpCode,
+  setTotpCode,
+  totpError,
+  totpSuccess,
+  totpLoading,
+  disableDialogOpen,
+  setDisableDialogOpen,
+  disableCode,
+  setDisableCode,
+  disableError,
+  disableLoading,
+  handleSetupTOTP,
+  handleConfirmTOTP,
+  handleDisableTOTP,
+  cancelSetup,
+  openDisableDialog,
+}: TotpSectionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3">
+          Zwei-Faktor-Authentifizierung (2FA)
+          {totpEnabled ? (
+            <Badge variant="default" className="bg-green-600">
+              Aktiv
+            </Badge>
+          ) : (
+            <Badge variant="secondary">Inaktiv</Badge>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {totpError && (
+          <Alert variant="destructive">
+            <AlertDescription>{totpError}</AlertDescription>
+          </Alert>
+        )}
+        {totpSuccess && (
+          <Alert>
+            <AlertDescription>{totpSuccess}</AlertDescription>
+          </Alert>
+        )}
+
+        {!totpEnabled && !showSetup && (
+          <div>
+            <p className="text-sm text-muted-foreground mb-4">
+              Schuetzen Sie Ihr Konto mit einem Einmalpasswort (TOTP).
+              Kompatibel mit Google Authenticator, Authy und anderen
+              TOTP-Apps.
+            </p>
+            <Button onClick={handleSetupTOTP} disabled={totpLoading}>
+              {totpLoading ? "Laden..." : "2FA einrichten"}
+            </Button>
+          </div>
+        )}
+
+        {showSetup && (
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Scannen Sie den QR-Code mit Ihrer Authenticator-App und geben
+              Sie den angezeigten Code ein.
+            </p>
+            {qrCode && (
+              <div className="flex justify-center p-4 bg-white rounded-lg border w-fit mx-auto">
+                <img
+                  src={`data:image/png;base64,${qrCode}`}
+                  alt="TOTP QR-Code"
+                  width={200}
+                  height={200}
+                />
+              </div>
+            )}
+            {secret && (
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">
+                  Manueller Schluessel
+                </Label>
+                <code className="block text-sm font-mono bg-muted px-3 py-2 rounded break-all select-all">
+                  {secret}
+                </code>
+              </div>
+            )}
+            <form onSubmit={handleConfirmTOTP} className="space-y-3">
+              <div className="space-y-2">
+                <Label htmlFor="totp-code">Bestaetigungscode</Label>
+                <Input
+                  id="totp-code"
+                  type="text"
+                  inputMode="numeric"
+                  pattern="[0-9]{6}"
+                  maxLength={6}
+                  placeholder="000000"
+                  value={totpCode}
+                  onChange={(e) => setTotpCode(e.target.value)}
+                  required
+                  autoComplete="one-time-code"
+                  aria-label="TOTP Bestaetigungscode"
+                />
+              </div>
+              <div className="flex gap-2">
+                <Button type="submit" disabled={totpLoading}>
+                  {totpLoading ? "Pruefen..." : "Bestaetigen"}
+                </Button>
+                <Button type="button" variant="outline" onClick={cancelSetup}>
+                  Abbrechen
+                </Button>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {totpEnabled && (
+          <div>
+            <p className="text-sm text-muted-foreground mb-4">
+              2FA ist aktiv. Zum Deaktivieren benoetigen Sie einen
+              aktuellen Code aus Ihrer Authenticator-App.
+            </p>
+            <Button variant="destructive" onClick={openDisableDialog}>
+              2FA deaktivieren
+            </Button>
+          </div>
+        )}
+
+        {/* Disable TOTP dialog */}
+        <Dialog open={disableDialogOpen} onOpenChange={setDisableDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>2FA deaktivieren</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4">
+              <p className="text-sm text-muted-foreground">
+                Geben Sie einen aktuellen Code aus Ihrer Authenticator-App
+                ein, um 2FA zu deaktivieren.
+              </p>
+              <div className="space-y-2">
+                <Label htmlFor="disable-totp-code">TOTP-Code</Label>
+                <Input
+                  id="disable-totp-code"
+                  type="text"
+                  inputMode="numeric"
+                  pattern="[0-9]{6}"
+                  maxLength={6}
+                  placeholder="000000"
+                  value={disableCode}
+                  onChange={(e) => setDisableCode(e.target.value)}
+                  autoComplete="one-time-code"
+                  aria-label="TOTP-Code zum Deaktivieren"
+                />
+              </div>
+              {disableError && (
+                <Alert variant="destructive">
+                  <AlertDescription>{disableError}</AlertDescription>
+                </Alert>
+              )}
+            </div>
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={() => setDisableDialogOpen(false)}
+              >
+                Abbrechen
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleDisableTOTP}
+                disabled={disableLoading || disableCode.length !== 6}
+              >
+                {disableLoading ? "Pruefen..." : "Deaktivieren"}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/hooks/useAdminAudit.ts b/src/hooks/useAdminAudit.ts
new file mode 100644
index 0000000..30643cd
--- /dev/null
+++ b/src/hooks/useAdminAudit.ts
@@ -0,0 +1,35 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { getAuditLog, type AuditEntry } from "@/lib/api";
+
+const AUDIT_PAGE_SIZE = 25;
+
+export function useAdminAudit() {
+  const [auditEntries, setAuditEntries] = useState<AuditEntry[]>([]);
+  const [auditTotal, setAuditTotal] = useState(0);
+  const [auditPage, setAuditPage] = useState(1);
+  const [auditLoading, setAuditLoading] = useState(false);
+
+  const loadAudit = useCallback(async (p: number) => {
+    setAuditLoading(true);
+    try {
+      const data = await getAuditLog({ page: p, page_size: AUDIT_PAGE_SIZE });
+      setAuditEntries(data.entries || []);
+      setAuditTotal(data.total);
+      setAuditPage(p);
+    } catch {
+      setAuditEntries([]);
+    } finally {
+      setAuditLoading(false);
+    }
+  }, []);
+
+  return {
+    auditEntries,
+    auditTotal,
+    auditPage,
+    auditLoading,
+    loadAudit,
+  };
+}
diff --git a/src/hooks/useAdminCert.ts b/src/hooks/useAdminCert.ts
new file mode 100644
index 0000000..14996ea
--- /dev/null
+++ b/src/hooks/useAdminCert.ts
@@ -0,0 +1,71 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { getCertInfo, type CertInfo } from "@/lib/api";
+
+export function useAdminCert() {
+  const [certInfo, setCertInfo] = useState<CertInfo | null>(null);
+  const [certLoading, setCertLoading] = useState(false);
+  const [certError, setCertError] = useState("");
+  const [certSuccess, setCertSuccess] = useState("");
+  const [certFile, setCertFile] = useState<File | null>(null);
+  const [keyFile, setKeyFile] = useState<File | null>(null);
+  const [certUploadLoading, setCertUploadLoading] = useState(false);
+  const [selfSignedCN, setSelfSignedCN] = useState("archivmail");
+  const [selfSignedDNS, setSelfSignedDNS] = useState("archivmail");
+  const [selfSignedIPs, setSelfSignedIPs] = useState("192.168.1.131");
+  const [selfSignedYears, setSelfSignedYears] = useState("10");
+  const [selfSignedLoading, setSelfSignedLoading] = useState(false);
+  const [acmeDomain, setAcmeDomain] = useState("");
+  const [acmeEmail, setAcmeEmail] = useState("");
+  const [acmeLoading, setAcmeLoading] = useState(false);
+  const [acmeOutput, setAcmeOutput] = useState("");
+
+  const loadCert = useCallback(async () => {
+    setCertLoading(true);
+    setCertError("");
+    try {
+      const info = await getCertInfo();
+      setCertInfo(info);
+    } catch (e) {
+      setCertError(String(e));
+    } finally {
+      setCertLoading(false);
+    }
+  }, []);
+
+  return {
+    certInfo,
+    setCertInfo,
+    certLoading,
+    certError,
+    setCertError,
+    certSuccess,
+    setCertSuccess,
+    certFile,
+    setCertFile,
+    keyFile,
+    setKeyFile,
+    certUploadLoading,
+    setCertUploadLoading,
+    selfSignedCN,
+    setSelfSignedCN,
+    selfSignedDNS,
+    setSelfSignedDNS,
+    selfSignedIPs,
+    setSelfSignedIPs,
+    selfSignedYears,
+    setSelfSignedYears,
+    selfSignedLoading,
+    setSelfSignedLoading,
+    acmeDomain,
+    setAcmeDomain,
+    acmeEmail,
+    setAcmeEmail,
+    acmeLoading,
+    setAcmeLoading,
+    acmeOutput,
+    setAcmeOutput,
+    loadCert,
+  };
+}
diff --git a/src/hooks/useAdminDashboard.ts b/src/hooks/useAdminDashboard.ts
new file mode 100644
index 0000000..26c58ee
--- /dev/null
+++ b/src/hooks/useAdminDashboard.ts
@@ -0,0 +1,86 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import {
+  getSMTPStatus,
+  getHealth,
+  getStorageStats,
+  getSystemStats,
+  getMailTimeseries,
+  type SMTPStatus,
+  type StorageStats,
+  type SystemStats,
+  type TimeseriesPoint,
+} from "@/lib/api";
+
+export function useAdminDashboard(active: boolean) {
+  const [smtpStatus, setSmtpStatus] = useState<SMTPStatus | null>(null);
+  const [storageStats, setStorageStats] = useState<StorageStats | null>(null);
+  const [systemStats, setSystemStats] = useState<SystemStats | null>(null);
+  const [timeseries, setTimeseries] = useState<TimeseriesPoint[]>([]);
+  const [apiOnline, setApiOnline] = useState<boolean | null>(null);
+  const [dashLoading, setDashLoading] = useState(true);
+  const [dashRefreshed, setDashRefreshed] = useState<Date | null>(null);
+  const [countdown, setCountdown] = useState(30);
+
+  const dashIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const loadDashboard = useCallback(async () => {
+    setDashLoading(true);
+    try {
+      const [smtp, health, storage, sysStats, ts] = await Promise.allSettled([
+        getSMTPStatus(),
+        getHealth(),
+        getStorageStats(),
+        getSystemStats(),
+        getMailTimeseries(30),
+      ]);
+      setSmtpStatus(smtp.status === "fulfilled" ? smtp.value : null);
+      setApiOnline(health.status === "fulfilled" && health.value.status === "ok");
+      setStorageStats(storage.status === "fulfilled" ? storage.value : null);
+      setSystemStats(sysStats.status === "fulfilled" ? sysStats.value : null);
+      setTimeseries(ts.status === "fulfilled" ? ts.value.points : []);
+      setDashRefreshed(new Date());
+    } finally {
+      setDashLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!active) return;
+    loadDashboard();
+
+    setCountdown(30);
+    dashIntervalRef.current = setInterval(() => {
+      loadDashboard();
+      setCountdown(30);
+    }, 30_000);
+
+    const ticker = setInterval(() => {
+      setCountdown((c) => (c > 0 ? c - 1 : 0));
+    }, 1_000);
+
+    return () => {
+      if (dashIntervalRef.current) clearInterval(dashIntervalRef.current);
+      clearInterval(ticker);
+    };
+  }, [active, loadDashboard]);
+
+  const refresh = useCallback(() => {
+    loadDashboard();
+    setCountdown(30);
+  }, [loadDashboard]);
+
+  return {
+    smtpStatus,
+    storageStats,
+    systemStats,
+    timeseries,
+    apiOnline,
+    dashLoading,
+    dashRefreshed,
+    countdown,
+    loadDashboard,
+    refresh,
+  };
+}
diff --git a/src/hooks/useAdminSecurity.ts b/src/hooks/useAdminSecurity.ts
new file mode 100644
index 0000000..083a488
--- /dev/null
+++ b/src/hooks/useAdminSecurity.ts
@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import {
+  getSecurityAudit,
+  fixSecurityIssue,
+  type SecurityAuditResult,
+} from "@/lib/api";
+
+export function useAdminSecurity() {
+  const [securityAudit, setSecurityAudit] = useState<SecurityAuditResult | null>(null);
+  const [securityLoading, setSecurityLoading] = useState(false);
+  const [securityError, setSecurityError] = useState("");
+  const [fixLoading, setFixLoading] = useState<string | null>(null);
+  const [fixMessage, setFixMessage] = useState("");
+
+  async function runSecurityAudit() {
+    setSecurityLoading(true);
+    setSecurityError("");
+    setFixMessage("");
+    try {
+      const result = await getSecurityAudit();
+      setSecurityAudit(result);
+    } catch {
+      setSecurityError("Security-Audit konnte nicht ausgeführt werden.");
+    } finally {
+      setSecurityLoading(false);
+    }
+  }
+
+  async function runFix(action: string) {
+    setFixLoading(action);
+    setFixMessage("");
+    setSecurityError("");
+    try {
+      const res = await fixSecurityIssue(action);
+      setFixMessage(res.message);
+      await runSecurityAudit();
+    } catch (e: unknown) {
+      setSecurityError(e instanceof Error ? e.message : "Fix fehlgeschlagen.");
+    } finally {
+      setFixLoading(null);
+    }
+  }
+
+  return {
+    securityAudit,
+    securityLoading,
+    securityError,
+    fixLoading,
+    fixMessage,
+    runSecurityAudit,
+    runFix,
+  };
+}
diff --git a/src/hooks/useAdminServices.ts b/src/hooks/useAdminServices.ts
new file mode 100644
index 0000000..0118782
--- /dev/null
+++ b/src/hooks/useAdminServices.ts
@@ -0,0 +1,46 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { getServices, serviceAction, type ServiceStatus } from "@/lib/api";
+
+export function useAdminServices() {
+  const [services, setServices] = useState<ServiceStatus[]>([]);
+  const [servicesLoading, setServicesLoading] = useState(false);
+  const [serviceActionLoading, setServiceActionLoading] = useState<string | null>(null);
+  const [serviceError, setServiceError] = useState("");
+
+  const loadServices = useCallback(async () => {
+    setServicesLoading(true);
+    setServiceError("");
+    try {
+      const data = await getServices();
+      setServices(data || []);
+    } catch {
+      setServiceError("Dienste konnten nicht abgerufen werden.");
+    } finally {
+      setServicesLoading(false);
+    }
+  }, []);
+
+  async function handleServiceAction(name: string, action: "start" | "stop" | "restart" | "enable" | "disable" | "block_external" | "allow_external") {
+    setServiceActionLoading(`${name}:${action}`);
+    setServiceError("");
+    try {
+      const updated = await serviceAction(name, action);
+      setServices((prev) => prev.map((s) => (s.name === updated.name ? updated : s)));
+    } catch (e: unknown) {
+      setServiceError(e instanceof Error ? e.message : "Aktion fehlgeschlagen.");
+    } finally {
+      setServiceActionLoading(null);
+    }
+  }
+
+  return {
+    services,
+    servicesLoading,
+    serviceActionLoading,
+    serviceError,
+    loadServices,
+    handleServiceAction,
+  };
+}
diff --git a/src/hooks/useAdminTenants.ts b/src/hooks/useAdminTenants.ts
new file mode 100644
index 0000000..4d8b080
--- /dev/null
+++ b/src/hooks/useAdminTenants.ts
@@ -0,0 +1,171 @@
+"use client";
+
+import { useState, useCallback, type Dispatch, type SetStateAction } from "react";
+import {
+  getTenants,
+  createTenant,
+  updateTenant,
+  deleteTenant,
+  getTenantDomains,
+  addTenantDomain,
+  removeTenantDomain,
+  type Tenant,
+  type TenantDefaultUser,
+  type TenantDomain,
+} from "@/lib/api";
+
+export function useAdminTenants() {
+  const [tenants, setTenants] = useState<Tenant[]>([]);
+  const [tenantsLoading, setTenantsLoading] = useState(false);
+  const [tenantsError, setTenantsError] = useState("");
+  const [tenantDialogOpen, setTenantDialogOpen] = useState(false);
+  const [newTenantName, setNewTenantName] = useState("");
+  const [newTenantSlug, setNewTenantSlug] = useState("");
+  const [tenantCreateLoading, setTenantCreateLoading] = useState(false);
+  const [tenantCreateError, setTenantCreateError] = useState("");
+  const [tenantCreatedUsers, setTenantCreatedUsers] = useState<TenantDefaultUser[]>([]);
+  const [tenantCreatedName, setTenantCreatedName] = useState("");
+  const [tenantCredDialogOpen, setTenantCredDialogOpen] = useState(false);
+  const [tenantDeleteId, setTenantDeleteId] = useState<number | null>(null);
+  const [tenantDeleteLoading, setTenantDeleteLoading] = useState(false);
+  const [domainDialogTenant, setDomainDialogTenant] = useState<Tenant | null>(null);
+  const [tenantDomains, setTenantDomains] = useState<TenantDomain[]>([]);
+  const [domainsLoading, setDomainsLoading] = useState(false);
+  const [newDomain, setNewDomain] = useState("");
+  const [addDomainLoading, setAddDomainLoading] = useState(false);
+  const [domainError, setDomainError] = useState("");
+
+  // Superadmin: tenant LDAP dialog
+  const [tenantLdapDialogId, setTenantLdapDialogId] = useState<number | null>(null);
+
+  const loadTenants = useCallback(async () => {
+    setTenantsLoading(true);
+    setTenantsError("");
+    try {
+      const data = await getTenants();
+      setTenants(data || []);
+    } catch {
+      setTenantsError("Mandanten konnten nicht geladen werden.");
+    } finally {
+      setTenantsLoading(false);
+    }
+  }, []);
+
+  async function handleCreateTenant(e: React.FormEvent) {
+    e.preventDefault();
+    setTenantCreateLoading(true);
+    setTenantCreateError("");
+    try {
+      const result = await createTenant(newTenantName, newTenantSlug);
+      setTenantDialogOpen(false);
+      setTenantCreatedName(result.name);
+      setTenantCreatedUsers(result.default_users ?? []);
+      setTenantCredDialogOpen(true);
+      setNewTenantName("");
+      setNewTenantSlug("");
+      await loadTenants();
+    } catch (err: unknown) {
+      setTenantCreateError(err instanceof Error ? err.message : "Erstellen fehlgeschlagen.");
+    } finally {
+      setTenantCreateLoading(false);
+    }
+  }
+
+  async function handleToggleTenant(t: Tenant) {
+    try {
+      await updateTenant(t.id, { active: !t.active });
+      await loadTenants();
+    } catch { /* ignore */ }
+  }
+
+  async function handleDeleteTenant() {
+    if (!tenantDeleteId) return;
+    setTenantDeleteLoading(true);
+    try {
+      await deleteTenant(tenantDeleteId);
+      setTenantDeleteId(null);
+      await loadTenants();
+    } catch { /* ignore */ } finally {
+      setTenantDeleteLoading(false);
+    }
+  }
+
+  async function openDomainDialog(t: Tenant) {
+    setDomainDialogTenant(t);
+    setDomainsLoading(true);
+    setDomainError("");
+    setNewDomain("");
+    try {
+      const domains = await getTenantDomains(t.id);
+      setTenantDomains(domains || []);
+    } catch { setDomainError("Domains konnten nicht geladen werden."); }
+    finally { setDomainsLoading(false); }
+  }
+
+  async function handleAddDomain() {
+    if (!domainDialogTenant || !newDomain) return;
+    setAddDomainLoading(true);
+    setDomainError("");
+    try {
+      await addTenantDomain(domainDialogTenant.id, newDomain);
+      setNewDomain("");
+      const domains = await getTenantDomains(domainDialogTenant.id);
+      setTenantDomains(domains || []);
+    } catch (err: unknown) {
+      setDomainError(err instanceof Error ? err.message : "Domain konnte nicht hinzugefügt werden.");
+    } finally {
+      setAddDomainLoading(false);
+    }
+  }
+
+  async function handleRemoveDomain(domainId: number) {
+    if (!domainDialogTenant) return;
+    setDomainError("");
+    try {
+      await removeTenantDomain(domainDialogTenant.id, domainId);
+      const domains = await getTenantDomains(domainDialogTenant.id);
+      setTenantDomains(domains || []);
+    } catch (err: unknown) {
+      setDomainError(err instanceof Error ? err.message : "Domain konnte nicht entfernt werden.");
+    }
+  }
+
+  return {
+    tenants,
+    setTenants: setTenants as Dispatch<SetStateAction<Tenant[]>>,
+    tenantsLoading,
+    tenantsError,
+    tenantDialogOpen,
+    setTenantDialogOpen,
+    newTenantName,
+    setNewTenantName,
+    newTenantSlug,
+    setNewTenantSlug,
+    tenantCreateLoading,
+    tenantCreateError,
+    tenantCreatedUsers,
+    tenantCreatedName,
+    tenantCredDialogOpen,
+    setTenantCredDialogOpen,
+    tenantDeleteId,
+    setTenantDeleteId,
+    tenantDeleteLoading,
+    domainDialogTenant,
+    setDomainDialogTenant,
+    tenantDomains,
+    domainsLoading,
+    newDomain,
+    setNewDomain,
+    addDomainLoading,
+    domainError,
+    tenantLdapDialogId,
+    setTenantLdapDialogId,
+    loadTenants,
+    handleCreateTenant,
+    handleToggleTenant,
+    handleDeleteTenant,
+    openDomainDialog,
+    handleAddDomain,
+    handleRemoveDomain,
+  };
+}
diff --git a/src/hooks/useAdminUpload.ts b/src/hooks/useAdminUpload.ts
new file mode 100644
index 0000000..352942d
--- /dev/null
+++ b/src/hooks/useAdminUpload.ts
@@ -0,0 +1,58 @@
+"use client";
+
+import { useState, useRef } from "react";
+import {
+  uploadMailFiles,
+  getUploadProgress,
+  type UploadJob,
+} from "@/lib/api";
+
+export function useAdminUpload() {
+  const [uploadDragging, setUploadDragging] = useState(false);
+  const [uploadJob, setUploadJob] = useState<UploadJob | null>(null);
+  const [uploadError, setUploadError] = useState("");
+  const [uploadLoading, setUploadLoading] = useState(false);
+  const uploadPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  async function handleUploadFiles(files: File[]) {
+    const valid = files.filter(f => f.name.toLowerCase().endsWith(".eml") || f.name.toLowerCase().endsWith(".mbox"));
+    if (valid.length === 0) {
+      setUploadError("Nur .eml und .mbox Dateien erlaubt.");
+      return;
+    }
+    setUploadError("");
+    setUploadJob(null);
+    setUploadLoading(true);
+    try {
+      const { job_id } = await uploadMailFiles(valid);
+      const poll = setInterval(async () => {
+        try {
+          const job = await getUploadProgress(job_id);
+          setUploadJob(job);
+          if (job.status !== "running") {
+            clearInterval(poll);
+            uploadPollRef.current = null;
+            setUploadLoading(false);
+          }
+        } catch {
+          clearInterval(poll);
+          uploadPollRef.current = null;
+          setUploadLoading(false);
+        }
+      }, 1500);
+      uploadPollRef.current = poll;
+    } catch (e: unknown) {
+      setUploadError(e instanceof Error ? e.message : "Upload fehlgeschlagen.");
+      setUploadLoading(false);
+    }
+  }
+
+  return {
+    uploadDragging,
+    setUploadDragging,
+    uploadJob,
+    uploadError,
+    uploadLoading,
+    handleUploadFiles,
+  };
+}
diff --git a/src/hooks/useAdminUsers.ts b/src/hooks/useAdminUsers.ts
new file mode 100644
index 0000000..a6a62c1
--- /dev/null
+++ b/src/hooks/useAdminUsers.ts
@@ -0,0 +1,169 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import {
+  getUsers,
+  createUser,
+  updateUser,
+  deleteUser,
+  type User,
+} from "@/lib/api";
+
+export function useAdminUsers() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [usersLoading, setUsersLoading] = useState(true);
+  const [usersError, setUsersError] = useState("");
+
+  // Create user dialog
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [newUsername, setNewUsername] = useState("");
+  const [newEmail, setNewEmail] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [newRole, setNewRole] = useState("user");
+  const [createLoading, setCreateLoading] = useState(false);
+  const [createError, setCreateError] = useState("");
+
+  // User action state
+  const [userActionLoading, setUserActionLoading] = useState<number | null>(null);
+  const [resetPasswordUserId, setResetPasswordUserId] = useState<number | null>(null);
+  const [resetPasswordValue, setResetPasswordValue] = useState("");
+  const [resetPasswordError, setResetPasswordError] = useState("");
+  const [resetPasswordLoading, setResetPasswordLoading] = useState(false);
+
+  // Delete confirmation dialog
+  const [deleteDialogUser, setDeleteDialogUser] = useState<User | null>(null);
+  const [deleteActionLoading, setDeleteActionLoading] = useState<"deactivate" | "delete" | null>(null);
+  const [deleteDialogError, setDeleteDialogError] = useState("");
+
+  const loadUsers = useCallback(async () => {
+    setUsersLoading(true);
+    setUsersError("");
+    try {
+      const data = await getUsers();
+      setUsers(data || []);
+    } catch {
+      setUsersError("Benutzer konnten nicht geladen werden.");
+    } finally {
+      setUsersLoading(false);
+    }
+  }, []);
+
+  async function handleCreateUser(e: React.FormEvent) {
+    e.preventDefault();
+    setCreateLoading(true);
+    setCreateError("");
+    try {
+      await createUser({
+        username: newUsername,
+        email: newEmail,
+        password: newPassword,
+        role: newRole,
+      });
+      setDialogOpen(false);
+      setNewUsername("");
+      setNewEmail("");
+      setNewPassword("");
+      setNewRole("user");
+      loadUsers();
+    } catch {
+      setCreateError("Benutzer konnte nicht erstellt werden.");
+    } finally {
+      setCreateLoading(false);
+    }
+  }
+
+  async function handleToggleActive(u: User) {
+    setUserActionLoading(u.id);
+    try {
+      await updateUser(u.id, { active: !u.active });
+      loadUsers();
+    } catch {
+      // ignore
+    } finally {
+      setUserActionLoading(null);
+    }
+  }
+
+  async function handleDeactivateConfirmed() {
+    if (!deleteDialogUser) return;
+    setDeleteActionLoading("deactivate");
+    setDeleteDialogError("");
+    try {
+      await updateUser(deleteDialogUser.id, { active: false });
+      setDeleteDialogUser(null);
+      loadUsers();
+    } catch {
+      setDeleteDialogError("Deaktivierung fehlgeschlagen.");
+    } finally {
+      setDeleteActionLoading(null);
+    }
+  }
+
+  async function handleDeleteConfirmed() {
+    if (!deleteDialogUser) return;
+    setDeleteActionLoading("delete");
+    setDeleteDialogError("");
+    try {
+      await deleteUser(deleteDialogUser.id);
+      setDeleteDialogUser(null);
+      loadUsers();
+    } catch (err: unknown) {
+      setDeleteDialogError(err instanceof Error ? err.message : "Löschen fehlgeschlagen.");
+    } finally {
+      setDeleteActionLoading(null);
+    }
+  }
+
+  async function handleResetPassword(e: React.FormEvent) {
+    e.preventDefault();
+    if (!resetPasswordUserId) return;
+    setResetPasswordLoading(true);
+    setResetPasswordError("");
+    try {
+      await updateUser(resetPasswordUserId, { password: resetPasswordValue });
+      setResetPasswordUserId(null);
+      setResetPasswordValue("");
+    } catch {
+      setResetPasswordError("Passwort konnte nicht geändert werden.");
+    } finally {
+      setResetPasswordLoading(false);
+    }
+  }
+
+  return {
+    users,
+    usersLoading,
+    usersError,
+    dialogOpen,
+    setDialogOpen,
+    newUsername,
+    setNewUsername,
+    newEmail,
+    setNewEmail,
+    newPassword,
+    setNewPassword,
+    newRole,
+    setNewRole,
+    createLoading,
+    createError,
+    userActionLoading,
+    resetPasswordUserId,
+    setResetPasswordUserId,
+    resetPasswordValue,
+    setResetPasswordValue,
+    resetPasswordError,
+    setResetPasswordError,
+    resetPasswordLoading,
+    deleteDialogUser,
+    setDeleteDialogUser,
+    deleteActionLoading,
+    deleteDialogError,
+    setDeleteDialogError,
+    loadUsers,
+    handleCreateUser,
+    handleToggleActive,
+    handleDeactivateConfirmed,
+    handleDeleteConfirmed,
+    handleResetPassword,
+  };
+}
diff --git a/src/hooks/useImapAccounts.ts b/src/hooks/useImapAccounts.ts
new file mode 100644
index 0000000..70ebe4a
--- /dev/null
+++ b/src/hooks/useImapAccounts.ts
@@ -0,0 +1,334 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  getImapAccounts,
+  createImapAccount,
+  deleteImapAccount,
+  testImapConnection,
+  startImapImport,
+  getImapProgress,
+  triggerImapSync,
+  updateImapInterval,
+  updateImapAccount,
+  type ImapAccount,
+  type ImapFolder,
+} from "@/lib/api";
+
+export function useImapAccounts(user: unknown) {
+  const [accounts, setAccounts] = useState<ImapAccount[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
+
+  // Edit state
+  const [editAccount, setEditAccount] = useState<ImapAccount | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editHost, setEditHost] = useState("");
+  const [editPort, setEditPort] = useState("993");
+  const [editTls, setEditTls] = useState("ssl");
+  const [editUsername, setEditUsername] = useState("");
+  const [editPassword, setEditPassword] = useState("");
+  const [editSaving, setEditSaving] = useState(false);
+  const [editError, setEditError] = useState("");
+
+  // Form state
+  const [formName, setFormName] = useState("");
+  const [formHost, setFormHost] = useState("");
+  const [formPort, setFormPort] = useState("993");
+  const [formTls, setFormTls] = useState("ssl");
+  const [formUsername, setFormUsername] = useState("");
+  const [formPassword, setFormPassword] = useState("");
+
+  // Test state
+  const [testing, setTesting] = useState(false);
+  const [testError, setTestError] = useState("");
+  const [testFolders, setTestFolders] = useState<ImapFolder[] | null>(null);
+  const [excludedFolders, setExcludedFolders] = useState<Set<string>>(new Set());
+
+  // Saving state
+  const [saving, setSaving] = useState(false);
+
+  // Import error state
+  const [importError, setImportError] = useState<string>("");
+
+  // Polling refs
+  const pollingRefs = useRef<Map<number, ReturnType<typeof setInterval>>>(new Map());
+  const pollErrorCount = useRef<Map<number, number>>(new Map());
+
+  const loadAccounts = useCallback(async () => {
+    try {
+      const data = await getImapAccounts();
+      setAccounts(data);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (user) loadAccounts();
+  }, [user, loadAccounts]);
+
+  // Start polling for running accounts (import or sync)
+  useEffect(() => {
+    for (const acc of accounts) {
+      const isActive = acc.status === "running" || acc.sync_running;
+      if (isActive && !pollingRefs.current.has(acc.id)) {
+        pollErrorCount.current.set(acc.id, 0);
+        const interval = setInterval(async () => {
+          try {
+            const updated = await getImapProgress(acc.id);
+            pollErrorCount.current.set(acc.id, 0);
+            setAccounts((prev) =>
+              prev.map((a) => (a.id === updated.id ? updated : a))
+            );
+            if (updated.status !== "running" && !updated.sync_running) {
+              clearInterval(pollingRefs.current.get(acc.id)!);
+              pollingRefs.current.delete(acc.id);
+              pollErrorCount.current.delete(acc.id);
+            }
+          } catch {
+            // Only stop polling after 5 consecutive failures (tolerates brief network hiccups)
+            const errors = (pollErrorCount.current.get(acc.id) ?? 0) + 1;
+            pollErrorCount.current.set(acc.id, errors);
+            if (errors >= 5) {
+              clearInterval(pollingRefs.current.get(acc.id)!);
+              pollingRefs.current.delete(acc.id);
+              pollErrorCount.current.delete(acc.id);
+            }
+          }
+        }, 2000);
+        pollingRefs.current.set(acc.id, interval);
+      }
+    }
+    // Cleanup intervals for accounts that are no longer active
+    for (const [id, interval] of pollingRefs.current) {
+      const acc = accounts.find((a) => a.id === id);
+      if (!acc || (acc.status !== "running" && !acc.sync_running)) {
+        clearInterval(interval);
+        pollingRefs.current.delete(id);
+      }
+    }
+  }, [accounts]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    const refs = pollingRefs.current;
+    return () => {
+      for (const interval of refs.values()) {
+        clearInterval(interval);
+      }
+    };
+  }, []);
+
+  const resetForm = useCallback(() => {
+    setFormName("");
+    setFormHost("");
+    setFormPort("993");
+    setFormTls("ssl");
+    setFormUsername("");
+    setFormPassword("");
+    setTestFolders(null);
+    setTestError("");
+    setExcludedFolders(new Set());
+  }, []);
+
+  async function handleTest() {
+    setTesting(true);
+    setTestError("");
+    setTestFolders(null);
+    try {
+      const result = await testImapConnection({
+        host: formHost,
+        port: parseInt(formPort, 10) || 993,
+        tls: formTls,
+        username: formUsername,
+        password: formPassword,
+      });
+      if (result.ok && result.folders) {
+        setTestFolders(result.folders);
+        const excluded = new Set<string>();
+        for (const f of result.folders) {
+          if (f.excluded) excluded.add(f.name);
+        }
+        setExcludedFolders(excluded);
+      } else {
+        setTestError(result.error || "Verbindungstest fehlgeschlagen");
+      }
+    } catch (err) {
+      setTestError(err instanceof Error ? err.message : "Verbindungstest fehlgeschlagen");
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await createImapAccount({
+        name: formName,
+        host: formHost,
+        port: parseInt(formPort, 10) || 993,
+        tls: formTls,
+        username: formUsername,
+        password: formPassword,
+        excluded_folders: Array.from(excludedFolders),
+      });
+      setDialogOpen(false);
+      resetForm();
+      await loadAccounts();
+    } catch (err) {
+      setTestError(err instanceof Error ? err.message : "Speichern fehlgeschlagen");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleStartImport(id: number) {
+    setImportError("");
+    try {
+      const updated = await startImapImport(id);
+      setAccounts((prev) => prev.map((a) => (a.id === updated.id ? updated : a)));
+    } catch (err) {
+      setImportError(err instanceof Error ? err.message : "Import konnte nicht gestartet werden.");
+    }
+  }
+
+  async function handleDelete(id: number) {
+    try {
+      await deleteImapAccount(id);
+      setAccounts((prev) => prev.filter((a) => a.id !== id));
+    } catch (err) {
+      alert("Fehler beim Löschen: " + (err instanceof Error ? err.message : String(err)));
+    }
+    setDeleteConfirm(null);
+  }
+
+  function openEdit(acc: ImapAccount) {
+    setEditAccount(acc);
+    setEditName(acc.name);
+    setEditHost(acc.host);
+    setEditPort(String(acc.port));
+    setEditTls(acc.tls);
+    setEditUsername(acc.username);
+    setEditPassword("");
+    setEditError("");
+  }
+
+  async function handleEditSave() {
+    if (!editAccount) return;
+    if (!editName || !editHost || !editUsername) {
+      setEditError("Name, Host und Benutzername sind Pflichtfelder.");
+      return;
+    }
+    setEditSaving(true);
+    setEditError("");
+    try {
+      const updated = await updateImapAccount(editAccount.id, {
+        name: editName,
+        host: editHost,
+        port: parseInt(editPort, 10),
+        tls: editTls,
+        username: editUsername,
+        password: editPassword || undefined,
+      });
+      setAccounts((prev) => prev.map((a) => (a.id === updated.id ? updated : a)));
+      setEditAccount(null);
+    } catch (err) {
+      setEditError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setEditSaving(false);
+    }
+  }
+
+  async function handleSyncNow(id: number) {
+    try {
+      const updated = await triggerImapSync(id);
+      setAccounts((prev) => prev.map((a) => (a.id === updated.id ? updated : a)));
+    } catch {
+      // ignore — conflict means sync already running
+    }
+  }
+
+  async function handleIntervalChange(id: number, value: string) {
+    const intervalMin = parseInt(value, 10);
+    try {
+      const updated = await updateImapInterval(id, intervalMin);
+      setAccounts((prev) => prev.map((a) => (a.id === updated.id ? updated : a)));
+    } catch {
+      // ignore
+    }
+  }
+
+  function toggleExcluded(folderName: string) {
+    setExcludedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(folderName)) {
+        next.delete(folderName);
+      } else {
+        next.add(folderName);
+      }
+      return next;
+    });
+  }
+
+  return {
+    accounts,
+    loading,
+    dialogOpen,
+    setDialogOpen,
+    deleteConfirm,
+    setDeleteConfirm,
+    // edit
+    editAccount,
+    setEditAccount,
+    editName,
+    setEditName,
+    editHost,
+    setEditHost,
+    editPort,
+    setEditPort,
+    editTls,
+    setEditTls,
+    editUsername,
+    setEditUsername,
+    editPassword,
+    setEditPassword,
+    editSaving,
+    editError,
+    // form
+    formName,
+    setFormName,
+    formHost,
+    setFormHost,
+    formPort,
+    setFormPort,
+    formTls,
+    setFormTls,
+    formUsername,
+    setFormUsername,
+    formPassword,
+    setFormPassword,
+    // test
+    testing,
+    testError,
+    testFolders,
+    excludedFolders,
+    // saving
+    saving,
+    importError,
+    // handlers
+    resetForm,
+    handleTest,
+    handleSave,
+    handleStartImport,
+    handleDelete,
+    openEdit,
+    handleEditSave,
+    handleSyncNow,
+    handleIntervalChange,
+    toggleExcluded,
+  };
+}
diff --git a/src/hooks/useMailUpload.ts b/src/hooks/useMailUpload.ts
new file mode 100644
index 0000000..40e4c09
--- /dev/null
+++ b/src/hooks/useMailUpload.ts
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState, useRef } from "react";
+import {
+  uploadMailFilesUser,
+  getUploadProgressUser,
+  type UploadJob,
+} from "@/lib/api";
+
+export function useMailUpload(onImportDone: () => void) {
+  const [uploadOpen, setUploadOpen] = useState(false);
+  const [uploadDragging, setUploadDragging] = useState(false);
+  const [uploadJob, setUploadJob] = useState<UploadJob | null>(null);
+  const [uploadError, setUploadError] = useState("");
+  const [uploadLoading, setUploadLoading] = useState(false);
+  const uploadPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  async function handleUploadFiles(files: FileList | File[]) {
+    const allowed = Array.from(files).filter((f) => {
+      const n = f.name.toLowerCase();
+      return n.endsWith(".eml") || n.endsWith(".mbox");
+    });
+    if (allowed.length === 0) {
+      setUploadError("Nur .eml und .mbox Dateien erlaubt.");
+      return;
+    }
+    setUploadError("");
+    setUploadJob(null);
+    setUploadLoading(true);
+    try {
+      const { job_id } = await uploadMailFilesUser(allowed);
+      uploadPollRef.current = setInterval(async () => {
+        try {
+          const job = await getUploadProgressUser(job_id);
+          setUploadJob(job);
+          if (job.status !== "running") {
+            clearInterval(uploadPollRef.current!);
+            uploadPollRef.current = null;
+            setUploadLoading(false);
+            // Refresh search results after successful import
+            if (job.status === "done") onImportDone();
+          }
+        } catch {
+          clearInterval(uploadPollRef.current!);
+          uploadPollRef.current = null;
+          setUploadLoading(false);
+        }
+      }, 1500);
+    } catch (e) {
+      setUploadError(e instanceof Error ? e.message : "Upload fehlgeschlagen.");
+      setUploadLoading(false);
+    }
+  }
+
+  function handleUploadClose() {
+    if (uploadPollRef.current) {
+      clearInterval(uploadPollRef.current);
+      uploadPollRef.current = null;
+    }
+    setUploadOpen(false);
+    setUploadJob(null);
+    setUploadError("");
+    setUploadLoading(false);
+  }
+
+  return {
+    uploadOpen,
+    setUploadOpen,
+    uploadDragging,
+    setUploadDragging,
+    uploadJob,
+    uploadError,
+    uploadLoading,
+    handleUploadFiles,
+    handleUploadClose,
+  };
+}
diff --git a/src/hooks/usePasswordChange.ts b/src/hooks/usePasswordChange.ts
new file mode 100644
index 0000000..6a5b6a5
--- /dev/null
+++ b/src/hooks/usePasswordChange.ts
@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+import { changePassword } from "@/lib/api";
+
+export function usePasswordChange() {
+  const [currentPw, setCurrentPw] = useState("");
+  const [newPw, setNewPw] = useState("");
+  const [confirmPw, setConfirmPw] = useState("");
+  const [pwError, setPwError] = useState("");
+  const [pwSuccess, setPwSuccess] = useState("");
+  const [pwLoading, setPwLoading] = useState(false);
+
+  async function handleChangePassword(e: React.FormEvent) {
+    e.preventDefault();
+    setPwError("");
+    setPwSuccess("");
+
+    if (newPw.length < 8) {
+      setPwError("Das neue Passwort muss mindestens 8 Zeichen lang sein.");
+      return;
+    }
+    if (newPw !== confirmPw) {
+      setPwError("Die Passwoerter stimmen nicht ueberein.");
+      return;
+    }
+
+    setPwLoading(true);
+    try {
+      await changePassword(currentPw, newPw);
+      setPwSuccess("Passwort wurde erfolgreich geaendert.");
+      setCurrentPw("");
+      setNewPw("");
+      setConfirmPw("");
+    } catch (err) {
+      setPwError(err instanceof Error ? err.message : "Fehler beim Aendern des Passworts");
+    } finally {
+      setPwLoading(false);
+    }
+  }
+
+  return {
+    currentPw,
+    setCurrentPw,
+    newPw,
+    setNewPw,
+    confirmPw,
+    setConfirmPw,
+    pwError,
+    pwSuccess,
+    pwLoading,
+    handleChangePassword,
+  };
+}
diff --git a/src/hooks/useProfileSettings.ts b/src/hooks/useProfileSettings.ts
new file mode 100644
index 0000000..66d0d3e
--- /dev/null
+++ b/src/hooks/useProfileSettings.ts
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { changeEmail, updatePreferences, type MeResponse } from "@/lib/api";
+
+export function useProfileSettings(
+  user: MeResponse | null,
+  refresh: () => Promise<void> | void
+) {
+  // ── Email state ───────────────────────────────────────────────────────
+  const [email, setEmail] = useState("");
+  const [emailInitialized, setEmailInitialized] = useState(false);
+  const [emailError, setEmailError] = useState("");
+  const [emailSuccess, setEmailSuccess] = useState("");
+  const [emailLoading, setEmailLoading] = useState(false);
+
+  // ── Listenanzahl (Eintraege pro Seite) ────────────────────────────────
+  const [listPageSize, setListPageSize] = useState("25");
+  const [listPageSizeInitialized, setListPageSizeInitialized] = useState(false);
+  const [listPageSizeError, setListPageSizeError] = useState("");
+  const [listPageSizeSuccess, setListPageSizeSuccess] = useState("");
+  const [listPageSizeLoading, setListPageSizeLoading] = useState(false);
+
+  // Initialize email from user data once available
+  if (user && !emailInitialized) {
+    setEmail(user.email || "");
+    setEmailInitialized(true);
+  }
+
+  // Initialize list page size from user data once available
+  if (user && !listPageSizeInitialized) {
+    setListPageSize(String(user.list_page_size || 25));
+    setListPageSizeInitialized(true);
+  }
+
+  async function handleChangeEmail(e: React.FormEvent) {
+    e.preventDefault();
+    setEmailError("");
+    setEmailSuccess("");
+
+    if (!email || !email.includes("@")) {
+      setEmailError("Bitte eine gueltige E-Mail-Adresse eingeben.");
+      return;
+    }
+
+    setEmailLoading(true);
+    try {
+      const result = await changeEmail(email);
+      setEmail(result.email);
+      setEmailSuccess("E-Mail-Adresse wurde erfolgreich geaendert.");
+    } catch (err) {
+      setEmailError(err instanceof Error ? err.message : "Fehler beim Aendern der E-Mail");
+    } finally {
+      setEmailLoading(false);
+    }
+  }
+
+  async function handleChangeListPageSize(value: string) {
+    setListPageSizeError("");
+    setListPageSizeSuccess("");
+    const parsed = Number(value);
+
+    setListPageSizeLoading(true);
+    try {
+      const result = await updatePreferences(parsed);
+      setListPageSize(String(result.list_page_size));
+      setListPageSizeSuccess("Eintraege pro Seite wurden gespeichert.");
+      await refresh();
+    } catch (err) {
+      setListPageSizeError(err instanceof Error ? err.message : "Fehler beim Speichern");
+    } finally {
+      setListPageSizeLoading(false);
+    }
+  }
+
+  return {
+    email,
+    setEmail,
+    emailError,
+    emailSuccess,
+    emailLoading,
+    handleChangeEmail,
+    listPageSize,
+    listPageSizeError,
+    listPageSizeSuccess,
+    listPageSizeLoading,
+    handleChangeListPageSize,
+  };
+}
diff --git a/src/hooks/useSavedSearches.ts b/src/hooks/useSavedSearches.ts
new file mode 100644
index 0000000..4bd77ca
--- /dev/null
+++ b/src/hooks/useSavedSearches.ts
@@ -0,0 +1,163 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  searchEmails,
+  listSavedSearches,
+  createSavedSearch,
+  deleteSavedSearch,
+  type SearchHit,
+  type SavedSearch,
+} from "@/lib/api";
+
+type SavedSearchUser = { role: string } | null;
+
+interface UseSavedSearchesParams {
+  user: SavedSearchUser;
+  pageSize: number;
+  query: string;
+  fromFilter: string;
+  toFilter: string;
+  dateFrom: string;
+  dateTo: string;
+  hasAttachment: boolean | undefined;
+  setQuery: (v: string) => void;
+  setFromFilter: (v: string) => void;
+  setToFilter: (v: string) => void;
+  setDateFrom: (v: string) => void;
+  setDateTo: (v: string) => void;
+  setHasAttachment: (v: boolean | undefined) => void;
+  setResults: (v: SearchHit[]) => void;
+  setTotal: (v: number) => void;
+  setPage: (v: number) => void;
+  setSearching: (v: boolean) => void;
+  setSearched: (v: boolean) => void;
+}
+
+export function useSavedSearches(params: UseSavedSearchesParams) {
+  const {
+    user,
+    pageSize,
+    query,
+    fromFilter,
+    toFilter,
+    dateFrom,
+    dateTo,
+    hasAttachment,
+    setQuery,
+    setFromFilter,
+    setToFilter,
+    setDateFrom,
+    setDateTo,
+    setHasAttachment,
+    setResults,
+    setTotal,
+    setPage,
+    setSearching,
+    setSearched,
+  } = params;
+
+  const [savedSearches, setSavedSearches] = useState<SavedSearch[]>([]);
+  const [savedLoading, setSavedLoading] = useState(false);
+  const [savePopoverOpen, setSavePopoverOpen] = useState(false);
+  const [saveName, setSaveName] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [savedListOpen, setSavedListOpen] = useState(false);
+
+  // Load saved searches on mount
+  useEffect(() => {
+    if (!user || user.role === "superadmin") return;
+    setSavedLoading(true);
+    listSavedSearches()
+      .then((list) => setSavedSearches(list || []))
+      .catch(() => setSavedSearches([]))
+      .finally(() => setSavedLoading(false));
+  }, [user]);
+
+  function buildCurrentQuery(): Record<string, string> {
+    const q: Record<string, string> = {};
+    if (query) q.q = query;
+    if (fromFilter) q.from = fromFilter;
+    if (toFilter) q.to = toFilter;
+    if (dateFrom) q.date_from = dateFrom;
+    if (dateTo) q.date_to = dateTo;
+    if (hasAttachment) q.has_attachment = "true";
+    return q;
+  }
+
+  async function handleSaveSearch() {
+    if (!saveName.trim()) return;
+    setSaving(true);
+    try {
+      const saved = await createSavedSearch(saveName.trim(), buildCurrentQuery());
+      setSavedSearches((prev) => [saved, ...prev]);
+      setSaveName("");
+      setSavePopoverOpen(false);
+    } catch (e) {
+      alert(`Suche speichern fehlgeschlagen: ${e instanceof Error ? e.message : e}`);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handleApplySavedSearch(s: SavedSearch) {
+    setQuery(s.query.q || "");
+    setFromFilter(s.query.from || "");
+    setToFilter(s.query.to || "");
+    setDateFrom(s.query.date_from || "");
+    setDateTo(s.query.date_to || "");
+    setHasAttachment(s.query.has_attachment === "true" ? true : undefined);
+    setSavedListOpen(false);
+    // Trigger search after state updates
+    setTimeout(() => {
+      // We need to search with the saved query directly since state isn't updated yet
+      setSearching(true);
+      searchEmails({
+        q: s.query.q || undefined,
+        from: s.query.from || undefined,
+        to: s.query.to || undefined,
+        date_from: s.query.date_from || undefined,
+        date_to: s.query.date_to || undefined,
+        has_attachment: s.query.has_attachment === "true" ? true : undefined,
+        page: 1,
+        page_size: pageSize,
+      })
+        .then((res) => {
+          setResults(res.hits || []);
+          setTotal(res.total);
+          setPage(1);
+          setSearched(true);
+        })
+        .catch(() => {
+          setResults([]);
+          setTotal(0);
+        })
+        .finally(() => setSearching(false));
+    }, 0);
+  }
+
+  async function handleDeleteSavedSearch(id: number) {
+    try {
+      await deleteSavedSearch(id);
+      setSavedSearches((prev) => prev.filter((s) => s.id !== id));
+    } catch (e) {
+      alert(`Loeschen fehlgeschlagen: ${e instanceof Error ? e.message : e}`);
+    }
+  }
+
+  return {
+    savedSearches,
+    savedLoading,
+    savePopoverOpen,
+    setSavePopoverOpen,
+    saveName,
+    setSaveName,
+    saving,
+    savedListOpen,
+    setSavedListOpen,
+    buildCurrentQuery,
+    handleSaveSearch,
+    handleApplySavedSearch,
+    handleDeleteSavedSearch,
+  };
+}
diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts
new file mode 100644
index 0000000..ae2b2e3
--- /dev/null
+++ b/src/hooks/useSearch.ts
@@ -0,0 +1,101 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { searchEmails, type SearchHit } from "@/lib/api";
+
+const DEFAULT_PAGE_SIZE = 25;
+
+type SearchUser = { role: string } | null;
+
+export function useSearch(user: SearchUser, pageSize: number) {
+  const [query, setQuery] = useState("");
+  const [fromFilter, setFromFilter] = useState("");
+  const [toFilter, setToFilter] = useState("");
+  const [dateFrom, setDateFrom] = useState("");
+  const [dateTo, setDateTo] = useState("");
+  const [sort, setSort] = useState("date_desc");
+  const [hasAttachment, setHasAttachment] = useState<boolean | undefined>(undefined);
+
+  const [results, setResults] = useState<SearchHit[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [searching, setSearching] = useState(false);
+  const [searched, setSearched] = useState(false);
+
+  const doSearch = useCallback(
+    async (p: number) => {
+      setSearching(true);
+      try {
+        const res = await searchEmails({
+          q: query || undefined,
+          from: fromFilter || undefined,
+          to: toFilter || undefined,
+          date_from: dateFrom || undefined,
+          date_to: dateTo || undefined,
+          sort: sort !== "date_desc" ? sort : undefined,
+          has_attachment: hasAttachment,
+          page: p,
+          page_size: pageSize,
+        });
+        setResults(res.hits || []);
+        setTotal(res.total);
+        setPage(p);
+        setSearched(true);
+      } catch {
+        setResults([]);
+        setTotal(0);
+      } finally {
+        setSearching(false);
+      }
+    },
+    [query, fromFilter, toFilter, dateFrom, dateTo, sort, hasAttachment, pageSize]
+  );
+
+  // Alle Mails beim Öffnen der Seite laden — direkt, ohne useCallback-Closure
+  useEffect(() => {
+    if (!user || user.role === "superadmin") return;
+    setSearching(true);
+    searchEmails({ page: 1, page_size: pageSize })
+      .then((res) => {
+        setResults(res.hits || []);
+        setTotal(res.total);
+        setPage(1);
+        setSearched(true);
+      })
+      .catch(() => {
+        setResults([]);
+        setTotal(0);
+      })
+      .finally(() => setSearching(false));
+  }, [user, pageSize]);
+
+  return {
+    query,
+    setQuery,
+    fromFilter,
+    setFromFilter,
+    toFilter,
+    setToFilter,
+    dateFrom,
+    setDateFrom,
+    dateTo,
+    setDateTo,
+    sort,
+    setSort,
+    hasAttachment,
+    setHasAttachment,
+    results,
+    setResults,
+    total,
+    setTotal,
+    page,
+    setPage,
+    searching,
+    setSearching,
+    searched,
+    setSearched,
+    doSearch,
+  };
+}
+
+export { DEFAULT_PAGE_SIZE };
diff --git a/src/hooks/useSystemInfo.ts b/src/hooks/useSystemInfo.ts
new file mode 100644
index 0000000..59c3fac
--- /dev/null
+++ b/src/hooks/useSystemInfo.ts
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getSystemInfo, type SystemInfo } from "@/lib/api";
+
+export function useSystemInfo() {
+  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
+  const [systemInfoLoading, setSystemInfoLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    setSystemInfoLoading(true);
+    getSystemInfo()
+      .then((info) => {
+        if (!cancelled) setSystemInfo(info);
+      })
+      .catch(() => {
+        if (!cancelled) setSystemInfo(null);
+      })
+      .finally(() => {
+        if (!cancelled) setSystemInfoLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return { systemInfo, systemInfoLoading };
+}
diff --git a/src/hooks/useTenantLogos.ts b/src/hooks/useTenantLogos.ts
new file mode 100644
index 0000000..b2735a9
--- /dev/null
+++ b/src/hooks/useTenantLogos.ts
@@ -0,0 +1,124 @@
+"use client";
+
+import { useState, type Dispatch, type SetStateAction } from "react";
+import {
+  getTenantLogoUrl,
+  uploadTenantLogo,
+  deleteTenantLogo,
+  uploadMyTenantLogo,
+  deleteMyTenantLogo,
+  type Tenant,
+} from "@/lib/api";
+
+interface OwnLogoController {
+  setOwnLogoPreviewUrl: Dispatch<SetStateAction<string | null>>;
+  setOwnLogoUploading: Dispatch<SetStateAction<boolean>>;
+  setOwnLogoError: Dispatch<SetStateAction<string>>;
+}
+
+export function useTenantLogos(
+  setTenants: Dispatch<SetStateAction<Tenant[]>>,
+  own: OwnLogoController,
+) {
+  // Logo dialog (superadmin: any tenant)
+  const [logoDialogTenant, setLogoDialogTenant] = useState<Tenant | null>(null);
+  const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
+  const [logoUploading, setLogoUploading] = useState(false);
+  const [logoError, setLogoError] = useState("");
+
+  async function openLogoDialog(t: Tenant) {
+    setLogoDialogTenant(t);
+    setLogoError("");
+    setLogoPreviewUrl(null);
+    if (t.has_logo) {
+      try {
+        const res = await fetch(getTenantLogoUrl(t.id), { credentials: "include" });
+        if (res.ok) {
+          const blob = await res.blob();
+          setLogoPreviewUrl(URL.createObjectURL(blob));
+        }
+      } catch {
+        // preview not critical
+      }
+    }
+  }
+
+  async function handleLogoUpload(file: File) {
+    if (!logoDialogTenant) return;
+    setLogoUploading(true);
+    setLogoError("");
+    try {
+      await uploadTenantLogo(logoDialogTenant.id, file);
+      const res = await fetch(getTenantLogoUrl(logoDialogTenant.id), { credentials: "include" });
+      if (res.ok) {
+        const blob = await res.blob();
+        setLogoPreviewUrl(URL.createObjectURL(blob));
+      }
+      setTenants((prev) => prev.map((t) => t.id === logoDialogTenant.id ? { ...t, has_logo: true } : t));
+    } catch (err: unknown) {
+      setLogoError(err instanceof Error ? err.message : "Upload fehlgeschlagen.");
+    } finally {
+      setLogoUploading(false);
+    }
+  }
+
+  async function handleLogoDelete() {
+    if (!logoDialogTenant) return;
+    setLogoUploading(true);
+    setLogoError("");
+    try {
+      await deleteTenantLogo(logoDialogTenant.id);
+      setLogoPreviewUrl(null);
+      setTenants((prev) => prev.map((t) => t.id === logoDialogTenant.id ? { ...t, has_logo: false } : t));
+    } catch (err: unknown) {
+      setLogoError(err instanceof Error ? err.message : "Löschen fehlgeschlagen.");
+    } finally {
+      setLogoUploading(false);
+    }
+  }
+
+  // Logo handlers (domain_admin: own tenant)
+  async function handleOwnLogoUpload(file: File) {
+    own.setOwnLogoUploading(true);
+    own.setOwnLogoError("");
+    try {
+      await uploadMyTenantLogo(file);
+      const res = await fetch(`/api/tenant/logo`, { credentials: "include" });
+      if (res.ok) {
+        const blob = await res.blob();
+        own.setOwnLogoPreviewUrl(URL.createObjectURL(blob));
+      }
+    } catch (err: unknown) {
+      own.setOwnLogoError(err instanceof Error ? err.message : "Upload fehlgeschlagen.");
+    } finally {
+      own.setOwnLogoUploading(false);
+    }
+  }
+
+  async function handleOwnLogoDelete() {
+    own.setOwnLogoUploading(true);
+    own.setOwnLogoError("");
+    try {
+      await deleteMyTenantLogo();
+      own.setOwnLogoPreviewUrl(null);
+    } catch (err: unknown) {
+      own.setOwnLogoError(err instanceof Error ? err.message : "Löschen fehlgeschlagen.");
+    } finally {
+      own.setOwnLogoUploading(false);
+    }
+  }
+
+  return {
+    logoDialogTenant,
+    setLogoDialogTenant,
+    logoPreviewUrl,
+    setLogoPreviewUrl,
+    logoUploading,
+    logoError,
+    openLogoDialog,
+    handleLogoUpload,
+    handleLogoDelete,
+    handleOwnLogoUpload,
+    handleOwnLogoDelete,
+  };
+}
diff --git a/src/hooks/useTotpSettings.ts b/src/hooks/useTotpSettings.ts
new file mode 100644
index 0000000..a18c372
--- /dev/null
+++ b/src/hooks/useTotpSettings.ts
@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { getTOTPSetup, confirmTOTPSetup, disableTOTP } from "@/lib/api";
+
+export function useTotpSettings() {
+  const [totpEnabled, setTotpEnabled] = useState(false);
+  const [showSetup, setShowSetup] = useState(false);
+  const [qrCode, setQrCode] = useState("");
+  const [secret, setSecret] = useState("");
+  const [totpCode, setTotpCode] = useState("");
+  const [totpError, setTotpError] = useState("");
+  const [totpSuccess, setTotpSuccess] = useState("");
+  const [totpLoading, setTotpLoading] = useState(false);
+  const [disableDialogOpen, setDisableDialogOpen] = useState(false);
+  const [disableCode, setDisableCode] = useState("");
+  const [disableError, setDisableError] = useState("");
+  const [disableLoading, setDisableLoading] = useState(false);
+
+  async function handleSetupTOTP() {
+    setTotpError("");
+    setTotpSuccess("");
+    setTotpLoading(true);
+    try {
+      const data = await getTOTPSetup();
+      setQrCode(data.qr_code || "");
+      setSecret(data.secret);
+      setShowSetup(true);
+      setTotpCode("");
+    } catch (err) {
+      setTotpError(err instanceof Error ? err.message : "TOTP-Setup fehlgeschlagen");
+    } finally {
+      setTotpLoading(false);
+    }
+  }
+
+  async function handleConfirmTOTP(e: React.FormEvent) {
+    e.preventDefault();
+    setTotpError("");
+    setTotpLoading(true);
+    try {
+      await confirmTOTPSetup(totpCode);
+      setTotpEnabled(true);
+      setShowSetup(false);
+      setTotpSuccess("2FA wurde erfolgreich aktiviert.");
+      setQrCode("");
+      setSecret("");
+      setTotpCode("");
+    } catch (err) {
+      setTotpError(err instanceof Error ? err.message : "Ungueltiger Code");
+    } finally {
+      setTotpLoading(false);
+    }
+  }
+
+  async function handleDisableTOTP() {
+    setDisableError("");
+    setDisableLoading(true);
+    try {
+      await disableTOTP(disableCode);
+      setTotpEnabled(false);
+      setDisableDialogOpen(false);
+      setDisableCode("");
+      setTotpSuccess("2FA wurde deaktiviert.");
+    } catch (err) {
+      setDisableError(err instanceof Error ? err.message : "Ungueltiger Code");
+    } finally {
+      setDisableLoading(false);
+    }
+  }
+
+  function cancelSetup() {
+    setShowSetup(false);
+    setQrCode("");
+    setSecret("");
+    setTotpCode("");
+    setTotpError("");
+  }
+
+  function openDisableDialog() {
+    setDisableDialogOpen(true);
+    setDisableCode("");
+    setDisableError("");
+  }
+
+  return {
+    totpEnabled,
+    showSetup,
+    qrCode,
+    secret,
+    totpCode,
+    setTotpCode,
+    totpError,
+    totpSuccess,
+    totpLoading,
+    disableDialogOpen,
+    setDisableDialogOpen,
+    disableCode,
+    setDisableCode,
+    disableError,
+    disableLoading,
+    handleSetupTOTP,
+    handleConfirmTOTP,
+    handleDisableTOTP,
+    cancelSetup,
+    openDisableDialog,
+  };
+}