From 6caf723695b644331283e8146d04ac479e240fcf Mon Sep 17 00:00:00 2001
From: MOH <info@mohfarawati.de>
Date: Sun, 15 Mar 2026 08:59:19 +0100
Subject: [PATCH] refine admin cards and form headers

---
 app/_admin/maintenance/page.tsx               |   2 +-
 app/_admin/portfolio/projects/[id]/page.tsx   |   2 +-
 components/admin/contact-protection-form.tsx  |   4 +-
 components/admin/marquee-settings-form.tsx    |   2 +-
 components/admin/media-field-picker.tsx       |   4 +-
 components/admin/media-library-manager.tsx    |   2 +-
 .../admin/portfolio-categories-manager.tsx    |  49 +-
 components/admin/portfolio-project-form.tsx   | 457 +++++++++++-------
 .../admin/portfolio-projects-overview.tsx     |  15 +-
 components/admin/portfolio-subnav.tsx         |   2 +-
 components/admin/site-settings-form.tsx       |  48 +-
 components/admin/smtp-settings-form.tsx       |   4 +-
 components/admin/workspace-patterns.tsx       |   6 +-
 components/dashboard/stats-card.tsx           |  20 +-
 14 files changed, 371 insertions(+), 246 deletions(-)

diff --git a/app/_admin/maintenance/page.tsx b/app/_admin/maintenance/page.tsx
index 393a6aa..57a4755 100644
--- a/app/_admin/maintenance/page.tsx
+++ b/app/_admin/maintenance/page.tsx
@@ -52,7 +52,7 @@ export default async function AdminMaintenancePage() {
       headerDescription={copy.subtitle}
     >
       <MotionFade delay={0.1}>
-        <AppCard>
+        <AppCard layer="single">
           <CardContent className="space-y-4 p-6">
             <p className="text-sm text-muted-foreground">{copy.maintenanceText}</p>
             <div className="flex flex-wrap items-center gap-3">
diff --git a/app/_admin/portfolio/projects/[id]/page.tsx b/app/_admin/portfolio/projects/[id]/page.tsx
index 0798a22..c4aac64 100644
--- a/app/_admin/portfolio/projects/[id]/page.tsx
+++ b/app/_admin/portfolio/projects/[id]/page.tsx
@@ -98,7 +98,7 @@ export default async function AdminPortfolioProjectPage({
         </MotionFade>
 
         <MotionFade delay={0.2}>
-          <AppCard level={2}>
+          <AppCard level={2} layer="single">
             <CardContent className="flex flex-col gap-4 p-6 lg:flex-row lg:items-center lg:justify-between">
               <div>
                 <p className="text-sm font-medium text-foreground">{copy.dangerZone}</p>
diff --git a/components/admin/contact-protection-form.tsx b/components/admin/contact-protection-form.tsx
index 89826a1..ee6ea04 100644
--- a/components/admin/contact-protection-form.tsx
+++ b/components/admin/contact-protection-form.tsx
@@ -24,7 +24,7 @@ export function ContactProtectionForm({
 
   return (
     <form id="contact-protection-form" action={action} className="grid gap-6 xl:grid-cols-2">
-      <AppCard>
+      <AppCard layer="single">
         <CardHeader>
           <CardTitle>Turnstile</CardTitle>
           <CardDescription>Cloudflare Schutz fuer das Kontaktformular.</CardDescription>
@@ -77,7 +77,7 @@ export function ContactProtectionForm({
         </CardContent>
       </AppCard>
 
-      <AppCard>
+      <AppCard layer="single">
         <CardHeader>
           <CardTitle>Rate Limiting</CardTitle>
           <CardDescription>Begrenzung wiederholter Kontaktanfragen.</CardDescription>
diff --git a/components/admin/marquee-settings-form.tsx b/components/admin/marquee-settings-form.tsx
index e1bdd90..662a6aa 100644
--- a/components/admin/marquee-settings-form.tsx
+++ b/components/admin/marquee-settings-form.tsx
@@ -29,7 +29,7 @@ export function MarqueeSettingsForm({
 
       <div className="grid gap-4 xl:grid-cols-4">
         {rowMeta.map((row) => (
-          <AppCard key={`de-${row.key}`} level={2} padding="sm" className="space-y-2">
+          <AppCard key={`de-${row.key}`} level={2} layer="single" padding="sm" className="space-y-2">
             <Label htmlFor={`${row.key}-de`} className="text-sm font-semibold text-foreground">{row.label}</Label>
             <Textarea
               id={`${row.key}-de`}
diff --git a/components/admin/media-field-picker.tsx b/components/admin/media-field-picker.tsx
index 6df0e78..35e2290 100644
--- a/components/admin/media-field-picker.tsx
+++ b/components/admin/media-field-picker.tsx
@@ -89,7 +89,7 @@ export function MediaFieldPicker({
   }, [serializedValue]);
 
   return (
-    <AppCard level={2} padding="sm" className="space-y-4">
+    <AppCard level={2} layer="single" padding="sm" className="space-y-4">
       <input ref={hiddenInputRef} type="hidden" name={inputName} value={serializedValue} />
 
       <div className="flex items-start justify-between gap-4">
@@ -130,7 +130,7 @@ export function MediaFieldPicker({
         </div>
       </div>
 
-      <AppCard padding="sm" className="rounded-nested border-border/70">
+      <AppCard layer="single" padding="sm" className="rounded-nested border-border/70">
         {selectedOption ? (
           <div className="flex items-center gap-4">
             <img
diff --git a/components/admin/media-library-manager.tsx b/components/admin/media-library-manager.tsx
index 4737685..445a6aa 100644
--- a/components/admin/media-library-manager.tsx
+++ b/components/admin/media-library-manager.tsx
@@ -486,7 +486,7 @@ export function MediaLibraryManager({
         )
       ) : (
         <MotionFade delay={0.18}>
-          <AppCard>
+          <AppCard layer="single">
             <CardContent className="p-6 text-sm text-muted-foreground">
               {copy.empty}
             </CardContent>
diff --git a/components/admin/portfolio-categories-manager.tsx b/components/admin/portfolio-categories-manager.tsx
index dc292ac..6cbda11 100644
--- a/components/admin/portfolio-categories-manager.tsx
+++ b/components/admin/portfolio-categories-manager.tsx
@@ -5,9 +5,11 @@ import { useSearchParams } from "next/navigation";
 import {
   FileText,
   FolderPlus,
+  FolderTree,
   Hash,
   Layers3,
   Pencil,
+  CheckCircle2,
   ShieldCheck,
   ShieldOff,
   Text,
@@ -18,6 +20,7 @@ import type { deleteCategoryAction, upsertCategoryAction } from "@/app/_admin/po
 import { AppCard } from "@/components/ui/app-card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { StatsCard } from "@/components/dashboard/stats-card";
 import { CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -107,11 +110,11 @@ function CategoryLocaleFields({
           const descriptionKey = `description${locale.key}` as const;
 
           return (
-            <AppCard key={`${idPrefix}-${locale.key}`} level={2} padding="sm" className="space-y-4 rounded-nested">
+            <AppCard key={`${idPrefix}-${locale.key}`} level={2} layer="single" padding="sm" className="space-y-4 rounded-nested">
               <p className="text-sm font-medium text-foreground">{locale.label}</p>
 
               <div className="space-y-2">
-                <Label htmlFor={`${idPrefix}-${nameKey}`}>Name</Label>
+                <Label htmlFor={`${idPrefix}-${nameKey}`} className="sr-only">Name</Label>
                 <div className="relative">
                   <Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                   <Input
@@ -126,7 +129,7 @@ function CategoryLocaleFields({
               </div>
 
               <div className="space-y-2">
-                <Label htmlFor={`${idPrefix}-${descriptionKey}`}>{copy.description}</Label>
+                <Label htmlFor={`${idPrefix}-${descriptionKey}`} className="sr-only">{copy.description}</Label>
                 <div className="relative">
                   <FileText className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                   <Textarea
@@ -165,7 +168,7 @@ function CategoryStatusFields({
       </div>
 
       <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
-        <AppCard level={2} padding="sm" className="rounded-nested">
+        <AppCard level={2} layer="single" padding="sm" className="rounded-nested">
           <div className="flex items-start gap-3">
             {isActive ? (
               <ShieldCheck className="mt-0.5 h-4 w-4 text-status-success" />
@@ -224,7 +227,7 @@ function CategoryForm({
 
         <div className="grid gap-4 lg:grid-cols-3">
           <div className="space-y-2">
-            <Label htmlFor={`${formId}-slug`}>Slug</Label>
+            <Label htmlFor={`${formId}-slug`} className="sr-only">Slug</Label>
             <div className="relative">
               <Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <Input
@@ -239,7 +242,7 @@ function CategoryForm({
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor={`${formId}-sortOrder`}>{copy.sortOrder}</Label>
+            <Label htmlFor={`${formId}-sortOrder`} className="sr-only">{copy.sortOrder}</Label>
             <div className="relative">
               <Hash className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <Input
@@ -249,6 +252,7 @@ function CategoryForm({
                 min="0"
                 defaultValue={values?.sortOrder ?? 0}
                 required
+                placeholder={copy.sortOrder}
                 className="pl-9"
               />
             </div>
@@ -291,11 +295,11 @@ function EditCategoryDialog({
         </DialogHeader>
 
         <div className="grid gap-3 sm:grid-cols-3">
-          <AppCard level={2} padding="sm" className="rounded-nested">
+          <AppCard level={2} layer="single" padding="sm" className="rounded-nested">
             <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Projects</p>
             <p className="mt-2 text-lg font-semibold text-foreground">{category.projectCount}</p>
           </AppCard>
-          <AppCard level={2} padding="sm" className="rounded-nested">
+          <AppCard level={2} layer="single" padding="sm" className="rounded-nested">
             <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Status</p>
             <div className="mt-2">
               <Badge variant={category.isActive ? "success" : "warning"}>
@@ -303,7 +307,7 @@ function EditCategoryDialog({
               </Badge>
             </div>
           </AppCard>
-          <AppCard level={2} padding="sm" className="rounded-nested">
+          <AppCard level={2} layer="single" padding="sm" className="rounded-nested">
             <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Order</p>
             <p className="mt-2 text-lg font-semibold text-foreground">{category.sortOrder}</p>
           </AppCard>
@@ -371,23 +375,11 @@ export function PortfolioCategoriesManager({
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
-          <span>
-            Total:
-            {" "}
-            <span className="font-semibold text-foreground">{categories.length}</span>
-          </span>
-          <span>
-            Active:
-            {" "}
-            <span className="font-semibold text-foreground">{activeCount}</span>
-          </span>
-          <span>
-            Assigned:
-            {" "}
-            <span className="font-semibold text-foreground">{assignedProjects}</span>
-          </span>
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
+        <div className="grid gap-4 md:grid-cols-3 xl:min-w-[620px]">
+          <StatsCard title="Total" value={String(categories.length)} icon={FolderTree} />
+          <StatsCard title="Active" value={String(activeCount)} icon={CheckCircle2} />
+          <StatsCard title="Assigned" value={String(assignedProjects)} icon={Layers3} />
         </div>
 
         <Dialog open={createOpen} onOpenChange={setCreateOpen}>
@@ -403,7 +395,7 @@ export function PortfolioCategoriesManager({
               <DialogDescription>{copy.modalDescription}</DialogDescription>
             </DialogHeader>
 
-            <AppCard level={2} padding="sm" className="rounded-nested">
+            <AppCard level={2} layer="single" padding="sm" className="rounded-nested">
               <div className="grid gap-3 sm:grid-cols-3">
                 <div className="space-y-1">
                   <p className="text-sm font-medium text-foreground">1. Basics</p>
@@ -434,7 +426,7 @@ export function PortfolioCategoriesManager({
         </Dialog>
       </div>
 
-      <AppCard level={3}>
+      <AppCard level={3} layer="single">
         <CardContent className="space-y-4 p-6">
           <div className="flex items-center gap-3">
             <Layers3 className="h-5 w-5 text-brand-primary" />
@@ -449,6 +441,7 @@ export function PortfolioCategoriesManager({
                 <AppCard
                   key={category.id}
                   level={2}
+                  layer="single"
                   padding="sm"
                   className="rounded-nested"
                 >
diff --git a/components/admin/portfolio-project-form.tsx b/components/admin/portfolio-project-form.tsx
index 25e0047..89cce35 100644
--- a/components/admin/portfolio-project-form.tsx
+++ b/components/admin/portfolio-project-form.tsx
@@ -4,13 +4,18 @@ import type { PortfolioProjectViewMode, PortfolioSectionType } from "@prisma/cli
 import {
   ArrowDown,
   ArrowUp,
+  BookOpenText,
+  BriefcaseBusiness,
   CalendarDays,
   CheckCircle2,
   ChevronLeft,
   ChevronRight,
   CircleAlert,
   CircleDashed,
+  Files,
   FolderTree,
+  Grid2x2,
+  ImagePlus,
   Layers3,
   Link2,
   Plus,
@@ -23,11 +28,14 @@ import { type ReactNode, useEffect, useRef, useState } from "react";
 import { useFormStatus } from "react-dom";
 
 import { MediaFieldPicker, type MediaFieldState } from "@/components/admin/media-field-picker";
+import { StatsCard } from "@/components/dashboard/stats-card";
 import { AppCard } from "@/components/ui/app-card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import {
   Select,
   SelectContent,
@@ -125,10 +133,11 @@ const viewModeOptions: Array<{
   value: PortfolioProjectViewMode;
   label: string;
   description: string;
+  icon: typeof Grid2x2;
 }> = [
-  { value: "GRID", label: "Grid", description: "Balanced modular layout." },
-  { value: "STORY", label: "Story", description: "Narrative section flow." },
-  { value: "CASE_STUDY", label: "Case Study", description: "Structured challenge and result view." },
+  { value: "GRID", label: "Grid", description: "Balanced modular layout.", icon: Grid2x2 },
+  { value: "STORY", label: "Story", description: "Narrative section flow.", icon: BookOpenText },
+  { value: "CASE_STUDY", label: "Case Study", description: "Structured challenge and result view.", icon: BriefcaseBusiness },
 ];
 
 const wizardSteps: Array<{
@@ -307,21 +316,28 @@ function LocaleInputs({
 }) {
   return (
     <div className="space-y-3">
-      <p className="text-sm font-medium text-foreground">{title}</p>
       <div className="grid gap-3 xl:grid-cols-3">
         {locales.map((locale) => (
-          <AppCard key={`${title}-${locale.suffix}`} level={2} padding="sm" className="space-y-2 rounded-nested">
+          <AppCard
+            key={`${title}-${locale.suffix}`}
+            level={2}
+            layer="single"
+            padding="sm"
+            className="space-y-2 rounded-nested"
+          >
             <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{locale.label}</p>
             {multiline ? (
               <Textarea
                 name={namePrefix ? `${namePrefix}${locale.suffix}` : undefined}
                 rows={5}
+                placeholder={`${title} ${locale.label}`}
                 value={values[locale.suffix]}
                 onChange={(event) => onChange(locale.suffix, event.target.value)}
               />
             ) : (
               <Input
                 name={namePrefix ? `${namePrefix}${locale.suffix}` : undefined}
+                placeholder={`${title} ${locale.label}`}
                 value={values[locale.suffix]}
                 onChange={(event) => onChange(locale.suffix, event.target.value)}
               />
@@ -387,6 +403,89 @@ function SubmitButton() {
   );
 }
 
+function ViewModeCard({
+  active,
+  label,
+  description,
+  icon: Icon,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  description: string;
+  icon: typeof Grid2x2;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "rounded-surface border px-4 py-4 text-left transition-colors",
+        active
+          ? "border-primary bg-primary text-primary-foreground shadow-sm"
+          : "border-border/70 bg-background hover:border-input hover:bg-accent/10",
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <div
+          className={cn(
+            "flex h-10 w-10 items-center justify-center rounded-nested border transition-colors",
+            active
+              ? "border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground"
+              : "border-border/70 bg-surface-2 text-muted-foreground",
+          )}
+        >
+          <Icon className="h-4 w-4" />
+        </div>
+        <div className="min-w-0">
+          <p className={cn("text-sm font-semibold", active ? "text-primary-foreground" : "text-foreground")}>
+            {label}
+          </p>
+          <p className={cn("mt-1 text-sm", active ? "text-primary-foreground/80" : "text-muted-foreground")}>
+            {description}
+          </p>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+function ToggleField({
+  id,
+  name,
+  checked,
+  title,
+  description,
+  onCheckedChange,
+}: {
+  id: string;
+  name: string;
+  checked: boolean;
+  title: string;
+  description: string;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <label
+      htmlFor={id}
+      className="flex items-start justify-between gap-3 rounded-nested border border-input bg-card px-4 py-3 transition-colors hover:bg-accent/20"
+    >
+      <div>
+        <p className="text-sm font-medium text-foreground">{title}</p>
+        <p className="text-xs text-muted-foreground">{description}</p>
+      </div>
+      <Checkbox
+        id={id}
+        name={name}
+        checked={checked}
+        onCheckedChange={(value) => onCheckedChange(value === true)}
+        className="mt-0.5"
+      />
+    </label>
+  );
+}
+
 export function PortfolioProjectForm({
   action,
   categories,
@@ -484,7 +583,7 @@ export function PortfolioProjectForm({
 
   if (!project && availableCategories.length === 0) {
     return (
-      <AppCard level={3} padding="lg" className="rounded-surface">
+      <AppCard level={3} layer="single" padding="lg" className="rounded-surface">
         <div className="space-y-4">
           <div className="space-y-2">
             <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Portfolio Setup</p>
@@ -528,7 +627,7 @@ export function PortfolioProjectForm({
       <input ref={sectionsInputRef} type="hidden" name="sections" value={sectionsPayload} />
       <input ref={assetsInputRef} type="hidden" name="assets" value={assetsPayload} />
 
-      <AppCard level={3} padding="lg" className="sticky top-4 z-10">
+      <AppCard level={3} layer="single" padding="lg" className="space-y-6">
         <div className="flex flex-col gap-6">
           <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
             <div className="space-y-3">
@@ -548,31 +647,23 @@ export function PortfolioProjectForm({
             </div>
 
             <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-              <AppCard level={2} padding="sm" className="rounded-nested">
-                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Current Step</p>
-                <p className="mt-2 text-sm font-semibold text-foreground">
-                  {wizardSteps[currentStepIndex]?.label ?? "Basics"}
-                </p>
-              </AppCard>
-              <AppCard level={2} padding="sm" className="rounded-nested">
-                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Sections</p>
-                <p className="mt-2 text-sm font-semibold text-foreground">{sections.length}</p>
-              </AppCard>
-              <AppCard level={2} padding="sm" className="rounded-nested">
-                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Assets</p>
-                <p className="mt-2 text-sm font-semibold text-foreground">{assets.length}</p>
-              </AppCard>
-              <AppCard level={2} padding="sm" className="rounded-nested">
-                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Progress</p>
-                <p className="mt-2 text-sm font-semibold text-foreground">
-                  {progress.filter((step) => step.complete).length}/{progress.length} ready
-                </p>
-              </AppCard>
+              <StatsCard
+                title="Step"
+                value={wizardSteps[currentStepIndex]?.label ?? "Basics"}
+                icon={Layers3}
+              />
+              <StatsCard title="Sections" value={String(sections.length)} icon={Files} />
+              <StatsCard title="Assets" value={String(assets.length)} icon={ImagePlus} />
+              <StatsCard
+                title="Progress"
+                value={`${progress.filter((step) => step.complete).length}/${progress.length}`}
+                icon={CheckCircle2}
+              />
             </div>
           </div>
 
           {showValidation && firstIncompleteStep ? (
-            <AppCard level={2} padding="sm" className="rounded-nested border-status-warning/30">
+            <div className="rounded-nested border border-status-warning/30 bg-status-warning-soft px-4 py-3">
               <div className="flex items-start gap-3">
                 <CircleAlert className="mt-0.5 h-4 w-4 text-status-warning" />
                 <div className="space-y-1">
@@ -582,59 +673,59 @@ export function PortfolioProjectForm({
                   </p>
                 </div>
               </div>
-            </AppCard>
+            </div>
           ) : null}
         </div>
       </AppCard>
 
       <Tabs value={currentStep} onValueChange={(value) => setCurrentStep(value as PortfolioWizardStep)}>
-        <TabsList className="grid w-full gap-3 rounded-surface bg-transparent p-0 lg:grid-cols-4">
-          {wizardSteps.map((step, index) => {
-            const stepProgress = progress.find((entry) => entry.key === step.key);
-            const isActive = currentStep === step.key;
+        <div className="grid gap-6 xl:grid-cols-[300px_minmax(0,1fr)] xl:items-start">
+          <AppCard level={2} layer="single" padding="sm" className="xl:sticky xl:top-4">
+            <TabsList className="grid h-auto w-full gap-3 rounded-none bg-transparent p-0">
+              {wizardSteps.map((step, index) => {
+                const stepProgress = progress.find((entry) => entry.key === step.key);
+                const isActive = currentStep === step.key;
 
-            return (
-              <TabsTrigger
-                key={step.key}
-                value={step.key}
-                className={cn(
-                  "w-full rounded-surface border border-border/80 bg-surface-2 p-0 text-left hover:bg-accent/30",
-                  isActive && "border-input bg-accent/20 text-foreground shadow-xs",
-                )}
-              >
-                <div className="flex w-full flex-col gap-3 p-4">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="flex items-center gap-3">
-                      <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-border/80 bg-background text-sm font-semibold text-foreground">
-                        {index + 1}
-                      </span>
-                      <div>
-                        <p className="text-sm font-semibold text-foreground">{step.label}</p>
-                        <p className="text-xs text-muted-foreground">{step.description}</p>
-                      </div>
-                    </div>
-                    {stepProgress?.complete ? (
-                      <CheckCircle2 className="h-4 w-4 text-status-success" />
-                    ) : (
-                      <CircleDashed className="h-4 w-4 text-muted-foreground" />
+                return (
+                  <TabsTrigger
+                    key={step.key}
+                    value={step.key}
+                    className={cn(
+                      "w-full rounded-nested border border-border/80 bg-background p-0 text-left hover:bg-accent/30",
+                      isActive && "border-input bg-accent/20 text-foreground shadow-xs",
                     )}
-                  </div>
-                  <div className="flex items-center justify-between gap-3">
-                    <StepStateBadge
-                      complete={Boolean(stepProgress?.complete)}
-                      active={isActive}
-                      showValidation={showValidation && !stepProgress?.complete}
-                    />
-                    <p className="text-xs text-muted-foreground">{stepProgress?.summary}</p>
-                  </div>
-                </div>
-              </TabsTrigger>
-            );
-          })}
-        </TabsList>
+                  >
+                    <div className="flex w-full flex-col gap-3 p-4">
+                      <div className="flex items-center justify-between gap-3">
+                        <div className="flex items-center gap-3">
+                          <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-border/80 bg-surface-2 text-sm font-semibold text-foreground">
+                            {index + 1}
+                          </span>
+                          <div>
+                            <p className="text-sm font-semibold text-foreground">{step.label}</p>
+                          </div>
+                        </div>
+                        {stepProgress?.complete ? (
+                          <CheckCircle2 className="h-4 w-4 text-status-success" />
+                        ) : (
+                          <CircleDashed className="h-4 w-4 text-muted-foreground" />
+                        )}
+                      </div>
+                      <StepStateBadge
+                        complete={Boolean(stepProgress?.complete)}
+                        active={isActive}
+                        showValidation={showValidation && !stepProgress?.complete}
+                      />
+                    </div>
+                  </TabsTrigger>
+                );
+              })}
+            </TabsList>
+          </AppCard>
 
-        <TabsContent value="basics">
-          <AppCard level={3} padding="lg">
+          <div className="space-y-6">
+        <TabsContent value="basics" className="mt-0">
+          <AppCard level={3} layer="single" padding="lg">
             <section className="space-y-6">
               <SectionHeader
                 title="Basic Information"
@@ -643,7 +734,7 @@ export function PortfolioProjectForm({
 
               <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                 <div className="space-y-2">
-                  <Label htmlFor="categoryId">Category</Label>
+                  <Label htmlFor="categoryId" className="sr-only">Category</Label>
                   <div className="relative">
                     <FolderTree className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Select
@@ -666,12 +757,13 @@ export function PortfolioProjectForm({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="slug">Slug</Label>
+                  <Label htmlFor="slug" className="sr-only">Slug</Label>
                   <div className="relative">
                     <Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="slug"
                       name="slug"
+                      placeholder="Slug"
                       value={projectState.slug}
                       onChange={(event) =>
                         setProjectState((current) => ({ ...current, slug: event.target.value }))
@@ -682,12 +774,13 @@ export function PortfolioProjectForm({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="clientName">Client</Label>
+                  <Label htmlFor="clientName" className="sr-only">Client</Label>
                   <div className="relative">
                     <UserRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="clientName"
                       name="clientName"
+                      placeholder="Client"
                       value={projectState.clientName}
                       onChange={(event) =>
                         setProjectState((current) => ({ ...current, clientName: event.target.value }))
@@ -698,12 +791,13 @@ export function PortfolioProjectForm({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="projectYear">Year</Label>
+                  <Label htmlFor="projectYear" className="sr-only">Year</Label>
                   <div className="relative">
                     <CalendarDays className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="projectYear"
                       name="projectYear"
+                      placeholder="Year"
                       type="number"
                       min="2000"
                       max="2100"
@@ -717,12 +811,13 @@ export function PortfolioProjectForm({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="previewUrl">Preview URL</Label>
+                  <Label htmlFor="previewUrl" className="sr-only">Preview URL</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="previewUrl"
                       name="previewUrl"
+                      placeholder="Preview URL"
                       value={projectState.previewUrl}
                       onChange={(event) =>
                         setProjectState((current) => ({ ...current, previewUrl: event.target.value }))
@@ -733,12 +828,13 @@ export function PortfolioProjectForm({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="sortOrder">Sort Order</Label>
+                  <Label htmlFor="sortOrder" className="sr-only">Sort Order</Label>
                   <div className="relative">
                     <Layers3 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="sortOrder"
                       name="sortOrder"
+                      placeholder="Sort Order"
                       type="number"
                       min="0"
                       value={projectState.sortOrder}
@@ -753,59 +849,45 @@ export function PortfolioProjectForm({
 
               <div className="grid gap-3 xl:grid-cols-3">
                 {viewModeOptions.map((option) => (
-                  <button
+                  <ViewModeCard
                     key={option.value}
-                    type="button"
+                    active={projectState.viewMode === option.value}
+                    label={option.label}
+                    description={option.description}
+                    icon={option.icon}
                     onClick={() => setProjectState((current) => ({ ...current, viewMode: option.value }))}
-                    className={cn(
-                      "rounded-surface border px-4 py-4 text-left transition-colors",
-                      projectState.viewMode === option.value
-                        ? "border-input bg-accent/20"
-                        : "border-border/70 bg-background hover:border-input hover:bg-accent/10",
-                    )}
-                  >
-                    <p className="text-sm font-semibold text-foreground">{option.label}</p>
-                    <p className="mt-1 text-sm text-muted-foreground">{option.description}</p>
-                  </button>
+                  />
                 ))}
               </div>
 
               <div className="grid gap-3 md:grid-cols-2">
-                <label className="flex items-center justify-between rounded-nested border border-input bg-card px-4 py-3">
-                  <div>
-                    <p className="text-sm font-medium text-foreground">Featured</p>
-                    <p className="text-xs text-muted-foreground">Highlight the project across the portfolio.</p>
-                  </div>
-                  <input
-                    type="checkbox"
-                    name="isFeatured"
-                    checked={projectState.isFeatured}
-                    onChange={(event) =>
-                      setProjectState((current) => ({ ...current, isFeatured: event.target.checked }))
-                    }
-                  />
-                </label>
-                <label className="flex items-center justify-between rounded-nested border border-input bg-card px-4 py-3">
-                  <div>
-                    <p className="text-sm font-medium text-foreground">Published</p>
-                    <p className="text-xs text-muted-foreground">Only published projects appear on public pages.</p>
-                  </div>
-                  <input
-                    type="checkbox"
-                    name="isPublished"
-                    checked={projectState.isPublished}
-                    onChange={(event) =>
-                      setProjectState((current) => ({ ...current, isPublished: event.target.checked }))
-                    }
-                  />
-                </label>
+                <ToggleField
+                  id="isFeatured"
+                  name="isFeatured"
+                  checked={projectState.isFeatured}
+                  title="Featured"
+                  description="Highlight the project across the portfolio."
+                  onCheckedChange={(checked) =>
+                    setProjectState((current) => ({ ...current, isFeatured: checked }))
+                  }
+                />
+                <ToggleField
+                  id="isPublished"
+                  name="isPublished"
+                  checked={projectState.isPublished}
+                  title="Published"
+                  description="Only published projects appear on public pages."
+                  onCheckedChange={(checked) =>
+                    setProjectState((current) => ({ ...current, isPublished: checked }))
+                  }
+                />
               </div>
             </section>
           </AppCard>
         </TabsContent>
 
-        <TabsContent value="content">
-          <AppCard level={3} padding="lg">
+        <TabsContent value="content" className="mt-0">
+          <AppCard level={3} layer="single" padding="lg">
             <section className="space-y-6">
               <SectionHeader
                 title="Localized Content"
@@ -855,8 +937,8 @@ export function PortfolioProjectForm({
           </AppCard>
         </TabsContent>
 
-        <TabsContent value="sections">
-          <AppCard level={3} padding="lg">
+        <TabsContent value="sections" className="mt-0">
+          <AppCard level={3} layer="single" padding="lg">
             <section className="space-y-6">
               <SectionHeader
                 title="Sections"
@@ -945,7 +1027,7 @@ export function PortfolioProjectForm({
 
                     <div className="grid gap-4 md:grid-cols-2">
                       <div className="space-y-2">
-                        <Label>Type</Label>
+                        <Label className="sr-only">Type</Label>
                         <Select
                           value={section.type}
                           onValueChange={(value) =>
@@ -973,8 +1055,9 @@ export function PortfolioProjectForm({
 
                       {section.type === "LINK" ? (
                         <div className="space-y-2">
-                          <Label>Link URL</Label>
+                          <Label className="sr-only">Link URL</Label>
                           <Input
+                            placeholder="Link URL"
                             value={section.linkUrl}
                             onChange={(event) =>
                               setSections((current) =>
@@ -1046,48 +1129,50 @@ export function PortfolioProjectForm({
           </AppCard>
         </TabsContent>
 
-        <TabsContent value="assets">
-          <div className="space-y-6">
-            <AppCard level={3} padding="lg">
-              <section className="space-y-6">
-                <SectionHeader
-                  title="Cover Media"
-                  description="Choose the primary cover that represents the project in listings."
-                />
+        <TabsContent value="assets" className="mt-0">
+          <AppCard level={3} layer="single" padding="lg">
+            <div className="space-y-8">
+              <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
+                <div className="space-y-6">
+                  <section className="space-y-6">
+                    <SectionHeader
+                      title="Cover Media"
+                      description="Choose the primary cover that represents the project in listings."
+                    />
 
-                <MediaFieldPicker
-                  title="Cover"
-                  value={coverMedia}
-                  onChange={setCoverMedia}
-                  options={mediaOptions}
-                  hasInitialValue={Boolean(project?.coverImagePath || project?.coverMediaAssetId)}
-                  inputName="coverMedia"
-                  fileFieldName="coverFile"
-                  allowClear
-                  clearLabel="Remove Cover"
-                  emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
-                />
-              </section>
-            </AppCard>
+                    <MediaFieldPicker
+                      title="Cover"
+                      value={coverMedia}
+                      onChange={setCoverMedia}
+                      options={mediaOptions}
+                      hasInitialValue={Boolean(project?.coverImagePath || project?.coverMediaAssetId)}
+                      inputName="coverMedia"
+                      fileFieldName="coverFile"
+                      allowClear
+                      clearLabel="Remove Cover"
+                      emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
+                    />
+                  </section>
 
-            <AppCard level={3} padding="lg">
-              <section className="space-y-6">
-                <SectionHeader
-                  title="Assets"
-                  description="Assets stay ordered and ready for localized alt text."
-                  action={(
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={() => setAssets((current) => [...current, createEmptyAsset(current.length)])}
-                    >
-                      <Plus className="h-4 w-4" />
-                      Add Asset
-                    </Button>
-                  )}
-                />
+                  <Separator />
 
-                <div className="space-y-4">
+                  <section className="space-y-6">
+                    <SectionHeader
+                      title="Assets"
+                      description="Assets stay ordered and ready for localized alt text."
+                      action={(
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={() => setAssets((current) => [...current, createEmptyAsset(current.length)])}
+                        >
+                          <Plus className="h-4 w-4" />
+                          Add Asset
+                        </Button>
+                      )}
+                    />
+
+                    <div className="grid gap-4 md:grid-cols-2">
                   {assets.map((asset, index) => (
                     <div
                       key={asset.id ?? `asset-${index}`}
@@ -1181,14 +1266,50 @@ export function PortfolioProjectForm({
                       />
                     </div>
                   ))}
+                    </div>
+                  </section>
                 </div>
-              </section>
-            </AppCard>
-          </div>
+
+                <div className="space-y-4 lg:sticky lg:top-4 lg:self-start">
+                  <AppCard level={2} layer="single" padding="sm" className="space-y-4">
+                    <div className="flex items-center gap-2">
+                      <ImagePlus className="h-4 w-4 text-brand-primary" />
+                      <p className="text-sm font-semibold text-foreground">Assets Overview</p>
+                    </div>
+
+                    <div className="grid gap-3">
+                      <StatsCard title="Cover" value={coverMedia.assetId ? "Selected" : "Missing"} icon={ImagePlus} />
+                      <StatsCard title="Assets" value={String(assets.length)} icon={Files} />
+                      <StatsCard
+                        title="Ready"
+                        value={String(
+                          assets.filter((asset) =>
+                            isPortfolioAssetReady({
+                              mediaAssetId: asset.media.assetId,
+                              altAr: asset.altAr,
+                              altEn: asset.altEn,
+                              altDe: asset.altDe,
+                            }),
+                          ).length,
+                        )}
+                        icon={CheckCircle2}
+                      />
+                    </div>
+
+                    <div className="rounded-nested border border-dashed border-border/70 bg-background px-4 py-3 text-sm text-muted-foreground">
+                      Start with the cover, then add gallery assets. Each asset needs media plus localized alt text.
+                    </div>
+                  </AppCard>
+                </div>
+              </div>
+            </div>
+          </AppCard>
         </TabsContent>
+          </div>
+        </div>
       </Tabs>
 
-      <AppCard level={3} padding="lg">
+      <AppCard level={3} layer="single" padding="lg">
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-wrap gap-2">
             <Button
diff --git a/components/admin/portfolio-projects-overview.tsx b/components/admin/portfolio-projects-overview.tsx
index beb6715..0b8e1ee 100644
--- a/components/admin/portfolio-projects-overview.tsx
+++ b/components/admin/portfolio-projects-overview.tsx
@@ -1,4 +1,4 @@
-import { ExternalLink, Plus, Tags } from "lucide-react";
+import { ExternalLink, FolderKanban, Plus, Tags, CheckCircle2 } from "lucide-react";
 import Link from "next/link";
 
 import { StatsCard } from "@/components/dashboard/stats-card";
@@ -39,12 +39,13 @@ export async function PortfolioProjectsOverview({
   return (
     <div className="space-y-6">
       <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
-        <div className="grid gap-4 md:grid-cols-3 xl:min-w-[520px]">
-          <StatsCard title="Projects" value={String(projects.length)} />
-          <StatsCard title="Categories" value={String(categories.length)} />
+        <div className="grid gap-4 md:grid-cols-3 xl:min-w-[620px]">
+          <StatsCard title="Projects" value={String(projects.length)} icon={FolderKanban} />
+          <StatsCard title="Categories" value={String(categories.length)} icon={Tags} />
           <StatsCard
             title="Published"
             value={String(projects.filter((project) => project.isPublished).length)}
+            icon={CheckCircle2}
           />
         </div>
 
@@ -81,10 +82,10 @@ export async function PortfolioProjectsOverview({
         ))}
       </div>
 
-      <div className="grid gap-4">
+      <div className="grid gap-4 xl:grid-cols-2">
         {projects.map((project, index) => (
           <MotionFade key={project.id} delay={0.06 + index * 0.03}>
-            <AppCard interactive>
+            <AppCard interactive layer="single" className="h-full">
               <CardContent className="flex flex-col gap-4 p-5 lg:flex-row lg:items-center lg:justify-between">
                 <div className="space-y-2">
                   <div className="flex flex-wrap items-center gap-2">
@@ -121,7 +122,7 @@ export async function PortfolioProjectsOverview({
         ))}
 
         {projects.length === 0 ? (
-          <AppCard>
+          <AppCard layer="single" className="xl:col-span-2">
             <CardContent className="p-6 text-sm text-muted-foreground">
               {copy.empty}
             </CardContent>
diff --git a/components/admin/portfolio-subnav.tsx b/components/admin/portfolio-subnav.tsx
index f3e3419..f0cc260 100644
--- a/components/admin/portfolio-subnav.tsx
+++ b/components/admin/portfolio-subnav.tsx
@@ -23,7 +23,7 @@ const items = [
 
 export function PortfolioSubnav({ active }: PortfolioSubnavProps) {
   return (
-    <AppCard level={2}>
+    <AppCard level={2} layer="single">
       <CardContent className="flex flex-wrap gap-2 p-4">
         {items.map((item) => (
           <Link
diff --git a/components/admin/site-settings-form.tsx b/components/admin/site-settings-form.tsx
index 792a60c..134c28f 100644
--- a/components/admin/site-settings-form.tsx
+++ b/components/admin/site-settings-form.tsx
@@ -16,6 +16,7 @@ import {
 } from "lucide-react";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 
+import { StatsCard } from "@/components/dashboard/stats-card";
 import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
 import {
@@ -269,7 +270,7 @@ function SiteSettingsMediaRow({
 
   return (
     <>
-      <AppCard level={2} padding="sm">
+      <AppCard level={2} layer="single" 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>
@@ -392,7 +393,7 @@ function LocalizedFieldsSection({
 
       <div className="grid gap-5 lg:grid-cols-3">
         {localeFields.map((locale) => (
-          <AppCard key={locale.key} level={2} padding="sm" className="space-y-4">
+          <AppCard key={locale.key} level={2} layer="single" padding="sm" className="space-y-4">
             <p className="text-sm font-semibold text-foreground">{locale.label}</p>
 
             <div className="space-y-2">
@@ -532,9 +533,19 @@ export function SiteSettingsForm({
   const faviconPreviewUrl = getMediaPreviewUrl(favicon, mediaOptions, initialBindings.favicon?.url);
   const defaultOgImagePreviewUrl = getMediaPreviewUrl(defaultOgImage, mediaOptions, initialBindings.defaultOgImage?.url);
   const routePreview = settings.defaultLocale === "de" ? "/about" : `/${settings.defaultLocale}/about`;
+  const brandAssetsCount = [siteLogoLight, siteLogoDark].filter((item) => item.assetId).length;
+  const previewAssetsCount = [favicon, defaultOgImage].filter((item) => item.assetId).length;
 
   return (
     <form id="site-settings-form" action={action} className="space-y-6">
+      {mode === "brand" ? (
+        <div className="grid gap-4 md:grid-cols-3 xl:min-w-[620px]">
+          <StatsCard title="Primary" value={settings.brand.primaryColor} icon={Palette} />
+          <StatsCard title="Logos" value={String(brandAssetsCount)} icon={ImageIcon} />
+          <StatsCard title="Preview" value={String(previewAssetsCount)} icon={Globe2} />
+        </div>
+      ) : null}
+
       <div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,1fr)]">
         <div className="space-y-6">
           {mode === "brand" ? (
@@ -547,10 +558,10 @@ export function SiteSettingsForm({
                   </p>
                 </div>
 
-                <AppCard level={2} padding="sm" className="space-y-4">
+                <AppCard level={2} layer="single" padding="sm" className="space-y-4">
                   <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
                     <div className="space-y-2">
-                      <Label htmlFor="primaryColor">Primary Color</Label>
+                      <Label htmlFor="primaryColor" className="sr-only">Primary Color</Label>
                       <div className="flex items-center gap-3">
                         <Input
                           id="primaryColor"
@@ -569,6 +580,7 @@ export function SiteSettingsForm({
                           className="h-11 w-20 rounded-nested p-1"
                         />
                         <Input
+                          aria-label="Primary Color Value"
                           value={settings.brand.primaryColor}
                           onChange={(event) =>
                             setSettings((current) => ({
@@ -667,10 +679,10 @@ export function SiteSettingsForm({
                   </p>
                 </div>
 
-                <AppCard level={2} padding="sm" className="space-y-4">
+                <AppCard level={2} layer="single" padding="sm" className="space-y-4">
                   <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
                     <div className="space-y-2">
-                      <Label htmlFor="defaultLocaleTrigger">Default Locale</Label>
+                      <Label htmlFor="defaultLocaleTrigger" className="sr-only">Default Locale</Label>
                       <Select
                         name="defaultLocale"
                         value={settings.defaultLocale}
@@ -715,12 +727,10 @@ export function SiteSettingsForm({
 
         <div className="xl:sticky xl:top-6 xl:self-start">
           <section className="space-y-4">
-            <h2 className="text-lg font-semibold text-foreground">Preview</h2>
-
             {mode === "brand" ? (
               <>
-                <AppCard level={2} padding="sm" className="space-y-2">
-                  <p className="text-sm font-semibold text-foreground">Search Result</p>
+                <AppCard level={2} layer="single" padding="sm" className="space-y-2">
+                  <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Search Result</p>
                   <div className="rounded-nested border border-border/70 bg-background p-3">
                     <div className="flex items-center gap-3">
                       {faviconPreviewUrl ? (
@@ -740,10 +750,10 @@ export function SiteSettingsForm({
                   </div>
                 </AppCard>
 
-                <AppCard level={2} padding="sm" className="space-y-2">
-                  <p className="text-sm font-semibold text-foreground">Brand Assets</p>
+                <AppCard level={2} layer="single" padding="sm" className="space-y-2">
+                  <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Brand Assets</p>
                   <div className="grid gap-3 sm:grid-cols-2">
-                    <AppCard level={1} padding="sm">
+                    <AppCard level={1} layer="single" padding="sm">
                       <p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Light</p>
                       {siteLogoLightPreviewUrl ? (
                         <img src={siteLogoLightPreviewUrl} alt="Site Logo Light" className="h-10 w-full object-contain" />
@@ -763,8 +773,8 @@ export function SiteSettingsForm({
                   </div>
                 </AppCard>
 
-                <AppCard level={2} padding="sm" className="space-y-2">
-                  <p className="text-sm font-semibold text-foreground">Social Preview</p>
+                <AppCard level={2} layer="single" padding="sm" className="space-y-2">
+                  <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Social Preview</p>
                   <div className="overflow-hidden rounded-nested border border-border/70 bg-background">
                     <div className="h-1.5" style={{ backgroundColor: settings.brand.primaryColor }} />
                     {defaultOgImagePreviewUrl ? (
@@ -787,8 +797,8 @@ export function SiteSettingsForm({
               </>
             ) : (
               <>
-                <AppCard level={2} padding="sm" className="space-y-2">
-                  <p className="text-sm font-semibold text-foreground">Visitor Routing</p>
+                <AppCard level={2} layer="single" padding="sm" className="space-y-2">
+                  <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Visitor Routing</p>
                   <div className="rounded-nested border border-border/70 bg-background p-3">
                     <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                       <Languages className="h-4 w-4 text-brand-primary" />
@@ -800,8 +810,8 @@ export function SiteSettingsForm({
                   </div>
                 </AppCard>
 
-                <AppCard level={2} padding="sm" className="space-y-2">
-                  <p className="text-sm font-semibold text-foreground">Locale Summary</p>
+                <AppCard level={2} layer="single" padding="sm" className="space-y-2">
+                  <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Locale Summary</p>
                   <div className="rounded-nested border border-border/70 bg-background">
                     <Table>
                       <TableBody>
diff --git a/components/admin/smtp-settings-form.tsx b/components/admin/smtp-settings-form.tsx
index e869be7..4efd616 100644
--- a/components/admin/smtp-settings-form.tsx
+++ b/components/admin/smtp-settings-form.tsx
@@ -25,7 +25,7 @@ export function SMTPSettingsForm({
   return (
     <form id="smtp-settings-form" action={action} className="space-y-6">
       <div className="grid gap-6 xl:grid-cols-2">
-        <AppCard>
+        <AppCard layer="single">
           <CardHeader>
             <CardTitle>SMTP Connection</CardTitle>
             <CardDescription>Server und Login.</CardDescription>
@@ -109,7 +109,7 @@ export function SMTPSettingsForm({
           </CardContent>
         </AppCard>
 
-        <AppCard>
+        <AppCard layer="single">
           <CardHeader>
             <CardTitle>Sender And Recipients</CardTitle>
             <CardDescription>Absender und Ziele.</CardDescription>
diff --git a/components/admin/workspace-patterns.tsx b/components/admin/workspace-patterns.tsx
index 90c8e4a..3a9013f 100644
--- a/components/admin/workspace-patterns.tsx
+++ b/components/admin/workspace-patterns.tsx
@@ -17,7 +17,7 @@ export function WorkspaceHero({
   aside?: ReactNode;
 }) {
   return (
-    <AppCard level={3}>
+    <AppCard level={3} layer="single">
       <CardContent className="flex flex-col gap-4 p-6 lg:flex-row lg:items-end lg:justify-between lg:p-8">
         <div className="space-y-2">
           <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
@@ -40,7 +40,7 @@ export function WorkspaceSidebarPanel({
   children: ReactNode;
 }) {
   return (
-    <AppCard level={2}>
+    <AppCard level={2} layer="single">
       <CardHeader className="pb-4">
         <CardTitle className="text-base">{title}</CardTitle>
       </CardHeader>
@@ -100,7 +100,7 @@ export function WorkspaceLocaleCard({
   children: ReactNode;
 }) {
   return (
-    <AppCard level={2}>
+    <AppCard level={2} layer="single">
       <CardHeader className="pb-4">
         <CardTitle className="text-lg">{title}</CardTitle>
         <CardDescription>{hint}</CardDescription>
diff --git a/components/dashboard/stats-card.tsx b/components/dashboard/stats-card.tsx
index 4b06a28..136b955 100644
--- a/components/dashboard/stats-card.tsx
+++ b/components/dashboard/stats-card.tsx
@@ -22,25 +22,25 @@ export function StatsCard({
   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>
+    <AppCard level={3} layer="single" className={className}>
+      <CardContent className="p-3">
+        <div className="flex items-center gap-3">
           {Icon ? (
-            <div className="rounded-nested border border-border bg-muted/50 p-2 text-muted-foreground">
+            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-nested border border-border bg-muted/50 text-muted-foreground">
               <Icon className="h-4 w-4" />
             </div>
           ) : null}
+          <div className="min-w-0">
+            <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">{title}</p>
+            <p className="mt-1 text-lg font-semibold text-foreground">{value}</p>
+          </div>
         </div>
 
         {description ? (
-          <p className="text-sm text-muted-foreground">{description}</p>
+          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
         ) : null}
 
-        {footer ? footer : null}
+        {footer ? <div className="mt-2">{footer}</div> : null}
       </CardContent>
     </AppCard>
   );