Refactor root admin dashboards and settings

app/root/maintenance/page.tsx

@@ -17,7 +17,7 @@ const copy = {
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   portfolio: "Portfolio",
   maintenanceText: "Wenn aktiv, werden alle Seiten auf die Coming Soon Seite weitergeleitet.",
   maintenanceOn: "Aktiv",

app/root/marquee/page.tsx

@@ -18,7 +18,7 @@ const copy = {
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   marquee: "Marquee",
   smtp: "SMTP",
   portfolio: "Portfolio",

app/root/media/actions.ts

@@ -43,7 +43,6 @@ export async function createMediaAssetAction(formData: FormData) {
       kind,
       label: String(formData.get("label") ?? ""),
       uploadFile: formData.get("file"),
-      externalUrl: String(formData.get("externalUrl") ?? ""),
     });
 
     revalidateMediaPages();

app/root/media/page.tsx

@@ -1,29 +1,12 @@
-/* eslint-disable @next/next/no-img-element */
-
-import { ExternalLink, FileType2, ImageIcon, Link2, Tag, Trash2, Upload } from "lucide-react";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 
-import { MotionFade } from "@/components/motion-fade";
 import { FlashMessage } from "@/components/root/flash-message";
+import { MediaLibraryManager } from "@/components/root/media-library-manager";
+import { MotionFade } from "@/components/motion-fade";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
-import { AppCard } from "@/components/ui/app-card";
-import { Button } from "@/components/ui/button";
-import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { getAdminMediaAssets } from "@/lib/media";
 
-import { createMediaAssetAction, deleteMediaAssetAction } from "./actions";
-
 export const dynamic = "force-dynamic";
 
 const copy = {
@@ -33,21 +16,10 @@ const copy = {
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   portfolio: "Portfolio",
   logout: "Ausloggen",
   backToSite: "Zur Website",
-  createTitle: "Neue Datei",
-  createDescription: "Datei hochladen oder externe URL zentral fuer spaetere Wiederverwendung speichern.",
-  label: "Bezeichnung",
-  kind: "Typ",
-  uploadFile: "Datei hochladen",
-  externalUrl: "Externe URL",
-  saveMedia: "Datei speichern",
-  open: "Oeffnen",
-  delete: "Loeschen",
-  usages: "Verwendungen",
-  noAssets: "Noch keine Dateien vorhanden.",
 };
 
 type RootMediaPageProps = {
@@ -92,138 +64,7 @@ export default async function RootMediaPage({ searchParams }: RootMediaPageProps
           </MotionFade>
         ) : null}
 
-        <MotionFade delay={0.15}>
+        <MediaLibraryManager mediaAssets={mediaAssets} />
-          <AppCard>
-            <CardHeader>
-              <CardTitle>{copy.createTitle}</CardTitle>
-              <CardDescription>{copy.createDescription}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <form action={createMediaAssetAction} className="grid gap-4 md:grid-cols-2">
-                <div className="space-y-2">
-                  <Label htmlFor="label" className="sr-only">
-                    {copy.label}
-                  </Label>
-                  <div className="relative">
-                    <Tag className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                    <Input id="label" name="label" required placeholder={copy.label} className="pl-9" />
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="kind" className="sr-only">
-                    {copy.kind}
-                  </Label>
-                  <div className="relative">
-                    <FileType2 className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                    <Select name="kind" defaultValue="IMAGE">
-                      <SelectTrigger id="kind" className="pl-9">
-                        <SelectValue placeholder={copy.kind} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="IMAGE">IMAGE</SelectItem>
-                        <SelectItem value="DOCUMENT">DOCUMENT</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <div className="space-y-2 md:col-span-2">
-                  <Label htmlFor="file" className="sr-only">
-                    {copy.uploadFile}
-                  </Label>
-                  <div className="relative">
-                    <Upload className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                    <Input id="file" name="file" type="file" accept="image/*,.svg,.pdf" className="pl-9 file:mr-3" />
-                  </div>
-                </div>
-
-                <div className="space-y-2 md:col-span-2">
-                  <Label htmlFor="externalUrl" className="sr-only">
-                    {copy.externalUrl}
-                  </Label>
-                  <div className="relative">
-                    <Link2 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                    <Input id="externalUrl" name="externalUrl" placeholder={copy.externalUrl} className="pl-9" />
-                  </div>
-                </div>
-
-                <div className="md:col-span-2">
-                  <Button type="submit">
-                    <ImageIcon className="h-4 w-4" />
-                    {copy.saveMedia}
-                  </Button>
-                </div>
-              </form>
-            </CardContent>
-          </AppCard>
-        </MotionFade>
-
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-          {mediaAssets.map((asset, index) => (
-            <MotionFade key={asset.id} delay={0.18 + index * 0.04}>
-              <AppCard>
-                <CardHeader>
-                  <CardTitle className="text-base">{asset.label}</CardTitle>
-                  <CardDescription className="flex flex-wrap gap-2">
-                    <span>{asset.kind}</span>
-                    <span>{asset.source}</span>
-                    <span>{asset.usages.length} {copy.usages}</span>
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  {asset.kind === "IMAGE" ? (
-                    <div className="overflow-hidden rounded-nested border bg-card">
-                      <img src={asset.url} alt={asset.label} className="h-48 w-full object-cover" />
-                    </div>
-                  ) : (
-                    <div className="rounded-nested border bg-card px-4 py-6 text-sm text-muted-foreground">
-                      {asset.fileName}
-                    </div>
-                  )}
-
-                  <div className="space-y-2 text-sm text-muted-foreground">
-                    <p className="truncate">{asset.url}</p>
-                    <div className="flex flex-wrap gap-3">
-                      <Link href={asset.url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 text-foreground">
-                        <ExternalLink className="h-4 w-4" />
-                        {copy.open}
-                      </Link>
-                    </div>
-                  </div>
-
-                  {asset.usages.length > 0 ? (
-                    <div className="space-y-2 rounded-nested border bg-muted/40 px-4 py-3 text-xs text-muted-foreground">
-                      {asset.usages.map((usage) => (
-                        <p key={usage.id}>
-                          {usage.usageType} / {usage.entityType} / {usage.fieldKey}
-                        </p>
-                      ))}
-                    </div>
-                  ) : null}
-
-                  <form action={deleteMediaAssetAction}>
-                    <input type="hidden" name="assetId" value={asset.id} />
-                    <Button type="submit" variant="destructive" disabled={asset.usages.length > 0}>
-                      <Trash2 className="h-4 w-4" />
-                      {copy.delete}
-                    </Button>
-                  </form>
-                </CardContent>
-              </AppCard>
-            </MotionFade>
-          ))}
-        </div>
-
-        {mediaAssets.length === 0 ? (
-          <MotionFade delay={0.2}>
-            <AppCard>
-              <CardContent className="p-6 text-sm text-muted-foreground">
-                {copy.noAssets}
-              </CardContent>
-            </AppCard>
-          </MotionFade>
-        ) : null}
       </div>
     </RootDashboardShell>
   );

app/root/page.tsx

@@ -1,33 +1,15 @@
-import {
+import { FolderKanban, ImageIcon, LockKeyhole, ShieldAlert } from "lucide-react";
-  ExternalLink,
-  FolderKanban,
-  Globe2,
-  ImageIcon,
-  LockKeyhole,
-  ShieldAlert,
-  Shapes,
-} from "lucide-react";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 
 import { Container } from "@/components/layout/container";
+import { StatsCard } from "@/components/dashboard/stats-card";
 import { MotionFade } from "@/components/motion-fade";
-import { DashboardCard } from "@/components/dashboard/dashboard-card";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
-import { Badge, type BadgeProps } from "@/components/ui/badge";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import {
   clearAdminSessionCookie,
   getAdminLockState,
@@ -40,10 +22,7 @@ import {
 } from "@/lib/admin-auth";
 import { getMaintenanceMode } from "@/lib/app-config";
 import { getAdminMediaAssets } from "@/lib/media";
-import {
+import { getAdminPortfolioCategories, getAdminPortfolioProjects } from "@/lib/portfolio";
-  getAdminPortfolioCategories,
-  getAdminPortfolioProjects,
-} from "@/lib/portfolio";
 
 type RootPageProps = {
   searchParams?: {
@@ -55,31 +34,15 @@ export const dynamic = "force-dynamic";
 
 const copy = {
   title: "Uebersicht",
-  subtitle: "Interner Bereich fuer Kennzahlen und zentrale Navigation.",
+  subtitle: "Kompakter Status zu Portfolio, Media und Wartung.",
   overview: "Uebersicht",
   maintenance: "Wartungsmodus",
-  maintenanceTitle: "Wartungsmodus",
-  maintenanceVisitorsClosed: "Website fuer Besucher geschlossen",
-  maintenanceVisitorsShort: "Besucher gesperrt",
-  maintenanceDescription:
-    "Wenn aktiv, werden alle Seiten auf die Coming Soon Seite weitergeleitet.",
-  maintenanceOpen: "Website fuer Besucher offen",
-  maintenanceAction: "Zur Wartungsseite",
-  uiKitTitle: "UI Kit",
-  uiKitDescription: "Globale Referenz fuer Cards, Buttons, Inputs und Surface Levels.",
-  uiKitAction: "Zur UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   portfolio: "Portfolio",
-  portfolioTitle: "Portfolio",
+  uiKit: "UI Kit",
-  portfolioDescription: "Kategorien, Projekte, Abschnitte und Dateien verwalten.",
+  logout: "Ausloggen",
-  portfolioAction: "Zum Portfolio",
+  backToSite: "Zur Website",
-  mediaTitle: "Media Library",
-  mediaDescription: "Uploads, externe URLs und Verwendungsorte zentral verwalten.",
-  mediaAction: "Zur Media Library",
-  siteSettingsTitle: "SEO",
-  siteSettingsDescription: "Favicon, Site Name, Description, Subhead und globale SEO Defaults verwalten.",
-  siteSettingsAction: "Zu SEO",
   loginTitle: "Root Login",
   loginText: "Nur autorisierte Nutzer duerfen diesen Bereich verwenden.",
   passwordLabel: "Passwort",
@@ -88,34 +51,13 @@ const copy = {
   lockedLogin: "Zu viele Fehlversuche. Bitte spaeter erneut versuchen.",
   configMissing: "ADMIN_PASSWORD und ADMIN_AUTH_SECRET fehlen in env.",
   basicAuthMissing: "ROOT_BASIC_AUTH_USER und ROOT_BASIC_AUTH_PASS fehlen in env.",
-  logout: "Ausloggen",
+  maintenanceOn: "Aktiv",
-  backToSite: "Zur Website",
+  maintenanceOff: "Inaktiv",
-  uiKit: "UI Kit",
+  portfolioOnline: "Portfolio online",
-  tableTitle: "Bereiche",
+  mediaImages: "Media Images",
-  tableDescription: "Direkter Zugriff auf alle Verwaltungsbereiche mit aktuellem Status.",
+  maintenanceStatus: "Maintenance",
-  tableSection: "Bereich",
+  drafts: "Drafts",
-  tableSummary: "Zusammenfassung",
+  activeCategories: "Active Categories",
-  tableStatus: "Status",
-  tableAction: "Aktion",
-  maintenanceStatusOn: "Aktiv",
-  maintenanceStatusOff: "Inaktiv",
-  authStatusOk: "Bereit",
-  authStatusWarning: "Pruefen",
-  authCard: "Root Zugang",
-  authDescription: "Admin Passwort und Session Signatur sind gesetzt.",
-  authDescriptionWarning: "Eine oder mehrere Root Variablen fehlen und sollten geprueft werden.",
-  mediaCountDescription: "Verfuegbare Dateien fuer Portfolio und Inhalte.",
-  projectCountDescription: "Gespeicherte Portfolio Projekte im System.",
-  categoryCountDescription: "Portfolio Kategorien mit eigener Sortierung.",
-  systemStatusTitle: "Systemstatus",
-  systemStatusDescription: "Technischer Zustand des Root Bereichs und der wichtigsten Inhaltsbereiche.",
-  maintenanceLabel: "Wartung",
-  contentLabel: "Inhalte",
-  contentDescription: "Portfolio, Media und Kategorien sind direkt aus diesem Bereich erreichbar.",
-  publishedProjects: "Veroeffentlicht",
-  totalProjects: "Projekte",
-  totalCategories: "Kategorien",
-  totalMedia: "Dateien",
 };
 
 export default async function RootPage({ searchParams }: RootPageProps) {
@@ -232,57 +174,11 @@ export default async function RootPage({ searchParams }: RootPageProps) {
     getAdminPortfolioProjects(),
     getAdminMediaAssets(),
   ]);
+
   const publishedProjects = projects.filter((project) => project.isPublished).length;
-  const authHealthy = authConfigured && basicConfigured;
+  const draftProjects = projects.length - publishedProjects;
-  const sectionRows: Array<{
+  const activeCategories = categories.filter((category) => category.isActive).length;
-    label: string;
+  const imageCount = mediaAssets.filter((asset) => asset.kind === "IMAGE").length;
-    summary: string;
-    status: string;
-    href: string;
-    badgeVariant: BadgeProps["variant"];
-    action: string;
-  }> = [
-    {
-      label: copy.maintenanceTitle,
-      summary: copy.maintenanceDescription,
-      status: maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff,
-      href: "/root/maintenance",
-      badgeVariant: maintenanceEnabled ? "warning" : "success",
-      action: copy.maintenanceAction,
-    },
-    {
-      label: copy.mediaTitle,
-      summary: `${mediaAssets.length} ${copy.totalMedia}`,
-      status: copy.authStatusOk,
-      href: "/root/media",
-      badgeVariant: "outline" as const,
-      action: copy.mediaAction,
-    },
-    {
-      label: copy.siteSettingsTitle,
-      summary: copy.siteSettingsDescription,
-      status: copy.authStatusOk,
-      href: "/root/site-settings",
-      badgeVariant: "outline" as const,
-      action: copy.siteSettingsAction,
-    },
-    {
-      label: copy.portfolioTitle,
-      summary: `${projects.length} ${copy.totalProjects} / ${categories.length} ${copy.totalCategories}`,
-      status: `${publishedProjects} ${copy.publishedProjects}`,
-      href: "/root/portfolio",
-      badgeVariant: "outline" as const,
-      action: copy.portfolioAction,
-    },
-    {
-      label: copy.uiKitTitle,
-      summary: copy.uiKitDescription,
-      status: copy.authStatusOk,
-      href: "/root/ui-kit",
-      badgeVariant: "outline" as const,
-      action: copy.uiKitAction,
-    },
-  ];
 
   return (
     <RootDashboardShell
@@ -293,131 +189,52 @@ export default async function RootPage({ searchParams }: RootPageProps) {
       headerDescription={copy.subtitle}
     >
       <div className="space-y-6">
-        <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
           <MotionFade delay={0.05}>
-            <DashboardCard
+            <StatsCard
-              title={copy.maintenanceTitle}
+              title={copy.portfolioOnline}
-              value={maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff}
+              value={String(publishedProjects)}
-              description={copy.maintenanceDescription}
-              icon={ShieldAlert}
-            />
-          </MotionFade>
-          <MotionFade delay={0.1}>
-            <DashboardCard
-              title={copy.totalMedia}
-              value={String(mediaAssets.length)}
-              description={copy.mediaCountDescription}
-              icon={ImageIcon}
-            />
-          </MotionFade>
-          <MotionFade delay={0.15}>
-            <DashboardCard
-              title={copy.totalProjects}
-              value={String(projects.length)}
-              description={copy.projectCountDescription}
-              icon={Globe2}
-            />
-          </MotionFade>
-          <MotionFade delay={0.2}>
-            <DashboardCard
-              title={copy.totalCategories}
-              value={String(categories.length)}
-              description={copy.categoryCountDescription}
               icon={FolderKanban}
+              className="h-full"
+              footer={(
+                <div className="flex flex-wrap gap-x-4 gap-y-2 text-sm text-muted-foreground">
+                  <span>{copy.drafts}: {draftProjects}</span>
+                  <span>{copy.activeCategories}: {activeCategories}</span>
+                </div>
+              )}
             />
           </MotionFade>
-          <MotionFade delay={0.25}>
+
-            <DashboardCard
+          <MotionFade delay={0.1}>
-              title={copy.siteSettingsTitle}
+            <StatsCard
-              value={copy.authStatusOk}
+              title={copy.mediaImages}
-              description={copy.siteSettingsDescription}
+              value={String(imageCount)}
-              icon={Shapes}
+              icon={ImageIcon}
+              description="Anzahl der Bilder innerhalb der Media Library."
+              className="h-full"
             />
           </MotionFade>
-        </section>
 
-        <section className="grid gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(320px,1fr)]">
+          <MotionFade delay={0.15}>
-          <MotionFade delay={0.3}>
+            <StatsCard
-            <Card className="border-border/70 bg-card/95 shadow-sm">
+              title={copy.maintenanceStatus}
-              <CardHeader>
+              value={maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
-                <CardTitle>{copy.tableTitle}</CardTitle>
+              icon={ShieldAlert}
-                <CardDescription>{copy.tableDescription}</CardDescription>
+              className="h-full"
-              </CardHeader>
+              footer={(
-              <CardContent>
+                <div className="flex items-center justify-between gap-3 text-sm">
-                <Table>
+                  <span className="text-muted-foreground">
-                  <TableHeader>
+                    {maintenanceEnabled
-                    <TableRow>
+                      ? "Website ist aktuell fuer Besucher gesperrt."
-                      <TableHead>{copy.tableSection}</TableHead>
+                      : "Website ist aktuell offen."}
-                      <TableHead>{copy.tableSummary}</TableHead>
-                      <TableHead>{copy.tableStatus}</TableHead>
-                      <TableHead className="text-right">{copy.tableAction}</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {sectionRows.map((row) => (
-                      <TableRow key={row.href}>
-                        <TableCell className="font-medium">{row.label}</TableCell>
-                        <TableCell className="text-muted-foreground">{row.summary}</TableCell>
-                        <TableCell>
-                          <Badge variant={row.badgeVariant}>{row.status}</Badge>
-                        </TableCell>
-                        <TableCell className="text-right">
-                          <Button asChild variant="ghost" size="sm">
-                            <Link href={row.href}>
-                              {row.action}
-                              <ExternalLink className="h-4 w-4" />
-                            </Link>
-                          </Button>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </CardContent>
-            </Card>
-          </MotionFade>
-
-          <div className="grid gap-6">
-            <MotionFade delay={0.35}>
-              <Card className="border-border/70 bg-card/95 shadow-sm">
-                <CardHeader>
-                  <CardTitle>{copy.systemStatusTitle}</CardTitle>
-                  <CardDescription>{copy.systemStatusDescription}</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="rounded-nested border border-border bg-muted/40 p-4">
-                    <div className="flex items-center justify-between gap-3">
-                      <div>
-                        <p className="text-sm font-medium text-foreground">{copy.authCard}</p>
-                        <p className="mt-1 text-sm text-muted-foreground">
-                          {authHealthy ? copy.authDescription : copy.authDescriptionWarning}
-                        </p>
-                      </div>
-                      <Badge variant={authHealthy ? "success" : "warning"}>
-                        {authHealthy ? copy.authStatusOk : copy.authStatusWarning}
-                      </Badge>
-                    </div>
-                  </div>
-                  <Separator />
-                  <div className="space-y-3 text-sm">
-                    <div className="flex items-center justify-between gap-4">
-                      <span className="text-muted-foreground">{copy.maintenanceLabel}</span>
-                      <Badge variant={maintenanceEnabled ? "warning" : "success"}>
-                        {maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff}
-                      </Badge>
-                    </div>
-                    <div className="flex items-center justify-between gap-4">
-                      <span className="text-muted-foreground">{copy.contentLabel}</span>
-                      <span className="font-medium text-foreground">
-                        {`${publishedProjects} ${copy.publishedProjects} / ${projects.length} ${copy.totalProjects}`}
                   </span>
+                  <Badge variant={maintenanceEnabled ? "warning" : "success"}>
+                    {maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
+                  </Badge>
                 </div>
-                    <p className="text-muted-foreground">{copy.contentDescription}</p>
+              )}
-                  </div>
+            />
-                </CardContent>
-              </Card>
           </MotionFade>
-          </div>
         </section>
       </div>
     </RootDashboardShell>

app/root/portfolio/categories/page.tsx

@@ -18,7 +18,7 @@ const copy = {
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   portfolio: "Portfolio",
   logout: "Ausloggen",
   backToSite: "Zur Website",

app/root/portfolio/page.tsx

@@ -16,7 +16,7 @@ const copy = {
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   portfolio: "Portfolio",
   logout: "Ausloggen",
   backToSite: "Zur Website",

app/root/portfolio/projects/[id]/page.tsx

@@ -25,7 +25,7 @@ const copy = {
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   portfolio: "Portfolio",
   logout: "Ausloggen",
   backToSite: "Zur Website",

app/root/portfolio/projects/new/page.tsx

@@ -19,7 +19,7 @@ const copy = {
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   portfolio: "Portfolio",
   logout: "Ausloggen",
   backToSite: "Zur Website",

app/root/portfolio/projects/page.tsx

@@ -16,7 +16,7 @@ const copy = {
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   portfolio: "Portfolio",
   logout: "Ausloggen",
   backToSite: "Zur Website",

app/root/site-settings/page.tsx

@@ -17,13 +17,13 @@ import { saveSiteSettingsAction } from "./actions";
 export const dynamic = "force-dynamic";
 
 const copy = {
-  title: "SEO",
+  title: "Settings",
-  subtitle: "Globale SEO Einstellungen, Titelstruktur und Standardbilder verwalten.",
+  subtitle: "Globale Titel, Copy und Brand Assets verwalten.",
   overview: "Uebersicht",
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   smtp: "SMTP",
   portfolio: "Portfolio",
   logout: "Ausloggen",

app/root/smtp/contact-protection/page.tsx

@@ -18,7 +18,7 @@ const copy = {
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   smtp: "SMTP",
   contactProtection: "Contact Protection",
   portfolio: "Portfolio",

app/root/smtp/page.tsx

@@ -19,7 +19,7 @@ const copy = {
   maintenance: "Wartungsmodus",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   smtp: "SMTP",
   contactProtection: "Contact Protection",
   portfolio: "Portfolio",

app/root/ui-kit/page.tsx

@@ -14,7 +14,7 @@ const copy = {
   overview: "Uebersicht",
   uiKit: "UI Kit",
   media: "Media",
-  siteSettings: "SEO",
+  siteSettings: "Settings",
   portfolio: "Portfolio",
   logout: "Ausloggen",
   backToSite: "Zur Website",

components/dashboard/dashboard-card.tsx

@@ -1,6 +1,6 @@
 import type { LucideIcon } from "lucide-react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatsCard } from "@/components/dashboard/stats-card";
 
 type DashboardCardProps = {
   title: string;
@@ -16,19 +16,6 @@ export function DashboardCard({
   icon: Icon,
 }: DashboardCardProps) {
   return (
-    <Card className="border-border/70 bg-card/95 shadow-sm">
+    <StatsCard title={title} value={value} description={description} icon={Icon} />
-      <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3">
-        <div className="space-y-1">
-          <CardDescription>{title}</CardDescription>
-          <CardTitle className="text-3xl font-semibold tracking-tight">{value}</CardTitle>
-        </div>
-        <div className="rounded-nested border border-border bg-muted/60 p-2 text-muted-foreground">
-          <Icon className="h-4 w-4" />
-        </div>
-      </CardHeader>
-      <CardContent>
-        <p className="text-sm text-muted-foreground">{description}</p>
-      </CardContent>
-    </Card>
   );
 }

components/dashboard/stats-card.tsx

@@ -0,0 +1,47 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { AppCard } from "@/components/ui/app-card";
+import { CardContent } from "@/components/ui/card";
+
+type StatsCardProps = {
+  title: string;
+  value: string;
+  icon?: LucideIcon;
+  description?: string;
+  footer?: ReactNode;
+  className?: string;
+};
+
+export function StatsCard({
+  title,
+  value,
+  icon: Icon,
+  description,
+  footer,
+  className,
+}: StatsCardProps) {
+  return (
+    <AppCard level={3} className={className}>
+      <CardContent className="space-y-2.5 p-3">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <p className="text-sm font-semibold text-foreground">{title}</p>
+            <p className="mt-1 text-3xl font-semibold text-foreground">{value}</p>
+          </div>
+          {Icon ? (
+            <div className="rounded-nested border border-border bg-muted/50 p-2 text-muted-foreground">
+              <Icon className="h-4 w-4" />
+            </div>
+          ) : null}
+        </div>
+
+        {description ? (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        ) : null}
+
+        {footer ? footer : null}
+      </CardContent>
+    </AppCard>
+  );
+}

components/root/contact-protection-form.tsx

@@ -22,13 +22,13 @@ export function ContactProtectionForm({
   const [rateLimitEnabled, setRateLimitEnabled] = useState(initialSettings.rateLimit.enabled);
 
   return (
-    <form id="contact-protection-form" action={action} className="space-y-6">
+    <form id="contact-protection-form" action={action} className="grid gap-6 xl:grid-cols-2">
       <AppCard>
         <CardHeader>
           <CardTitle>Turnstile</CardTitle>
           <CardDescription>Cloudflare Schutz fuer das Kontaktformular.</CardDescription>
         </CardHeader>
-        <CardContent className="grid gap-6 md:grid-cols-2">
+        <CardContent className="grid gap-5 p-4 md:grid-cols-2">
           <div className="space-y-4 md:col-span-2">
             <label
               htmlFor="turnstileEnabled"
@@ -81,7 +81,7 @@ export function ContactProtectionForm({
           <CardTitle>Rate Limiting</CardTitle>
           <CardDescription>Begrenzung wiederholter Kontaktanfragen.</CardDescription>
         </CardHeader>
-        <CardContent className="grid gap-6 md:grid-cols-2">
+        <CardContent className="grid gap-5 p-4 md:grid-cols-2">
           <div className="space-y-4 md:col-span-2">
             <label
               htmlFor="contactRateLimitEnabled"

components/root/marquee-settings-form.tsx

@@ -1,5 +1,4 @@
 import { AppCard } from "@/components/ui/app-card";
-import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import type { MarqueeSettings } from "@/lib/marquee-settings";
@@ -21,35 +20,25 @@ export function MarqueeSettingsForm({
   initialSettings,
 }: MarqueeSettingsFormProps) {
   return (
-    <form id="marquee-settings-form" action={action} className="space-y-6">
+    <form id="marquee-settings-form" action={action} className="space-y-5">
-      <AppCard>
+      <div className="space-y-2">
-        <CardHeader>
+        <h2 className="text-lg font-semibold text-foreground">Marquee Rows</h2>
-          <CardTitle>Marquee Rows</CardTitle>
+        <p className="text-sm text-muted-foreground">Nur Deutsch bearbeiten. Die Werte werden fuer alle Sprachen uebernommen.</p>
-          <CardDescription>Nur Deutsch bearbeiten. Die Werte werden fuer alle Sprachen uebernommen.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4 rounded-nested border border-border/70 bg-background/70 p-4">
-            <div>
-              <h3 className="text-sm font-semibold text-foreground">Deutsch</h3>
-              <p className="text-xs text-muted-foreground">Vier Marquee Zeilen. Diese Werte gelten fuer alle Sprachen.</p>
       </div>
 
-            <div className="space-y-4">
+      <div className="grid gap-4 xl:grid-cols-4">
         {rowMeta.map((row) => (
-                <div key={`de-${row.key}`} className="space-y-2">
+          <AppCard key={`de-${row.key}`} level={2} padding="sm" className="space-y-2">
-                  <Label htmlFor={`${row.key}-de`}>{row.label}</Label>
+            <Label htmlFor={`${row.key}-de`} className="text-sm font-semibold text-foreground">{row.label}</Label>
             <Textarea
               id={`${row.key}-de`}
               name={`${row.key}-de`}
               defaultValue={initialSettings.locales.de[row.key]}
-                    className="min-h-[180px] resize-y"
+              className="min-h-[220px] resize-y"
             />
-                </div>
+          </AppCard>
         ))}
       </div>
-          </div>
-        </CardContent>
-      </AppCard>
     </form>
   );
 }

components/root/media-library-manager.tsx

@@ -0,0 +1,508 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+
+import type { MediaKind } from "@prisma/client";
+import { FileType2, Grid2x2, ImageIcon, LayoutList, LoaderCircle, Trash2, Upload } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { useFormStatus } from "react-dom";
+import { useSearchParams } from "next/navigation";
+
+import type { MediaAssetView } from "@/lib/media";
+import { MotionFade } from "@/components/motion-fade";
+import { AppCard } from "@/components/ui/app-card";
+import { Button } from "@/components/ui/button";
+import { CardContent } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+import { createMediaAssetAction, deleteMediaAssetAction } from "@/app/root/media/actions";
+
+const copy = {
+  addMedia: "Upload Media File",
+  addMediaDescription: "Datei hochladen und direkt in die Media Library uebernehmen.",
+  addMediaHint: "PNG, JPG, GIF oder PDF bis 4 MB",
+  label: "Bezeichnung",
+  kind: "Typ",
+  image: "Image",
+  document: "Document",
+  upload: "Upload",
+  uploading: "Uploading...",
+  selectFile: "Datei auswaehlen",
+  empty: "Noch keine Bilder vorhanden.",
+  grid: "Grid",
+  list: "List",
+  detailsButton: "Details",
+  open: "Open",
+  delete: "Delete",
+  deleteConfirm: "Delete this media file?",
+  usages: "Verwendungen",
+  source: "Quelle",
+  fileName: "Dateiname",
+  url: "URL",
+  mimeType: "MIME Type",
+  size: "Dateigroesse",
+  createdAt: "Erstellt",
+  close: "Close",
+  details: "Bilddetails",
+  detailsDescription: "Metadaten und Verwendungen der ausgewaehlten Datei.",
+};
+
+function formatFileSize(size: number | null) {
+  if (!size) {
+    return "—";
+  }
+
+  if (size < 1024) {
+    return `${size} B`;
+  }
+
+  if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} KB`;
+  }
+
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatCreatedAt(value: string | Date) {
+  const date = value instanceof Date ? value : new Date(value);
+
+  return new Intl.DateTimeFormat("de-DE", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(date);
+}
+
+function getAbsoluteUrl(path: string) {
+  if (/^https?:\/\//.test(path)) {
+    return path;
+  }
+
+  if (typeof window === "undefined") {
+    return path;
+  }
+
+  return new URL(path, window.location.origin).toString();
+}
+
+function UploadSubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button type="submit" disabled={pending} className="w-full sm:w-auto">
+      {pending ? <LoaderCircle className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
+      {pending ? copy.uploading : copy.upload}
+    </Button>
+  );
+}
+
+function MediaUploadDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const [kind, setKind] = useState<MediaKind>("IMAGE");
+  const [label, setLabel] = useState("");
+  const [isLabelDirty, setIsLabelDirty] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setKind("IMAGE");
+      setLabel("");
+      setIsLabelDirty(false);
+    }
+  }, [open]);
+
+  function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+
+    if (!file || isLabelDirty) {
+      return;
+    }
+
+    setLabel(file.name.replace(/\.[^.]+$/, ""));
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          className="group block w-full rounded-surface border-2 border-dashed border-border/80 bg-surface-2 p-3 text-left transition-colors hover:border-primary/50 hover:bg-accent/30"
+        >
+          <div className="flex min-h-[240px] flex-col items-center justify-center rounded-nested border border-border/60 bg-background px-6 py-10 text-center">
+            <div className="flex h-16 w-16 items-center justify-center rounded-nested bg-muted text-muted-foreground">
+              <ImageIcon className="h-8 w-8" />
+            </div>
+            <p className="mt-6 text-2xl font-semibold text-foreground">{copy.addMedia}</p>
+            <p className="mt-2 text-sm text-muted-foreground">{copy.addMediaHint}</p>
+            <span className="mt-6 inline-flex h-11 items-center justify-center rounded-nested bg-primary px-5 text-sm font-medium text-primary-foreground shadow-sm transition-colors group-hover:bg-primary/92">
+              {copy.addMedia}
+            </span>
+          </div>
+        </button>
+      </DialogTrigger>
+
+      <DialogContent className="max-h-[calc(100vh-1.5rem)] w-[calc(100vw-1rem)] max-w-2xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{copy.addMedia}</DialogTitle>
+          <DialogDescription>{copy.addMediaDescription}</DialogDescription>
+        </DialogHeader>
+
+        <form action={createMediaAssetAction} className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="media-label">{copy.label}</Label>
+            <Input
+              id="media-label"
+              name="label"
+              value={label}
+              onChange={(event) => {
+                setLabel(event.target.value);
+                setIsLabelDirty(true);
+              }}
+              placeholder={copy.label}
+            />
+          </div>
+
+          <div className="space-y-3">
+            <Label>{copy.kind}</Label>
+            <div className="flex flex-wrap gap-2">
+              {[
+                { value: "IMAGE" as const, label: copy.image, icon: ImageIcon },
+                { value: "DOCUMENT" as const, label: copy.document, icon: FileType2 },
+              ].map((option) => {
+                const Icon = option.icon;
+                const isActive = kind === option.value;
+
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => setKind(option.value)}
+                    className={cn(
+                      "inline-flex items-center gap-2 rounded-nested border px-4 py-2 text-sm transition-colors",
+                      isActive
+                        ? "border-input bg-primary text-primary-foreground"
+                        : "border-input bg-background text-foreground/75 hover:bg-accent hover:text-accent-foreground",
+                    )}
+                  >
+                    <Icon className="h-4 w-4" />
+                    {option.label}
+                  </button>
+                );
+              })}
+            </div>
+            <input type="hidden" name="kind" value={kind} />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="media-file">{copy.selectFile}</Label>
+            <Input
+              id="media-file"
+              name="file"
+              type="file"
+              required
+              accept={kind === "IMAGE" ? "image/png,image/jpeg,image/gif,image/webp,image/svg+xml" : "application/pdf"}
+              className="file:mr-3"
+              onChange={handleFileChange}
+            />
+            <p className="text-xs text-muted-foreground">{copy.addMediaHint}</p>
+          </div>
+
+          <DialogFooter className="sm:justify-start">
+            <UploadSubmitButton />
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function MediaDetailsDialog({
+  asset,
+  open,
+  onOpenChange,
+}: {
+  asset: MediaAssetView | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  if (!asset) {
+    return null;
+  }
+
+  const absoluteUrl = getAbsoluteUrl(asset.url);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[calc(100vh-1.5rem)] w-[calc(100vw-1rem)] max-w-5xl overflow-y-auto p-0">
+        <div className="grid gap-0 md:grid-cols-[minmax(0,1.3fr)_minmax(320px,0.9fr)]">
+          <div className="border-b border-border/70 bg-muted/30 md:border-b-0 md:border-r">
+            <div className="flex h-full items-center justify-center p-4 sm:p-6">
+              <Link href={asset.url} target="_blank" rel="noreferrer" className="block w-full">
+                <img
+                  src={asset.url}
+                  alt={asset.label}
+                  className="max-h-[55vh] w-full rounded-nested object-contain transition-transform duration-300 hover:scale-[1.02] md:max-h-[75vh]"
+                />
+              </Link>
+            </div>
+          </div>
+
+            <div className="space-y-6 p-4 sm:p-6">
+            <DialogHeader className="space-y-2 text-left">
+              <DialogTitle className="pr-8">{asset.label}</DialogTitle>
+              <DialogDescription>{copy.detailsDescription}</DialogDescription>
+            </DialogHeader>
+
+            <div className="rounded-nested border">
+              <Table>
+                <TableBody>
+                  <TableRow>
+                    <TableCell className="w-36 font-medium text-muted-foreground">{copy.kind}</TableCell>
+                    <TableCell>{asset.kind}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="w-36 font-medium text-muted-foreground">{copy.source}</TableCell>
+                    <TableCell>{asset.source}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="w-36 font-medium text-muted-foreground">{copy.fileName}</TableCell>
+                    <TableCell className="break-all">{asset.fileName || "—"}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="w-36 font-medium text-muted-foreground">{copy.mimeType}</TableCell>
+                    <TableCell className="break-all">{asset.mimeType || "—"}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="w-36 font-medium text-muted-foreground">{copy.size}</TableCell>
+                    <TableCell>{formatFileSize(asset.size)}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="w-36 font-medium text-muted-foreground">{copy.createdAt}</TableCell>
+                    <TableCell>{formatCreatedAt(asset.createdAt)}</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </div>
+
+            {asset.usages.length > 0 ? (
+              <div className="space-y-2 rounded-nested border bg-muted/40 p-4 text-xs text-muted-foreground">
+                <p className="font-medium text-foreground">
+                  {asset.usages.length} {copy.usages}
+                </p>
+                {asset.usages.map((usage) => (
+                  <p key={usage.id}>
+                    {usage.usageType} / {usage.entityType} / {usage.fieldKey}
+                  </p>
+                ))}
+              </div>
+            ) : null}
+
+            <div className="space-y-2 rounded-nested border bg-muted/20 p-4 text-sm">
+              <p className="font-medium text-foreground">{copy.url}</p>
+              <p className="break-all text-muted-foreground">{absoluteUrl}</p>
+            </div>
+
+            <DialogFooter className="items-stretch sm:items-center sm:justify-between">
+              <Button asChild variant="outline" className="w-full sm:w-auto">
+                <Link href={asset.url} target="_blank" rel="noreferrer">
+                  {copy.open}
+                </Link>
+              </Button>
+
+              <form action={deleteMediaAssetAction} className="w-full sm:w-auto">
+                <input type="hidden" name="assetId" value={asset.id} />
+                <Button
+                  type="submit"
+                  variant="destructive"
+                  disabled={asset.usages.length > 0}
+                  className="w-full sm:w-auto"
+                  onClick={(event) => {
+                    if (!window.confirm(copy.deleteConfirm)) {
+                      event.preventDefault();
+                    }
+                  }}
+                >
+                  <Trash2 className="h-4 w-4" />
+                  {copy.delete}
+                </Button>
+              </form>
+            </DialogFooter>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function MediaLibraryManager({
+  mediaAssets,
+}: {
+  mediaAssets: MediaAssetView[];
+}) {
+  const searchParams = useSearchParams();
+  const [isUploadDialogOpen, setIsUploadDialogOpen] = useState(false);
+  const [selectedAssetId, setSelectedAssetId] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const imageAssets = useMemo(
+    () => mediaAssets.filter((asset) => asset.kind === "IMAGE"),
+    [mediaAssets],
+  );
+  const selectedAsset = imageAssets.find((asset) => asset.id === selectedAssetId) ?? null;
+
+  useEffect(() => {
+    if (searchParams.has("success")) {
+      setIsUploadDialogOpen(false);
+      setSelectedAssetId(null);
+    }
+  }, [searchParams]);
+
+  return (
+    <div className="space-y-6">
+      <MotionFade delay={0.15}>
+        <MediaUploadDialog open={isUploadDialogOpen} onOpenChange={setIsUploadDialogOpen} />
+      </MotionFade>
+
+      {imageAssets.length > 0 ? (
+        <div className="flex justify-end">
+          <div className="inline-flex rounded-nested border border-input bg-background p-1">
+            <button
+              type="button"
+              onClick={() => setViewMode("grid")}
+              className={cn(
+                "inline-flex items-center gap-2 rounded-nested px-3 py-2 text-sm transition-colors",
+                viewMode === "grid"
+                  ? "bg-primary text-primary-foreground"
+                  : "text-foreground/75 hover:bg-accent hover:text-accent-foreground",
+              )}
+            >
+              <Grid2x2 className="h-4 w-4" />
+              {copy.grid}
+            </button>
+            <button
+              type="button"
+              onClick={() => setViewMode("list")}
+              className={cn(
+                "inline-flex items-center gap-2 rounded-nested px-3 py-2 text-sm transition-colors",
+                viewMode === "list"
+                  ? "bg-primary text-primary-foreground"
+                  : "text-foreground/75 hover:bg-accent hover:text-accent-foreground",
+              )}
+            >
+              <LayoutList className="h-4 w-4" />
+              {copy.list}
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      {imageAssets.length > 0 ? (
+        viewMode === "grid" ? (
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4 sm:grid-cols-[repeat(auto-fill,minmax(180px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(210px,1fr))]">
+            {imageAssets.map((asset, index) => (
+              <MotionFade key={asset.id} delay={0.18 + index * 0.02}>
+                <button
+                  type="button"
+                  onClick={() => setSelectedAssetId(asset.id)}
+                  className="group text-left"
+                >
+                  <AppCard
+                    layer="single"
+                    padding="none"
+                    interactive
+                    className="overflow-hidden"
+                  >
+                    <div className="aspect-square overflow-hidden bg-muted/30">
+                      <img
+                        src={asset.url}
+                        alt={asset.label}
+                        className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
+                      />
+                    </div>
+                  </AppCard>
+                </button>
+              </MotionFade>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {imageAssets.map((asset, index) => (
+              <MotionFade key={asset.id} delay={0.18 + index * 0.02}>
+                <AppCard layer="single" padding="none" className="overflow-hidden">
+                  <div className="flex flex-col gap-4 p-4 sm:flex-row sm:items-center">
+                    <button
+                      type="button"
+                      onClick={() => setSelectedAssetId(asset.id)}
+                      className="group h-24 w-full overflow-hidden rounded-nested border bg-muted/30 sm:w-24"
+                    >
+                      <img
+                        src={asset.url}
+                        alt={asset.label}
+                        className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
+                      />
+                    </button>
+
+                    <div className="min-w-0 flex-1 space-y-1">
+                      <p className="truncate font-medium text-foreground">{asset.label}</p>
+                      <p className="text-sm text-muted-foreground">{formatFileSize(asset.size)}</p>
+                      <p className="truncate text-sm text-muted-foreground">{formatCreatedAt(asset.createdAt)}</p>
+                    </div>
+
+                    <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="w-full sm:w-auto"
+                        onClick={() => setSelectedAssetId(asset.id)}
+                      >
+                        {copy.detailsButton}
+                      </Button>
+                      <Button asChild variant="outline" className="w-full sm:w-auto">
+                        <Link href={asset.url} target="_blank" rel="noreferrer">
+                          {copy.open}
+                        </Link>
+                      </Button>
+                    </div>
+                  </div>
+                </AppCard>
+              </MotionFade>
+            ))}
+          </div>
+        )
+      ) : (
+        <MotionFade delay={0.18}>
+          <AppCard>
+            <CardContent className="p-6 text-sm text-muted-foreground">
+              {copy.empty}
+            </CardContent>
+          </AppCard>
+        </MotionFade>
+      )}
+
+      <MediaDetailsDialog
+        asset={selectedAsset}
+        open={Boolean(selectedAsset)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedAssetId(null);
+          }
+        }}
+      />
+    </div>
+  );
+}

components/root/portfolio-categories-manager.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from "next/navigation";
 import { FileText, FolderPlus, Hash, Layers3, Pencil, Text, Trash2 } from "lucide-react";
 
 import type { deleteCategoryAction, upsertCategoryAction } from "@/app/root/portfolio/actions";
+import { StatsCard } from "@/components/dashboard/stats-card";
 import { AppCard } from "@/components/ui/app-card";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Badge } from "@/components/ui/badge";
@@ -237,18 +238,9 @@ export function PortfolioCategoriesManager({
         <AppCard level={3}>
         <CardContent className="flex flex-col gap-6 p-6 lg:flex-row lg:items-end lg:justify-between lg:p-8">
           <div className="grid gap-4 sm:grid-cols-3">
-            <AppCard level={2} padding="sm">
+            <StatsCard title="Total" value={String(categories.length)} />
-              <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Total</p>
+            <StatsCard title="Active" value={String(activeCount)} />
-              <p className="mt-2 text-3xl font-semibold text-foreground">{categories.length}</p>
+            <StatsCard title="Assigned" value={String(assignedProjects)} />
-            </AppCard>
-            <AppCard level={2} padding="sm">
-              <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Active</p>
-              <p className="mt-2 text-3xl font-semibold text-foreground">{activeCount}</p>
-            </AppCard>
-            <AppCard level={2} padding="sm">
-              <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Assigned</p>
-              <p className="mt-2 text-3xl font-semibold text-foreground">{assignedProjects}</p>
-            </AppCard>
           </div>
 
           <Dialog open={createOpen} onOpenChange={setCreateOpen}>

components/root/portfolio-projects-overview.tsx

@@ -1,6 +1,7 @@
 import { ExternalLink, Filter, FolderKanban, Plus, Tags } from "lucide-react";
 import Link from "next/link";
 
+import { StatsCard } from "@/components/dashboard/stats-card";
 import { MotionFade } from "@/components/motion-fade";
 import { AppCard } from "@/components/ui/app-card";
 import { Badge } from "@/components/ui/badge";
@@ -51,20 +52,12 @@ export function PortfolioProjectsOverview({
         <AppCard level={3}>
           <CardContent className="flex flex-col gap-6 p-6 lg:flex-row lg:items-end lg:justify-between lg:p-8">
             <div className="grid gap-4 sm:grid-cols-3">
-              <AppCard level={2} padding="sm">
+              <StatsCard title="Projects" value={String(projects.length)} />
-                <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Projects</p>
+              <StatsCard title="Categories" value={String(categories.length)} />
-                <p className="mt-2 text-3xl font-semibold text-foreground">{projects.length}</p>
+              <StatsCard
-              </AppCard>
+                title="Published"
-              <AppCard level={2} padding="sm">
+                value={String(projects.filter((project) => project.isPublished).length)}
-                <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Categories</p>
+              />
-                <p className="mt-2 text-3xl font-semibold text-foreground">{categories.length}</p>
-              </AppCard>
-              <AppCard level={2} padding="sm">
-                <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Published</p>
-                <p className="mt-2 text-3xl font-semibold text-foreground">
-                  {projects.filter((project) => project.isPublished).length}
-                </p>
-              </AppCard>
             </div>
 
             <div className="flex flex-wrap gap-3">

components/root/site-settings-form.tsx

@@ -3,22 +3,30 @@
 /* eslint-disable @next/next/no-img-element */
 
 import { MediaKind } from "@prisma/client";
-import { FileText, ImageIcon, Search, Type } from "lucide-react";
+import { Check, FileText, ImageIcon, Search, Type, Upload } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 
-import { MediaFieldPicker, type MediaFieldState } from "@/components/root/media-field-picker";
 import { AppCard } from "@/components/ui/app-card";
-import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+import type { AppLocale } from "@/lib/locale";
+import type { MediaOption } from "@/lib/media";
+import { cn } from "@/lib/utils";
 import {
   PAGE_TITLE_TOKEN,
   SITE_NAME_TOKEN,
   type SiteSettings,
   type SiteSettingsMediaBindings,
 } from "@/lib/site-settings";
-import type { AppLocale } from "@/lib/locale";
-import type { MediaOption } from "@/lib/media";
 
 type SiteSettingsFormProps = {
   action: (formData: FormData) => Promise<void>;
@@ -27,6 +35,14 @@ type SiteSettingsFormProps = {
   mediaOptions: MediaOption[];
 };
 
+type MediaFieldState = {
+  mode: "upload" | "library";
+  assetId: string;
+  url: string;
+  label: string;
+  kind: MediaKind;
+};
+
 const localeFields: Array<{
   key: AppLocale;
   label: string;
@@ -65,28 +81,15 @@ function createImageFieldState(
       url: "",
       label,
       kind: MediaKind.IMAGE,
-      isCleared: false,
-    };
-  }
-
-  if (url) {
-    return {
-      mode: "external",
-      assetId: "",
-      url,
-      label,
-      kind: MediaKind.IMAGE,
-      isCleared: false,
     };
   }
 
   return {
     mode: "upload",
     assetId: "",
-    url: "",
+    url: url ?? "",
     label,
     kind: MediaKind.IMAGE,
-    isCleared: false,
   };
 }
 
@@ -95,14 +98,6 @@ function getMediaPreviewUrl(
   options: MediaOption[],
   fallbackUrl: string | null | undefined,
 ) {
-  if (value.isCleared) {
-    return "";
-  }
-
-  if (value.mode === "external") {
-    return value.url || fallbackUrl || "";
-  }
-
   if (value.mode === "library") {
     return options.find((option) => option.id === value.assetId)?.url ?? fallbackUrl ?? "";
   }
@@ -110,6 +105,276 @@ function getMediaPreviewUrl(
   return fallbackUrl ?? "";
 }
 
+function buildPreviewTitle(
+  titleTemplate: string,
+  sampleTitle: string,
+  siteName: string,
+) {
+  return titleTemplate.includes(PAGE_TITLE_TOKEN)
+    ? titleTemplate
+        .replace(PAGE_TITLE_TOKEN, sampleTitle)
+        .replaceAll(SITE_NAME_TOKEN, siteName)
+    : `${sampleTitle} | ${siteName}`;
+}
+
+function MediaLibraryModal({
+  open,
+  onOpenChange,
+  options,
+  selectedAssetId,
+  onSelect,
+  title,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  options: MediaOption[];
+  selectedAssetId: string;
+  onSelect: (option: MediaOption) => void;
+  title: string;
+}) {
+  const searchId = useId();
+  const [query, setQuery] = useState("");
+  const visibleOptions = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+
+    if (!normalizedQuery) {
+      return options;
+    }
+
+    return options.filter((option) => option.label.toLowerCase().includes(normalizedQuery));
+  }, [options, query]);
+
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[calc(100vh-1.5rem)] w-[calc(100vw-1rem)] max-w-4xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>Bild aus der Media Library auswaehlen.</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              id={searchId}
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              className="pl-9"
+              placeholder="Search media"
+            />
+          </div>
+
+          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+            {visibleOptions.length > 0 ? (
+              visibleOptions.map((option) => {
+                const isActive = option.id === selectedAssetId;
+
+                return (
+                  <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => {
+                      onSelect(option);
+                      onOpenChange(false);
+                    }}
+                    className={cn(
+                      "overflow-hidden rounded-nested border text-left transition-colors",
+                      isActive
+                        ? "border-input bg-accent/30"
+                        : "border-border/70 bg-background hover:bg-accent/10",
+                    )}
+                  >
+                    <div className="aspect-[4/3] bg-muted/30">
+                      {option.url ? (
+                        <img src={option.url} alt={option.label} className="h-full w-full object-cover" />
+                      ) : null}
+                    </div>
+                    <div className="flex items-center gap-3 p-3">
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-sm font-medium text-foreground">{option.label}</p>
+                        <p className="truncate text-xs text-muted-foreground">{option.source}</p>
+                      </div>
+                      {isActive ? <Check className="h-4 w-4 text-brand-primary" /> : null}
+                    </div>
+                  </button>
+                );
+              })
+            ) : (
+              <div className="col-span-full rounded-nested border border-dashed border-input px-4 py-8 text-sm text-muted-foreground">
+                No media found.
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SiteSettingsMediaRow({
+  title,
+  value,
+  onChange,
+  options,
+  inputName,
+  fileFieldName,
+  accept,
+  clearLabel,
+  fallbackUrl,
+}: {
+  title: string;
+  value: MediaFieldState;
+  onChange: (nextValue: MediaFieldState) => void;
+  options: MediaOption[];
+  inputName: string;
+  fileFieldName: string;
+  accept: string;
+  clearLabel: string;
+  fallbackUrl?: string | null;
+}) {
+  const [isLibraryOpen, setIsLibraryOpen] = useState(false);
+  const hiddenInputRef = useRef<HTMLInputElement | null>(null);
+  const fileInputId = useId();
+  const previewUrl = getMediaPreviewUrl(value, options, fallbackUrl);
+  const serializedValue = JSON.stringify({
+    mode: value.mode,
+    assetId: value.assetId,
+    url: value.url,
+    label: value.label,
+    kind: value.kind,
+  });
+
+  useEffect(() => {
+    const hiddenInput = hiddenInputRef.current;
+
+    if (!hiddenInput) {
+      return;
+    }
+
+    hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
+    hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+  }, [serializedValue]);
+
+  return (
+    <>
+      <AppCard level={2} padding="sm">
+        <div className="grid gap-4 lg:grid-cols-[180px_minmax(0,1fr)]">
+          <div className="space-y-2">
+            <p className="text-sm font-semibold text-foreground">{title}</p>
+            <div className="flex h-20 w-full items-center justify-center overflow-hidden rounded-nested border border-border/70 bg-muted/30">
+              {previewUrl ? (
+                <img src={previewUrl} alt={title} className="h-full w-full object-contain p-2" />
+              ) : (
+                <ImageIcon className="h-5 w-5 text-muted-foreground" />
+              )}
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <input ref={hiddenInputRef} type="hidden" name={inputName} value={serializedValue} />
+
+            <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_auto]">
+              <div className="relative">
+                <Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={value.label}
+                  onChange={(event) => onChange({ ...value, label: event.target.value })}
+                  placeholder="Label"
+                  className="pl-8"
+                />
+              </div>
+
+              <label
+                htmlFor={fileInputId}
+                className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-nested border border-input bg-background px-4 text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+              >
+                <Upload className="h-4 w-4" />
+                Upload
+              </label>
+
+              <Button type="button" variant="outline" onClick={() => setIsLibraryOpen(true)}>
+                <ImageIcon className="h-4 w-4" />
+                Library
+              </Button>
+            </div>
+
+            <input
+              id={fileInputId}
+              name={fileFieldName}
+              type="file"
+              accept={accept}
+              className="hidden"
+              onChange={(event) => {
+                const nextLabel = event.target.files?.[0]?.name.replace(/\.[^.]+$/, "") ?? value.label;
+
+                onChange({
+                  ...value,
+                  mode: "upload",
+                  assetId: "",
+                  label: value.label.trim() ? value.label : nextLabel,
+                });
+              }}
+            />
+
+            <div className="flex flex-wrap items-center gap-2">
+              <BadgeLike>{value.mode === "library" && value.assetId ? "Library selected" : "Upload mode"}</BadgeLike>
+              {value.assetId ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 px-2 text-destructive hover:bg-destructive/5 hover:text-destructive"
+                  onClick={() =>
+                    onChange({
+                      ...value,
+                      mode: "upload",
+                      assetId: "",
+                      url: "",
+                    })
+                  }
+                >
+                  {clearLabel}
+                </Button>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </AppCard>
+
+      <MediaLibraryModal
+        open={isLibraryOpen}
+        onOpenChange={setIsLibraryOpen}
+        options={options.filter((option) => option.kind === MediaKind.IMAGE)}
+        selectedAssetId={value.assetId}
+        title={title}
+        onSelect={(option) =>
+          onChange({
+            ...value,
+            mode: "library",
+            assetId: option.id,
+            url: "",
+            label: option.label,
+          })
+        }
+      />
+    </>
+  );
+}
+
+function BadgeLike({ children }: { children: string }) {
+  return (
+    <span className="inline-flex items-center rounded-full border border-border/70 bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground">
+      {children}
+    </span>
+  );
+}
+
 export function SiteSettingsForm({
   action,
   initialSettings,
@@ -145,6 +410,7 @@ export function SiteSettingsForm({
       "Default OG Image",
     ),
   );
+
   const siteLogoLightPreviewUrl = getMediaPreviewUrl(
     siteLogoLight,
     mediaOptions,
@@ -164,55 +430,33 @@ export function SiteSettingsForm({
 
   return (
     <form id="site-settings-form" action={action} className="space-y-6">
-      <div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(320px,1fr)]">
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,1fr)]">
         <div className="space-y-6">
-          <AppCard>
+          <section className="space-y-5">
-            <CardHeader>
+            <div className="space-y-2">
-              <CardTitle>SEO Basics</CardTitle>
+              <h2 className="text-lg font-semibold text-foreground">Localized Titles And Copy</h2>
-              <CardDescription>
-                Diese Einstellungen bilden die globale Basis fuer Seitentitel, Description und Vorschau in Suchmaschinen.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-2">
               <p className="text-sm text-muted-foreground">
                 Nutze
                 {" "}
                 <code>{PAGE_TITLE_TOKEN}</code>
                 {" "}
-                fuer den aktuellen Seitentitel.
                 und
                 {" "}
                 <code>{SITE_NAME_TOKEN}</code>
                 {" "}
-                fuer den Namen der aktuellen Sprache.
+                fuer die globalen Titelvorlagen pro Sprache.
               </p>
-              <p className="text-sm text-muted-foreground">
-                Beispiel:
-                {" "}
-                <code>{PAGE_TITLE_TOKEN} | {SITE_NAME_TOKEN}</code>
-              </p>
-            </CardContent>
-          </AppCard>
-
-          <AppCard>
-            <CardHeader>
-              <CardTitle>Localized Titles And Copy</CardTitle>
-              <CardDescription>
-                Diese Werte gelten als globale Standards pro Sprache und werden verwendet, wenn eine Seite keinen eigenen Fallback hat.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="grid gap-4 lg:grid-cols-3">
-              {localeFields.map((locale) => (
-                <AppCard key={locale.key} padding="sm" className="space-y-4 rounded-nested">
-                  <div>
-                    <p className="text-sm font-medium text-foreground">{locale.label}</p>
-                    <p className="mt-1 text-xs text-muted-foreground">Globale Standardwerte fuer diese Sprache.</p>
             </div>
 
+            <div className="grid gap-5 lg:grid-cols-3">
+              {localeFields.map((locale) => (
+                <AppCard key={locale.key} level={2} padding="sm" className="space-y-4">
+                  <p className="text-sm font-semibold text-foreground">{locale.label}</p>
+
                   <div className="space-y-2">
                     <Label htmlFor={`siteName${locale.suffix}`} className="sr-only">Site Name</Label>
                     <div className="relative">
-                      <Type className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                      <Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                       <Input
                         id={`siteName${locale.suffix}`}
                         name={`siteName${locale.suffix}`}
@@ -230,7 +474,7 @@ export function SiteSettingsForm({
                           }))
                         }
                         placeholder="Site Name"
-                        className="pl-9"
+                        className="pl-8"
                       />
                     </div>
                   </div>
@@ -238,7 +482,7 @@ export function SiteSettingsForm({
                   <div className="space-y-2">
                     <Label htmlFor={`titleTemplate${locale.suffix}`} className="sr-only">Title Template</Label>
                     <div className="relative">
-                      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                      <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                       <Input
                         id={`titleTemplate${locale.suffix}`}
                         name={`titleTemplate${locale.suffix}`}
@@ -256,7 +500,7 @@ export function SiteSettingsForm({
                           }))
                         }
                         placeholder="Title Template"
-                        className="pl-9"
+                        className="pl-8"
                       />
                     </div>
                   </div>
@@ -264,7 +508,7 @@ export function SiteSettingsForm({
                   <div className="space-y-2">
                     <Label htmlFor={`siteDescription${locale.suffix}`} className="sr-only">Site Description</Label>
                     <div className="relative">
-                      <FileText className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                      <FileText className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                       <Input
                         id={`siteDescription${locale.suffix}`}
                         name={`siteDescription${locale.suffix}`}
@@ -282,7 +526,7 @@ export function SiteSettingsForm({
                           }))
                         }
                         placeholder="Site Description"
-                        className="pl-9"
+                        className="pl-8"
                       />
                     </div>
                   </div>
@@ -290,7 +534,7 @@ export function SiteSettingsForm({
                   <div className="space-y-2">
                     <Label htmlFor={`subhead${locale.suffix}`} className="sr-only">Subhead</Label>
                     <div className="relative">
-                      <Type className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                      <Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                       <Input
                         id={`subhead${locale.suffix}`}
                         name={`subhead${locale.suffix}`}
@@ -308,239 +552,180 @@ export function SiteSettingsForm({
                           }))
                         }
                         placeholder="Subhead"
-                        className="pl-9"
+                        className="pl-8"
                       />
                     </div>
                   </div>
                 </AppCard>
               ))}
-            </CardContent>
+            </div>
-          </AppCard>
+          </section>
 
-          <AppCard>
+          <section className="space-y-4">
-            <CardHeader>
+            <h2 className="text-lg font-semibold text-foreground">Brand And Preview Images</h2>
-              <CardTitle>Brand And Preview Images</CardTitle>
+
-              <CardDescription>
+            <SiteSettingsMediaRow
-                Logo erscheint im Header. Favicon erscheint im Browser. Das Default OG Bild wird fuer Social Sharing genutzt, wenn eine Seite kein eigenes Bild liefert.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="grid gap-6 xl:grid-cols-2">
-              <MediaFieldPicker
               title="Site Logo Light"
               value={siteLogoLight}
               onChange={setSiteLogoLight}
               options={mediaOptions}
-                hasInitialValue={Boolean(initialBindings.siteLogoLight?.assetId || initialBindings.siteLogoLight?.url)}
               inputName="siteLogoLightMedia"
               fileFieldName="siteLogoLightFile"
-                fileLabel="Upload Light Logo"
-                libraryLabel="Light Logo Library"
               accept="image/*,.svg"
-                allowExternal={false}
+              clearLabel="Remove"
-                allowClear
+              fallbackUrl={initialBindings.siteLogoLight?.url}
-                clearLabel="Remove Light Logo"
-                emptyValue={{
-                  mode: "upload",
-                  assetId: "",
-                  url: "",
-                }}
             />
 
-              <MediaFieldPicker
+            <SiteSettingsMediaRow
               title="Site Logo Dark"
               value={siteLogoDark}
               onChange={setSiteLogoDark}
               options={mediaOptions}
-                hasInitialValue={Boolean(initialBindings.siteLogoDark?.assetId || initialBindings.siteLogoDark?.url)}
               inputName="siteLogoDarkMedia"
               fileFieldName="siteLogoDarkFile"
-                fileLabel="Upload Dark Logo"
-                libraryLabel="Dark Logo Library"
               accept="image/*,.svg"
-                allowExternal={false}
+              clearLabel="Remove"
-                allowClear
+              fallbackUrl={initialBindings.siteLogoDark?.url}
-                clearLabel="Remove Dark Logo"
-                emptyValue={{
-                  mode: "upload",
-                  assetId: "",
-                  url: "",
-                }}
             />
 
-              <MediaFieldPicker
+            <SiteSettingsMediaRow
               title="Favicon"
               value={favicon}
               onChange={setFavicon}
               options={mediaOptions}
-                hasInitialValue={Boolean(initialBindings.favicon?.assetId || initialBindings.favicon?.url)}
               inputName="faviconMedia"
               fileFieldName="faviconFile"
-                fileLabel="Upload Favicon"
-                libraryLabel="Favicon Library"
               accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
-                allowExternal={false}
+              clearLabel="Remove"
-                allowClear
+              fallbackUrl={initialBindings.favicon?.url}
-                clearLabel="Remove Favicon"
-                emptyValue={{
-                  mode: "upload",
-                  assetId: "",
-                  url: "",
-                }}
             />
 
-              <MediaFieldPicker
+            <SiteSettingsMediaRow
               title="Default OG Image"
               value={defaultOgImage}
               onChange={setDefaultOgImage}
               options={mediaOptions}
-                hasInitialValue={Boolean(initialBindings.defaultOgImage?.assetId || initialBindings.defaultOgImage?.url)}
               inputName="defaultOgImageMedia"
               fileFieldName="defaultOgImageFile"
-                fileLabel="Upload OG Image"
-                libraryLabel="OG Image Library"
               accept="image/*,.svg"
-                allowExternal={false}
+              clearLabel="Remove"
-                allowClear
+              fallbackUrl={initialBindings.defaultOgImage?.url}
-                clearLabel="Remove OG Image"
-                emptyValue={{
-                  mode: "upload",
-                  assetId: "",
-                  url: "",
-                }}
             />
-            </CardContent>
+          </section>
-          </AppCard>
         </div>
 
         <div className="xl:sticky xl:top-6 xl:self-start">
-          <AppCard>
+          <section className="space-y-4">
-            <CardHeader>
+            <h2 className="text-lg font-semibold text-foreground">Preview</h2>
-              <CardTitle>Preview</CardTitle>
-              <CardDescription>Suchmaschine und Social Sharing Vorschau.</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-4 text-sm">
-                {localeFields.map((locale) => {
-                  const localeSettings = settings.locales[locale.key];
-                  const previewTitle = localeSettings.titleTemplate.includes(PAGE_TITLE_TOKEN)
-                    ? localeSettings.titleTemplate
-                        .replace(PAGE_TITLE_TOKEN, locale.sampleTitle)
-                        .replaceAll(SITE_NAME_TOKEN, localeSettings.siteName)
-                    : `${locale.sampleTitle} | ${localeSettings.siteName}`;
 
-                  return (
+            <AppCard level={2} padding="sm" className="space-y-2">
-                    <AppCard key={locale.key} className="rounded-nested p-3">
+              <p className="text-sm font-semibold text-foreground">Search Result</p>
-                      <p className="font-medium text-foreground">{locale.label}</p>
+              <div className="rounded-nested border border-border/70 bg-background p-3">
-                      <p className="mt-2 text-xs text-muted-foreground">
-                        Example page title: {locale.sampleTitle}
-                      </p>
-                      <p className="mt-2 text-sm text-foreground">{previewTitle}</p>
-                      <p className="mt-1 text-sm text-muted-foreground">
-                        {localeSettings.siteDescription || "No description"}
-                      </p>
-                      <p className="mt-2 text-xs text-muted-foreground">
-                        {localeSettings.subhead || "No subhead"}
-                      </p>
-                    </AppCard>
-                  );
-                })}
-              </div>
-
-              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-                <ImageIcon className="h-4 w-4 text-brand-primary" />
-                Header Logo Preview
-              </div>
-              <div className="grid gap-3">
-                <AppCard padding="sm" className="rounded-nested">
-                  <p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
-                    Light
-                  </p>
-                  {siteLogoLightPreviewUrl ? (
-                    <img
-                      src={siteLogoLightPreviewUrl}
-                      alt="Site Logo Light"
-                      className="h-10 w-auto max-w-full object-contain"
-                    />
-                  ) : (
-                    <div className="flex h-10 items-center text-sm text-muted-foreground">
-                      Default light logo will be used
-                    </div>
-                  )}
-                </AppCard>
-                <div className="rounded-nested border border-border/70 bg-slate-950 p-4">
-                  <p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-white/55">
-                    Dark
-                  </p>
-                  {siteLogoDarkPreviewUrl ? (
-                    <img
-                      src={siteLogoDarkPreviewUrl}
-                      alt="Site Logo Dark"
-                      className="h-10 w-auto max-w-full object-contain"
-                    />
-                  ) : (
-                    <div className="flex h-10 items-center text-sm text-white/60">
-                      Default dark logo will be used
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-                <Search className="h-4 w-4 text-brand-primary" />
-                Search Preview
-              </div>
-              <AppCard padding="sm" className="rounded-nested">
                 <div className="flex items-center gap-3">
                   {faviconPreviewUrl ? (
-                    <img src={faviconPreviewUrl} alt="Favicon" className="h-5 w-5 rounded-sm" />
+                    <img src={faviconPreviewUrl} alt="Favicon" className="h-4 w-4 rounded-sm object-cover" />
                   ) : (
-                    <div className="flex h-5 w-5 items-center justify-center rounded-sm border bg-muted/40">
+                    <div className="flex h-4 w-4 items-center justify-center rounded-sm border border-border/70 bg-muted/40">
-                      <Type className="h-3.5 w-3.5 text-muted-foreground" />
+                      <Type className="h-3 w-3 text-muted-foreground" />
                     </div>
                   )}
                   <p className="text-sm font-medium text-brand-primary">
-                    {settings.locales.de.titleTemplate.includes(PAGE_TITLE_TOKEN)
+                    {buildPreviewTitle(
-                      ? settings.locales.de.titleTemplate
+                      settings.locales.de.titleTemplate,
-                          .replace(PAGE_TITLE_TOKEN, "About")
+                      "About",
-                          .replaceAll(SITE_NAME_TOKEN, settings.locales.de.siteName)
+                      settings.locales.de.siteName,
-                      : `About | ${settings.locales.de.siteName}`}
+                    )}
                   </p>
                 </div>
                 <p className="mt-2 text-xs text-muted-foreground">
                   {settings.locales.de.siteDescription || "No description"}
                 </p>
-                <p className="mt-2 text-xs text-muted-foreground/80">
+              </div>
-                  {settings.locales.de.subhead || "No subhead"}
-                </p>
             </AppCard>
 
-              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <AppCard level={2} padding="sm" className="space-y-2">
-                <ImageIcon className="h-4 w-4 text-brand-secondary" />
+              <p className="text-sm font-semibold text-foreground">Brand Assets</p>
-                Social Preview
+              <div className="grid gap-3 sm:grid-cols-2">
-              </div>
+                <AppCard level={1} padding="sm">
-              <AppCard className="overflow-hidden rounded-nested">
+                  <p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Light</p>
-                {defaultOgImagePreviewUrl ? (
+                  {siteLogoLightPreviewUrl ? (
-                  <img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-32 w-full object-cover" />
+                    <img
+                      src={siteLogoLightPreviewUrl}
+                      alt="Site Logo Light"
+                      className="h-10 w-full object-contain"
+                    />
                   ) : (
-                  <div className="flex h-32 items-center justify-center bg-muted/40 text-sm text-muted-foreground">
+                    <div className="flex h-10 items-center text-sm text-muted-foreground">No logo selected</div>
+                  )}
+                </AppCard>
+
+                <div className="rounded-nested border border-border/70 bg-slate-950 p-3">
+                  <p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-white/55">Dark</p>
+                  {siteLogoDarkPreviewUrl ? (
+                    <img
+                      src={siteLogoDarkPreviewUrl}
+                      alt="Site Logo Dark"
+                      className="h-10 w-full object-contain"
+                    />
+                  ) : (
+                    <div className="flex h-10 items-center text-sm text-white/60">No logo selected</div>
+                  )}
+                </div>
+              </div>
+            </AppCard>
+
+            <AppCard level={2} padding="sm" className="space-y-2">
+              <p className="text-sm font-semibold text-foreground">Social Preview</p>
+              <div className="overflow-hidden rounded-nested border border-border/70 bg-background">
+                {defaultOgImagePreviewUrl ? (
+                  <img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-24 w-full object-cover" />
+                ) : (
+                  <div className="flex h-24 items-center justify-center bg-muted/30 text-sm text-muted-foreground">
                     No OG image selected
                   </div>
                 )}
-                <div className="space-y-2 p-4">
+                <div className="space-y-1.5 p-3">
                   <p className="text-sm font-medium text-foreground">
-                    {settings.locales.en.titleTemplate.includes(PAGE_TITLE_TOKEN)
+                    {buildPreviewTitle(
-                      ? settings.locales.en.titleTemplate
+                      settings.locales.en.titleTemplate,
-                          .replace(PAGE_TITLE_TOKEN, "Portfolio")
+                      "Portfolio",
-                          .replaceAll(SITE_NAME_TOKEN, settings.locales.en.siteName)
+                      settings.locales.en.siteName,
-                      : `Portfolio | ${settings.locales.en.siteName}`}
+                    )}
                   </p>
                   <p className="text-xs text-muted-foreground">
                     {settings.locales.en.siteDescription || "No description"}
                   </p>
                 </div>
+              </div>
             </AppCard>
-            </CardContent>
+
+            <AppCard level={2} padding="sm" className="space-y-2">
+              <p className="text-sm font-semibold text-foreground">Locale Summary</p>
+              <div className="rounded-nested border border-border/70 bg-background">
+                <Table>
+                  <TableBody>
+                    {localeFields.map((locale) => (
+                      <TableRow key={locale.key}>
+                        <TableCell className="w-24 font-medium">{locale.label}</TableCell>
+                        <TableCell>
+                          <p className="text-sm font-medium text-foreground">
+                            {buildPreviewTitle(
+                              settings.locales[locale.key].titleTemplate,
+                              locale.sampleTitle,
+                              settings.locales[locale.key].siteName,
+                            )}
+                          </p>
+                          <p className="mt-1 text-xs text-muted-foreground">
+                            {settings.locales[locale.key].subhead || "No subhead"}
+                          </p>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
             </AppCard>
+          </section>
         </div>
       </div>
     </form>

components/root/smtp-settings-form.tsx

@@ -29,7 +29,7 @@ export function SMTPSettingsForm({
             <CardTitle>SMTP Connection</CardTitle>
             <CardDescription>Server und Login.</CardDescription>
           </CardHeader>
-          <CardContent className="grid gap-6 md:grid-cols-2">
+          <CardContent className="grid gap-5 p-4 md:grid-cols-2">
             <div className="space-y-2 md:col-span-2">
               <Label htmlFor="smtpHost">SMTP Host</Label>
               <div className="relative">
@@ -113,7 +113,7 @@ export function SMTPSettingsForm({
             <CardTitle>Sender And Recipients</CardTitle>
             <CardDescription>Absender und Ziele.</CardDescription>
           </CardHeader>
-          <CardContent className="grid gap-6 md:grid-cols-2">
+          <CardContent className="grid gap-5 p-4 md:grid-cols-2">
             <div className="space-y-2 md:col-span-2">
               <Label htmlFor="mailFromEmail">From Email</Label>
               <div className="relative">

components/ui/dialog.tsx

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "font-latin fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-surface border border-border/80 bg-card p-6 text-card-foreground shadow-panel duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:w-full",
+        "font-latin fixed inset-0 z-50 m-auto grid h-fit max-h-[calc(100vh-2rem)] w-[calc(100vw-1rem)] max-w-lg gap-4 rounded-surface border border-border/80 bg-card p-6 text-card-foreground shadow-panel duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 origin-center sm:w-full",
         className,
       )}
       {...props}

lib/media-service.ts

@@ -123,16 +123,11 @@ export async function createStandaloneMediaAsset(input: {
   kind: MediaKind;
   label: string;
   uploadFile: FormDataEntryValue | null;
-  externalUrl: string;
 }) {
-  const trimmedLabel = input.label.trim();
-
-  if (!trimmedLabel) {
-    throw new Error("Media label is required.");
-  }
-
   if (input.uploadFile instanceof File && input.uploadFile.size > 0) {
     const savedFile = await saveMediaUpload(input.uploadFile, input.kind.toLowerCase());
+    const derivedLabel = input.uploadFile.name.replace(/\.[^.]+$/, "").trim();
+    const trimmedLabel = input.label.trim() || derivedLabel || "Media asset";
 
     if (!savedFile) {
       throw new Error("Unable to save upload.");
@@ -150,20 +145,7 @@ export async function createStandaloneMediaAsset(input: {
     });
   }
 
-  const url = input.externalUrl.trim();
+  throw new Error("Upload file is required.");
-
-  if (!url) {
-    throw new Error("Either an upload file or an external URL is required.");
-  }
-
-  return createMediaAsset({
-    source: MediaSource.EXTERNAL,
-    kind: input.kind,
-    url,
-    fileName: getFileNameFromUrl(url),
-    label: trimmedLabel,
-    altText: trimmedLabel,
-  });
 }
 
 export async function deleteMediaAssetAndFile(input: {

lib/media-storage.ts

@@ -76,7 +76,7 @@ export async function saveMediaUpload(file: File, folder: string) {
   }
 
   const safeBaseName = sanitizeBaseName(file.name.replace(/\.[^.]+$/, "")) || "asset";
-  const finalName = `${Date.now()}-${safeBaseName}-${randomUUID().slice(0, 8)}${extension}`;
+  const finalName = `${safeBaseName}-${randomUUID().slice(0, 8)}${extension}`;
   const targetDir = path.join(MEDIA_UPLOAD_ROOT, folder);
   const targetPath = path.join(targetDir, finalName);