From ce63cd8b699cb16ec11df0ff83776ea1fee0b0f7 Mon Sep 17 00:00:00 2001
From: MOH <info@mohfarawati.de>
Date: Fri, 6 Mar 2026 16:50:45 +0100
Subject: [PATCH] feat(ui): admin-only root link and shared header navigation

---
 app/[locale]/(site)/about/page.tsx            |  42 +--
 app/[locale]/(site)/contact/page.tsx          | 116 +++----
 app/[locale]/(site)/layout.tsx                |   4 +-
 app/[locale]/(site)/page.tsx                  | 255 +++++++--------
 app/[locale]/(site)/portfolio/[slug]/page.tsx |  34 +-
 app/[locale]/(site)/portfolio/page.tsx        |  20 +-
 app/[locale]/(site)/products/[slug]/page.tsx  |  26 +-
 app/[locale]/(site)/products/page.tsx         |  20 +-
 app/[locale]/(site)/success/page.tsx          |  10 +-
 app/[locale]/layout.tsx                       |   9 +-
 app/globals.css                               | 210 ++++++++-----
 app/layout.tsx                                |   2 +-
 app/root/page.tsx                             | 290 +++++++++---------
 components.json                               |  21 ++
 components/footer.tsx                         |  42 ++-
 components/navbar.tsx                         |  97 +++---
 components/theme-provider.tsx                 |  15 +-
 components/theme-toggle.tsx                   |  18 +-
 docker-compose.yml                            |  18 +-
 package-lock.json                             |  58 ++++
 package.json                                  |   3 +
 src/components/layout/app-header.tsx          |  23 ++
 src/components/layout/app-shell.tsx           |  24 ++
 src/components/layout/app-sidebar.tsx         |  52 ++++
 src/components/ui/badge.tsx                   |  30 ++
 src/components/ui/button.tsx                  |  48 +++
 src/components/ui/card.tsx                    |  44 +++
 src/components/ui/input.tsx                   |  22 ++
 src/components/ui/label.tsx                   |   9 +
 src/components/ui/separator.tsx               |  22 ++
 src/components/ui/textarea.tsx                |  21 ++
 tailwind.config.ts                            |  65 +++-
 32 files changed, 1070 insertions(+), 600 deletions(-)
 create mode 100644 components.json
 create mode 100644 src/components/layout/app-header.tsx
 create mode 100644 src/components/layout/app-shell.tsx
 create mode 100644 src/components/layout/app-sidebar.tsx
 create mode 100644 src/components/ui/badge.tsx
 create mode 100644 src/components/ui/button.tsx
 create mode 100644 src/components/ui/card.tsx
 create mode 100644 src/components/ui/input.tsx
 create mode 100644 src/components/ui/label.tsx
 create mode 100644 src/components/ui/separator.tsx
 create mode 100644 src/components/ui/textarea.tsx

diff --git a/app/[locale]/(site)/about/page.tsx b/app/[locale]/(site)/about/page.tsx
index 8866996..9ae8bc1 100644
--- a/app/[locale]/(site)/about/page.tsx
+++ b/app/[locale]/(site)/about/page.tsx
@@ -50,46 +50,46 @@ export default function AboutPage({ params: { locale } }: AboutPageProps) {
   return (
     <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
       <MotionFade>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-10">
-          <h1 className="text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
+        <section className="rounded-3xl border border-default bg-surface p-6   lg:p-10">
+          <h1 className="text-3xl font-semibold text-fg sm:text-4xl">
             {copy.title}
           </h1>
-          <p className="mt-4 max-w-3xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
+          <p className="mt-4 max-w-3xl text-base text-muted sm:text-lg">
             {copy.intro}
           </p>
         </section>
       </MotionFade>
 
       <MotionFade delay={0.05}>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
+        <section className="rounded-3xl border border-default bg-surface p-6   lg:p-8">
+          <h2 className="text-2xl font-semibold text-fg">
             {copy.valuesTitle}
           </h2>
           <div className="mt-6 grid gap-4 md:grid-cols-3">
-            <article className="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900">
-              <Compass className="h-5 w-5 text-zinc-700 dark:text-zinc-200" />
-              <h3 className="mt-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+            <article className="rounded-2xl border border-default bg-surface-soft p-5  ">
+              <Compass className="h-5 w-5 text-muted-strong" />
+              <h3 className="mt-3 text-lg font-semibold text-fg">
                 {copy.valueA}
               </h3>
-              <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+              <p className="mt-2 text-sm text-muted">
                 {copy.valueAText}
               </p>
             </article>
-            <article className="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900">
-              <Layers3 className="h-5 w-5 text-zinc-700 dark:text-zinc-200" />
-              <h3 className="mt-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+            <article className="rounded-2xl border border-default bg-surface-soft p-5  ">
+              <Layers3 className="h-5 w-5 text-muted-strong" />
+              <h3 className="mt-3 text-lg font-semibold text-fg">
                 {copy.valueB}
               </h3>
-              <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+              <p className="mt-2 text-sm text-muted">
                 {copy.valueBText}
               </p>
             </article>
-            <article className="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900">
-              <Users className="h-5 w-5 text-zinc-700 dark:text-zinc-200" />
-              <h3 className="mt-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+            <article className="rounded-2xl border border-default bg-surface-soft p-5  ">
+              <Users className="h-5 w-5 text-muted-strong" />
+              <h3 className="mt-3 text-lg font-semibold text-fg">
                 {copy.valueC}
               </h3>
-              <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+              <p className="mt-2 text-sm text-muted">
                 {copy.valueCText}
               </p>
             </article>
@@ -98,17 +98,17 @@ export default function AboutPage({ params: { locale } }: AboutPageProps) {
       </MotionFade>
 
       <MotionFade delay={0.1}>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
+        <section className="rounded-3xl border border-default bg-surface p-6   lg:p-8">
+          <h2 className="text-2xl font-semibold text-fg">
             {copy.processTitle}
           </h2>
           <ol className="mt-5 grid gap-3 sm:grid-cols-3">
             {[copy.processOne, copy.processTwo, copy.processThree].map((step, index) => (
               <li
                 key={step}
-                className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200"
+                className="rounded-xl border border-default bg-surface-soft p-4 text-sm text-muted-strong   text-muted-strong"
               >
-                <span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-zinc-200 text-xs font-semibold text-zinc-800 dark:bg-zinc-800 dark:text-zinc-100">
+                <span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-surface-elevated text-xs font-semibold text-muted-strong">
                   {index + 1}
                 </span>
                 <p>{step}</p>
diff --git a/app/[locale]/(site)/contact/page.tsx b/app/[locale]/(site)/contact/page.tsx
index dbe8f52..493a00d 100644
--- a/app/[locale]/(site)/contact/page.tsx
+++ b/app/[locale]/(site)/contact/page.tsx
@@ -3,6 +3,11 @@ import Link from "next/link";
 
 import { MotionFade } from "@/components/motion-fade";
 import { resolveLocale } from "@/lib/site-data";
+import { Button } from "@/src/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/src/components/ui/card";
+import { Input } from "@/src/components/ui/input";
+import { Label } from "@/src/components/ui/label";
+import { Textarea } from "@/src/components/ui/textarea";
 
 type ContactPageProps = {
   params: {
@@ -43,77 +48,58 @@ export default function ContactPage({ params: { locale } }: ContactPageProps) {
   return (
     <div className="mx-auto grid w-full max-w-6xl gap-6 px-4 py-10 sm:px-6 lg:grid-cols-2 lg:px-8 lg:py-14">
       <MotionFade>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <h1 className="text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
-            {copy.title}
-          </h1>
-          <p className="mt-4 text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
-            {copy.intro}
-          </p>
-
-          <ul className="mt-6 space-y-3 text-sm text-zinc-700 dark:text-zinc-200">
-            <li className="inline-flex items-center gap-2">
-              <Phone className="h-4 w-4" />
-              {copy.phone}
-            </li>
-            <li className="inline-flex items-center gap-2">
-              <Mail className="h-4 w-4" />
-              {copy.mail}
-            </li>
-            <li className="inline-flex items-center gap-2">
-              <MapPin className="h-4 w-4" />
-              {copy.city}
-            </li>
-          </ul>
-        </section>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-3xl sm:text-4xl">{copy.title}</CardTitle>
+            <p className="text-base text-muted-foreground sm:text-lg">{copy.intro}</p>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-3 text-sm text-foreground/85">
+              <li className="inline-flex items-center gap-2">
+                <Phone className="h-4 w-4" />
+                {copy.phone}
+              </li>
+              <li className="inline-flex items-center gap-2">
+                <Mail className="h-4 w-4" />
+                {copy.mail}
+              </li>
+              <li className="inline-flex items-center gap-2">
+                <MapPin className="h-4 w-4" />
+                {copy.city}
+              </li>
+            </ul>
+          </CardContent>
+        </Card>
       </MotionFade>
 
       <MotionFade delay={0.05}>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <form className="grid gap-4">
-            <label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
-              {copy.name}
-              <input
-                type="text"
-                className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
-                placeholder={copy.name}
-              />
-            </label>
+        <Card>
+          <CardContent className="pt-6">
+            <form className="grid gap-4">
+              <Label className="grid gap-2">
+                {copy.name}
+                <Input type="text" placeholder={copy.name} />
+              </Label>
 
-            <label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
-              {copy.email}
-              <input
-                type="email"
-                className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
-                placeholder={copy.email}
-              />
-            </label>
+              <Label className="grid gap-2">
+                {copy.email}
+                <Input type="email" placeholder={copy.email} />
+              </Label>
 
-            <label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
-              {copy.message}
-              <textarea
-                rows={5}
-                className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
-                placeholder={copy.message}
-              />
-            </label>
+              <Label className="grid gap-2">
+                {copy.message}
+                <Textarea rows={5} placeholder={copy.message} />
+              </Label>
 
-            <div className="flex flex-wrap gap-3">
-              <button
-                type="button"
-                className="inline-flex rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
-              >
-                {copy.submit}
-              </button>
-              <Link
-                href={`/${localeKey}/success`}
-                className="inline-flex rounded-lg border border-zinc-300 px-4 py-2.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
-              >
-                {copy.preview}
-              </Link>
-            </div>
-          </form>
-        </section>
+              <div className="flex flex-wrap gap-3">
+                <Button type="button">{copy.submit}</Button>
+                <Button asChild variant="outline">
+                  <Link href={`/${localeKey}/success`}>{copy.preview}</Link>
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
       </MotionFade>
     </div>
   );
diff --git a/app/[locale]/(site)/layout.tsx b/app/[locale]/(site)/layout.tsx
index 11ab56c..60e78b7 100644
--- a/app/[locale]/(site)/layout.tsx
+++ b/app/[locale]/(site)/layout.tsx
@@ -31,9 +31,9 @@ export default async function SiteLayout({ children, params: { locale } }: SiteL
 
   return (
     <div className="flex min-h-screen flex-col">
-      <Navbar />
+      <Navbar isAdmin={authenticated} />
       <main className="flex-1">{children}</main>
-      <Footer />
+      <Footer isAdmin={authenticated} />
     </div>
   );
 }
diff --git a/app/[locale]/(site)/page.tsx b/app/[locale]/(site)/page.tsx
index b94a163..2f270c8 100644
--- a/app/[locale]/(site)/page.tsx
+++ b/app/[locale]/(site)/page.tsx
@@ -9,6 +9,8 @@ import Link from "next/link";
 
 import { MotionFade } from "@/components/motion-fade";
 import { pickText, portfolioItems, productItems, resolveLocale } from "@/lib/site-data";
+import { Button } from "@/src/components/ui/button";
+import { Card, CardContent } from "@/src/components/ui/card";
 
 type HomePageProps = {
   params: {
@@ -61,145 +63,148 @@ export default function HomePage({ params: { locale } }: HomePageProps) {
   return (
     <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
       <MotionFade>
-        <section className="grid gap-6 rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950 lg:grid-cols-[1.3fr_0.7fr] lg:p-10">
-          <div className="space-y-5">
-            <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-600 dark:text-zinc-300">
-              <Sparkles className="h-4 w-4" />
-              {copy.heroKicker}
-            </p>
-            <h1 className="text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl">
-              {copy.heroTitle}
-            </h1>
-            <p className="max-w-2xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
-              {copy.heroText}
-            </p>
-            <div className="flex flex-wrap gap-3">
-              <Link
-                href={`/${localeKey}/portfolio`}
-                className="inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
-              >
-                {copy.toPortfolio}
-                <ArrowRight className="h-4 w-4" />
-              </Link>
-              <Link
-                href={`/${localeKey}/products`}
-                className="inline-flex items-center gap-2 rounded-lg border border-zinc-300 px-4 py-2.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
-              >
-                {copy.toProducts}
-              </Link>
+        <Card>
+          <CardContent className="grid gap-6 p-6 lg:grid-cols-[1.3fr_0.7fr] lg:p-10">
+            <div className="space-y-5">
+              <p className="inline-flex items-center gap-2 text-sm font-medium text-muted">
+                <Sparkles className="h-4 w-4" />
+                {copy.heroKicker}
+              </p>
+              <h1 className="text-3xl font-semibold tracking-tight text-fg sm:text-5xl">
+                {copy.heroTitle}
+              </h1>
+              <p className="max-w-2xl text-base text-muted sm:text-lg">
+                {copy.heroText}
+              </p>
+              <div className="flex flex-wrap gap-3">
+                <Button asChild>
+                  <Link href={`/${localeKey}/portfolio`}>
+                    {copy.toPortfolio}
+                    <ArrowRight className="h-4 w-4" />
+                  </Link>
+                </Button>
+                <Button asChild variant="outline">
+                  <Link href={`/${localeKey}/products`}>{copy.toProducts}</Link>
+                </Button>
+              </div>
             </div>
-          </div>
 
-          <div className="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900">
-            <p className="mb-3 inline-flex items-center gap-2 text-sm font-medium text-zinc-600 dark:text-zinc-300">
-              <BriefcaseBusiness className="h-4 w-4" />
-              {copy.heroCardTitle}
-            </p>
-            <p className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">
-              {copy.heroCardText}
-            </p>
-          </div>
-        </section>
+            <div className="rounded-[var(--radius-input)] border border-border bg-muted p-5">
+              <p className="mb-3 inline-flex items-center gap-2 text-sm font-medium text-muted">
+                <BriefcaseBusiness className="h-4 w-4" />
+                {copy.heroCardTitle}
+              </p>
+              <p className="text-sm leading-relaxed text-muted">
+                {copy.heroCardText}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
       </MotionFade>
 
       <MotionFade delay={0.05}>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <div className="mb-6 flex items-center justify-between gap-4">
-            <div>
-              <h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
-                {copy.portfolioTitle}
-              </h2>
-              <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
-                {copy.portfolioText}
-              </p>
+        <Card>
+          <CardContent className="p-6 lg:p-8">
+            <div className="mb-6 flex items-center justify-between gap-4">
+              <div>
+                <h2 className="text-2xl font-semibold text-fg">
+                  {copy.portfolioTitle}
+                </h2>
+                <p className="mt-2 text-sm text-muted">
+                  {copy.portfolioText}
+                </p>
+              </div>
+              <BriefcaseBusiness className="h-5 w-5 text-subtle" />
             </div>
-            <BriefcaseBusiness className="h-5 w-5 text-zinc-500 dark:text-zinc-300" />
-          </div>
-          <div className="grid gap-4 md:grid-cols-3">
-            {featuredProjects.map((item) => (
-              <Link
-                key={item.slug}
-                href={`/${localeKey}/portfolio/${item.slug}`}
-                className="group rounded-2xl border border-zinc-200 bg-zinc-50 p-4 transition hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-600"
-              >
-                <p className="text-sm text-zinc-500 dark:text-zinc-400">
-                  {pickText(item.category, localeKey)} - {item.year}
-                </p>
-                <h3 className="mt-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
-                  {pickText(item.title, localeKey)}
-                </h3>
-                <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
-                  {pickText(item.summary, localeKey)}
-                </p>
-                <span className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-zinc-700 group-hover:text-zinc-900 dark:text-zinc-200 dark:group-hover:text-white">
-                  {copy.toPortfolio}
-                  <ArrowRight className="h-4 w-4" />
-                </span>
-              </Link>
-            ))}
-          </div>
-        </section>
+            <div className="grid gap-4 md:grid-cols-3">
+              {featuredProjects.map((item) => (
+                <Card key={item.slug} className="bg-muted/85 transition hover:border-input">
+                  <CardContent className="p-4">
+                    <Link href={`/${localeKey}/portfolio/${item.slug}`} className="group block">
+                      <p className="text-sm text-subtle">
+                        {pickText(item.category, localeKey)} - {item.year}
+                      </p>
+                      <h3 className="mt-2 text-lg font-semibold text-fg">
+                        {pickText(item.title, localeKey)}
+                      </h3>
+                      <p className="mt-2 text-sm text-muted">
+                        {pickText(item.summary, localeKey)}
+                      </p>
+                      <span className="group-hover-fg mt-4 inline-flex items-center gap-2 text-sm font-medium text-muted-strong">
+                        {copy.toPortfolio}
+                        <ArrowRight className="h-4 w-4" />
+                      </span>
+                    </Link>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
       </MotionFade>
 
       <MotionFade delay={0.1}>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <div className="mb-6 flex items-center justify-between gap-4">
-            <div>
-              <h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
-                {copy.productsTitle}
-              </h2>
-              <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
-                {copy.productsText}
-              </p>
+        <Card>
+          <CardContent className="p-6 lg:p-8">
+            <div className="mb-6 flex items-center justify-between gap-4">
+              <div>
+                <h2 className="text-2xl font-semibold text-fg">
+                  {copy.productsTitle}
+                </h2>
+                <p className="mt-2 text-sm text-muted">
+                  {copy.productsText}
+                </p>
+              </div>
+              <Boxes className="h-5 w-5 text-subtle" />
             </div>
-            <Boxes className="h-5 w-5 text-zinc-500 dark:text-zinc-300" />
-          </div>
-          <div className="grid gap-4 md:grid-cols-3">
-            {featuredProducts.map((item) => (
-              <Link
-                key={item.slug}
-                href={`/${localeKey}/products/${item.slug}`}
-                className="group rounded-2xl border border-zinc-200 bg-zinc-50 p-4 transition hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-600"
-              >
-                <p className="text-sm text-zinc-500 dark:text-zinc-400">
-                  {pickText(item.segment, localeKey)}
-                </p>
-                <h3 className="mt-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
-                  {pickText(item.name, localeKey)}
-                </h3>
-                <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
-                  {pickText(item.summary, localeKey)}
-                </p>
-                <p className="mt-3 text-sm font-medium text-zinc-700 dark:text-zinc-200">
-                  {pickText(item.price, localeKey)}
-                </p>
-              </Link>
-            ))}
-          </div>
-        </section>
+            <div className="grid gap-4 md:grid-cols-3">
+              {featuredProducts.map((item) => (
+                <Card key={item.slug} className="bg-muted/85 transition hover:border-input">
+                  <CardContent className="p-4">
+                    <Link href={`/${localeKey}/products/${item.slug}`} className="group block">
+                      <p className="text-sm text-subtle">
+                        {pickText(item.segment, localeKey)}
+                      </p>
+                      <h3 className="mt-2 text-lg font-semibold text-fg">
+                        {pickText(item.name, localeKey)}
+                      </h3>
+                      <p className="mt-2 text-sm text-muted">
+                        {pickText(item.summary, localeKey)}
+                      </p>
+                      <p className="mt-3 text-sm font-medium text-muted-strong">
+                        {pickText(item.price, localeKey)}
+                      </p>
+                    </Link>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
       </MotionFade>
 
       <MotionFade delay={0.15}>
-        <section className="rounded-3xl border border-zinc-200 bg-zinc-900 p-6 text-zinc-100 dark:border-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 lg:p-8">
-          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-            <div>
-              <p className="inline-flex items-center gap-2 text-sm font-medium opacity-80">
-                <Mail className="h-4 w-4" />
-                {copy.ctaTitle}
-              </p>
-              <p className="mt-2 max-w-2xl text-sm opacity-90 sm:text-base">
-                {copy.ctaText}
-              </p>
+        <Card className="bg-foreground text-background">
+          <CardContent className="p-6 lg:p-8">
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+              <div>
+                <p className="inline-flex items-center gap-2 text-sm font-medium opacity-80">
+                  <Mail className="h-4 w-4" />
+                  {copy.ctaTitle}
+                </p>
+                <p className="mt-2 max-w-2xl text-sm opacity-90 sm:text-base">
+                  {copy.ctaText}
+                </p>
+              </div>
+              <Button asChild variant="secondary">
+                <Link href={`/${localeKey}/contact`}>
+                  {copy.toContact}
+                  <ArrowRight className="h-4 w-4" />
+                </Link>
+              </Button>
             </div>
-            <Link
-              href={`/${localeKey}/contact`}
-              className="inline-flex items-center justify-center gap-2 rounded-lg bg-white px-4 py-2.5 text-sm font-semibold text-zinc-900 transition hover:bg-zinc-200 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-700"
-            >
-              {copy.toContact}
-              <ArrowRight className="h-4 w-4" />
-            </Link>
-          </div>
-        </section>
+          </CardContent>
+        </Card>
       </MotionFade>
     </div>
   );
diff --git a/app/[locale]/(site)/portfolio/[slug]/page.tsx b/app/[locale]/(site)/portfolio/[slug]/page.tsx
index e08b371..a9ec89a 100644
--- a/app/[locale]/(site)/portfolio/[slug]/page.tsx
+++ b/app/[locale]/(site)/portfolio/[slug]/page.tsx
@@ -62,31 +62,31 @@ export default function PortfolioItemPage({
   return (
     <div className="mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
       <MotionFade>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-10">
+        <section className="rounded-3xl border border-default bg-surface p-6   lg:p-10">
           <Link
             href={`/${localeKey}/portfolio`}
-            className="inline-flex items-center gap-2 text-sm text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+            className="inline-flex items-center gap-2 text-sm text-muted transition hover:text-fg"
           >
             <ArrowLeft className="h-4 w-4" />
             {copy.back}
           </Link>
-          <h1 className="mt-5 text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
+          <h1 className="mt-5 text-3xl font-semibold text-fg sm:text-4xl">
             {pickText(item.title, localeKey)}
           </h1>
-          <p className="mt-4 text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
+          <p className="mt-4 text-base text-muted sm:text-lg">
             {pickText(item.summary, localeKey)}
           </p>
 
-          <div className="mt-6 flex flex-wrap gap-3 text-sm text-zinc-600 dark:text-zinc-300">
-            <span className="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900">
+          <div className="mt-6 flex flex-wrap gap-3 text-sm text-muted">
+            <span className="inline-flex items-center gap-2 rounded-lg border border-default bg-surface-soft px-3 py-2  ">
               <Tag className="h-4 w-4" />
               {pickText(item.category, localeKey)}
             </span>
-            <span className="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900">
+            <span className="inline-flex items-center gap-2 rounded-lg border border-default bg-surface-soft px-3 py-2  ">
               <CalendarDays className="h-4 w-4" />
               {item.year}
             </span>
-            <span className="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900">
+            <span className="inline-flex items-center gap-2 rounded-lg border border-default bg-surface-soft px-3 py-2  ">
               <FolderKanban className="h-4 w-4" />
               {item.slug}
             </span>
@@ -96,31 +96,31 @@ export default function PortfolioItemPage({
 
       <div className="grid gap-4 md:grid-cols-3">
         <MotionFade delay={0.05}>
-          <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
-            <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          <article className="rounded-2xl border border-default bg-surface p-5  ">
+            <h2 className="text-lg font-semibold text-fg">
               {copy.challenge}
             </h2>
-            <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+            <p className="mt-2 text-sm text-muted">
               {copy.challengeText}
             </p>
           </article>
         </MotionFade>
         <MotionFade delay={0.1}>
-          <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
-            <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          <article className="rounded-2xl border border-default bg-surface p-5  ">
+            <h2 className="text-lg font-semibold text-fg">
               {copy.solution}
             </h2>
-            <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+            <p className="mt-2 text-sm text-muted">
               {copy.solutionText}
             </p>
           </article>
         </MotionFade>
         <MotionFade delay={0.15}>
-          <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
-            <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          <article className="rounded-2xl border border-default bg-surface p-5  ">
+            <h2 className="text-lg font-semibold text-fg">
               {copy.outcome}
             </h2>
-            <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+            <p className="mt-2 text-sm text-muted">
               {copy.outcomeText}
             </p>
           </article>
diff --git a/app/[locale]/(site)/portfolio/page.tsx b/app/[locale]/(site)/portfolio/page.tsx
index c1c3536..6312262 100644
--- a/app/[locale]/(site)/portfolio/page.tsx
+++ b/app/[locale]/(site)/portfolio/page.tsx
@@ -29,14 +29,14 @@ export default function PortfolioPage({ params: { locale } }: PortfolioPageProps
   return (
     <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
       <MotionFade>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-10">
+        <section className="rounded-3xl border border-default bg-surface p-6   lg:p-10">
           <div className="flex items-center gap-3">
-            <FolderKanban className="h-5 w-5 text-zinc-700 dark:text-zinc-200" />
-            <h1 className="text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
+            <FolderKanban className="h-5 w-5 text-muted-strong" />
+            <h1 className="text-3xl font-semibold text-fg sm:text-4xl">
               {copy.title}
             </h1>
           </div>
-          <p className="mt-4 max-w-3xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
+          <p className="mt-4 max-w-3xl text-base text-muted sm:text-lg">
             {copy.intro}
           </p>
         </section>
@@ -47,24 +47,24 @@ export default function PortfolioPage({ params: { locale } }: PortfolioPageProps
           <MotionFade key={item.slug} delay={index * 0.05}>
             <Link
               href={`/${localeKey}/portfolio/${item.slug}`}
-              className="group block rounded-2xl border border-zinc-200 bg-white p-5 transition hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-zinc-600"
+              className="group block rounded-2xl border border-default bg-surface p-5 transition group-hover-border-strong   "
             >
               <div className="flex items-center justify-between gap-3">
-                <p className="text-sm text-zinc-500 dark:text-zinc-400">
+                <p className="text-sm text-subtle">
                   {pickText(item.category, localeKey)}
                 </p>
-                <p className="inline-flex items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400">
+                <p className="inline-flex items-center gap-1 text-xs text-subtle">
                   <CalendarDays className="h-3.5 w-3.5" />
                   {item.year}
                 </p>
               </div>
-              <h2 className="mt-3 text-xl font-semibold text-zinc-900 dark:text-zinc-100">
+              <h2 className="mt-3 text-xl font-semibold text-fg">
                 {pickText(item.title, localeKey)}
               </h2>
-              <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+              <p className="mt-2 text-sm text-muted">
                 {pickText(item.summary, localeKey)}
               </p>
-              <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-zinc-700 group-hover:text-zinc-900 dark:text-zinc-200 dark:group-hover:text-white">
+              <p className="group-hover-fg mt-4 inline-flex items-center gap-2 text-sm font-medium text-muted-strong">
                 {copy.open}
                 <ArrowUpRight className="h-4 w-4" />
               </p>
diff --git a/app/[locale]/(site)/products/[slug]/page.tsx b/app/[locale]/(site)/products/[slug]/page.tsx
index 1c78dc1..18d90c7 100644
--- a/app/[locale]/(site)/products/[slug]/page.tsx
+++ b/app/[locale]/(site)/products/[slug]/page.tsx
@@ -52,32 +52,32 @@ export default function ProductPage({ params: { locale, slug } }: ProductPagePro
   return (
     <div className="mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
       <MotionFade>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-10">
+        <section className="rounded-3xl border border-default bg-surface p-6   lg:p-10">
           <Link
             href={`/${localeKey}/products`}
-            className="inline-flex items-center gap-2 text-sm text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+            className="inline-flex items-center gap-2 text-sm text-muted transition hover:text-fg"
           >
             <ArrowLeft className="h-4 w-4" />
             {copy.back}
           </Link>
 
-          <h1 className="mt-5 text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
+          <h1 className="mt-5 text-3xl font-semibold text-fg sm:text-4xl">
             {pickText(item.name, localeKey)}
           </h1>
-          <p className="mt-4 text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
+          <p className="mt-4 text-base text-muted sm:text-lg">
             {pickText(item.summary, localeKey)}
           </p>
 
-          <div className="mt-6 flex flex-wrap gap-3 text-sm text-zinc-600 dark:text-zinc-300">
-            <span className="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900">
+          <div className="mt-6 flex flex-wrap gap-3 text-sm text-muted">
+            <span className="inline-flex items-center gap-2 rounded-lg border border-default bg-surface-soft px-3 py-2  ">
               <Layers2 className="h-4 w-4" />
               {pickText(item.segment, localeKey)}
             </span>
-            <span className="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900">
+            <span className="inline-flex items-center gap-2 rounded-lg border border-default bg-surface-soft px-3 py-2  ">
               <BadgeEuro className="h-4 w-4" />
               {pickText(item.price, localeKey)}
             </span>
-            <span className="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900">
+            <span className="inline-flex items-center gap-2 rounded-lg border border-default bg-surface-soft px-3 py-2  ">
               <Boxes className="h-4 w-4" />
               {item.slug}
             </span>
@@ -86,17 +86,17 @@ export default function ProductPage({ params: { locale, slug } }: ProductPagePro
       </MotionFade>
 
       <MotionFade delay={0.05}>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100">
+        <section className="rounded-3xl border border-default bg-surface p-6   lg:p-8">
+          <h2 className="text-xl font-semibold text-fg">
             {copy.included}
           </h2>
           <ul className="mt-4 grid gap-3 sm:grid-cols-3">
             {[copy.stepOne, copy.stepTwo, copy.stepThree].map((step, index) => (
               <li
                 key={step}
-                className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200"
+                className="rounded-xl border border-default bg-surface-soft p-4 text-sm text-muted-strong   text-muted-strong"
               >
-                <span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-zinc-200 text-xs font-semibold text-zinc-800 dark:bg-zinc-800 dark:text-zinc-100">
+                <span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-surface-elevated text-xs font-semibold text-muted-strong">
                   {index + 1}
                 </span>
                 <p>{step}</p>
@@ -105,7 +105,7 @@ export default function ProductPage({ params: { locale, slug } }: ProductPagePro
           </ul>
           <Link
             href={`/${localeKey}/contact`}
-            className="mt-6 inline-flex rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
+            className="mt-6 inline-flex rounded-lg bg-inverse px-4 py-2.5 text-sm font-medium text-inverse transition hover:opacity-90  "
           >
             {copy.action}
           </Link>
diff --git a/app/[locale]/(site)/products/page.tsx b/app/[locale]/(site)/products/page.tsx
index a345c55..1c463ca 100644
--- a/app/[locale]/(site)/products/page.tsx
+++ b/app/[locale]/(site)/products/page.tsx
@@ -29,14 +29,14 @@ export default function ProductsPage({ params: { locale } }: ProductsPageProps)
   return (
     <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
       <MotionFade>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-10">
+        <section className="rounded-3xl border border-default bg-surface p-6   lg:p-10">
           <div className="flex items-center gap-3">
-            <Boxes className="h-5 w-5 text-zinc-700 dark:text-zinc-200" />
-            <h1 className="text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
+            <Boxes className="h-5 w-5 text-muted-strong" />
+            <h1 className="text-3xl font-semibold text-fg sm:text-4xl">
               {copy.title}
             </h1>
           </div>
-          <p className="mt-4 max-w-3xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
+          <p className="mt-4 max-w-3xl text-base text-muted sm:text-lg">
             {copy.intro}
           </p>
         </section>
@@ -47,22 +47,22 @@ export default function ProductsPage({ params: { locale } }: ProductsPageProps)
           <MotionFade key={item.slug} delay={index * 0.05}>
             <Link
               href={`/${localeKey}/products/${item.slug}`}
-              className="group block rounded-2xl border border-zinc-200 bg-white p-5 transition hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-zinc-600"
+              className="group block rounded-2xl border border-default bg-surface p-5 transition group-hover-border-strong   "
             >
-              <p className="text-sm text-zinc-500 dark:text-zinc-400">
+              <p className="text-sm text-subtle">
                 {pickText(item.segment, localeKey)}
               </p>
-              <h2 className="mt-3 text-xl font-semibold text-zinc-900 dark:text-zinc-100">
+              <h2 className="mt-3 text-xl font-semibold text-fg">
                 {pickText(item.name, localeKey)}
               </h2>
-              <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+              <p className="mt-2 text-sm text-muted">
                 {pickText(item.summary, localeKey)}
               </p>
-              <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
+              <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-muted-strong">
                 <CircleDollarSign className="h-4 w-4" />
                 {pickText(item.price, localeKey)}
               </p>
-              <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-zinc-700 group-hover:text-zinc-900 dark:text-zinc-200 dark:group-hover:text-white">
+              <p className="group-hover-fg mt-4 inline-flex items-center gap-2 text-sm font-medium text-muted-strong">
                 {copy.open}
                 <ArrowUpRight className="h-4 w-4" />
               </p>
diff --git a/app/[locale]/(site)/success/page.tsx b/app/[locale]/(site)/success/page.tsx
index 150afec..9b3337c 100644
--- a/app/[locale]/(site)/success/page.tsx
+++ b/app/[locale]/(site)/success/page.tsx
@@ -31,24 +31,24 @@ export default function SuccessPage({ params: { locale } }: SuccessPageProps) {
   return (
     <div className="mx-auto flex w-full max-w-4xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
       <MotionFade className="w-full">
-        <section className="w-full rounded-3xl border border-zinc-200 bg-white p-8 text-center dark:border-zinc-800 dark:bg-zinc-950">
+        <section className="w-full rounded-3xl border border-default bg-surface p-8 text-center  ">
           <CheckCircle2 className="mx-auto h-12 w-12 text-emerald-500" />
-          <h1 className="mt-4 text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
+          <h1 className="mt-4 text-3xl font-semibold text-fg sm:text-4xl">
             {copy.title}
           </h1>
-          <p className="mx-auto mt-3 max-w-2xl text-base text-zinc-600 dark:text-zinc-300">
+          <p className="mx-auto mt-3 max-w-2xl text-base text-muted">
             {copy.text}
           </p>
           <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
             <Link
               href={`/${localeKey}`}
-              className="inline-flex rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
+              className="inline-flex rounded-lg bg-inverse px-4 py-2.5 text-sm font-medium text-inverse transition hover:opacity-90  "
             >
               {copy.home}
             </Link>
             <Link
               href={`/${localeKey}/contact`}
-              className="inline-flex rounded-lg border border-zinc-300 px-4 py-2.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
+              className="inline-flex rounded-lg border border-strong px-4 py-2.5 text-sm font-medium text-muted-strong transition hover-surface-soft  text-muted-strong"
             >
               {copy.contact}
             </Link>
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index dc30e94..12f3789 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -37,14 +37,7 @@ export default async function LocaleLayout({
 
   return (
     <NextIntlClientProvider messages={messages}>
-      <ThemeProvider
-        attribute="class"
-        defaultTheme="system"
-        enableSystem
-        disableTransitionOnChange
-      >
-        {children}
-      </ThemeProvider>
+      <ThemeProvider>{children}</ThemeProvider>
     </NextIntlClientProvider>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index fb227e3..93b5f5d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,191 +3,243 @@
 @tailwind utilities;
 
 :root {
-  --color-bg: #f5f6f8;
-  --color-fg: #111214;
-  --color-surface: #ffffff;
-  --color-surface-soft: #eef0f3;
-  --color-surface-elevated: #fdfdfd;
+  --background: 220 23% 97%;
+  --foreground: 222 22% 11%;
 
-  --color-border: #dde1e7;
-  --color-border-strong: #bec5d0;
+  --card: 0 0% 100%;
+  --card-foreground: 222 22% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 22% 11%;
 
-  --color-muted: #4b5565;
-  --color-muted-strong: #374151;
-  --color-subtle: #6b7380;
+  --primary: 10 74% 50%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 214 19% 93%;
+  --secondary-foreground: 222 22% 11%;
+  --muted: 215 20% 92%;
+  --muted-foreground: 219 15% 35%;
+  --accent: 44 93% 55%;
+  --accent-foreground: 222 22% 11%;
+  --destructive: 0 72% 45%;
+  --destructive-foreground: 210 40% 98%;
 
-  --color-inverse-bg: #111214;
-  --color-inverse-fg: #f3f4f6;
+  --surface: 0 0% 100%;
+  --surface-soft: 215 18% 93%;
+  --surface-elevated: 0 0% 99%;
+  --border: 215 20% 88%;
+  --input: 215 20% 83%;
+  --ring: 10 74% 50%;
 
-  --color-brand-primary: #dd4124;
-  --color-brand-secondary: #f7b91f;
+  --radius: 0.85rem;
+  --radius-card: 1rem;
+  --radius-input: 0.7rem;
+  --radius-sidebar: 1rem;
 
-  --color-success-bg: #dcfce7;
-  --color-success-fg: #166534;
-  --color-warning-bg: #fef3c7;
-  --color-warning-fg: #92400e;
-  --color-danger-bg: #fee2e2;
-  --color-danger-fg: #991b1b;
+  --shadow-xs: 0 1px 2px 0 hsl(220 30% 10% / 0.06);
+  --shadow-sm: 0 6px 18px -14px hsl(220 32% 20% / 0.18);
+  --shadow-md: 0 18px 35px -24px hsl(220 32% 20% / 0.24);
+  --shadow-lg: 0 24px 55px -30px hsl(220 32% 20% / 0.3);
+  --shadow-card: 0 10px 30px -20px hsl(220 35% 10% / 0.22);
+  --shadow-sidebar: inset 0 1px 0 0 hsl(0 0% 100% / 0.08);
+
+  --sidebar-background: 220 27% 96%;
+  --sidebar-foreground: 223 18% 24%;
+  --sidebar-primary: 10 74% 50%;
+  --sidebar-primary-foreground: 210 40% 98%;
+  --sidebar-accent: 220 24% 91%;
+  --sidebar-accent-foreground: 222 20% 15%;
+  --sidebar-border: 216 20% 85%;
+  --sidebar-ring: 10 74% 50%;
+
+  --focus-ring: 0 0 0 2px hsl(var(--ring) / 0.35);
 }
 
 .dark {
-  --color-bg: #090b0f;
-  --color-fg: #eef1f7;
-  --color-surface: #10141c;
-  --color-surface-soft: #151b24;
-  --color-surface-elevated: #1b2230;
+  --background: 223 32% 7%;
+  --foreground: 216 36% 93%;
 
-  --color-border: #2a3342;
-  --color-border-strong: #3a465a;
+  --card: 221 29% 11%;
+  --card-foreground: 216 36% 93%;
+  --popover: 221 29% 11%;
+  --popover-foreground: 216 36% 93%;
 
-  --color-muted: #c6cfdd;
-  --color-muted-strong: #dbe4f3;
-  --color-subtle: #98a4b8;
+  --primary: 10 80% 56%;
+  --primary-foreground: 216 36% 93%;
+  --secondary: 221 23% 18%;
+  --secondary-foreground: 216 36% 93%;
+  --muted: 221 21% 20%;
+  --muted-foreground: 218 17% 76%;
+  --accent: 44 92% 52%;
+  --accent-foreground: 221 29% 11%;
+  --destructive: 0 72% 50%;
+  --destructive-foreground: 216 36% 93%;
 
-  --color-inverse-bg: #eff3f9;
-  --color-inverse-fg: #0e1118;
+  --surface: 221 29% 11%;
+  --surface-soft: 220 24% 15%;
+  --surface-elevated: 220 21% 20%;
+  --border: 221 21% 24%;
+  --input: 221 20% 27%;
+  --ring: 10 80% 56%;
 
-  --color-success-bg: rgba(22, 101, 52, 0.35);
-  --color-success-fg: #86efac;
-  --color-warning-bg: rgba(146, 64, 14, 0.35);
-  --color-warning-fg: #fde68a;
-  --color-danger-bg: rgba(153, 27, 27, 0.35);
-  --color-danger-fg: #fecaca;
+  --shadow-xs: 0 1px 2px 0 hsl(220 40% 2% / 0.5);
+  --shadow-sm: 0 8px 20px -12px hsl(220 40% 2% / 0.65);
+  --shadow-md: 0 18px 36px -20px hsl(220 40% 2% / 0.75);
+  --shadow-lg: 0 28px 60px -28px hsl(220 40% 2% / 0.85);
+  --shadow-card: 0 16px 34px -24px hsl(220 40% 2% / 0.8);
+  --shadow-sidebar: inset 0 1px 0 0 hsl(216 36% 93% / 0.05);
+
+  --sidebar-background: 223 30% 9%;
+  --sidebar-foreground: 216 28% 86%;
+  --sidebar-primary: 10 80% 56%;
+  --sidebar-primary-foreground: 216 36% 93%;
+  --sidebar-accent: 221 23% 17%;
+  --sidebar-accent-foreground: 216 36% 93%;
+  --sidebar-border: 221 20% 21%;
+  --sidebar-ring: 10 80% 56%;
 }
 
 html {
   color-scheme: light;
-  background-color: var(--color-bg);
+  background-color: hsl(var(--background));
 }
 
 html.dark {
   color-scheme: dark;
 }
 
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply min-h-screen bg-background text-foreground antialiased;
+  }
+}
+
 body {
-  min-height: 100vh;
-  color: var(--color-fg);
-  background: var(--color-bg);
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
 }
 
 ::selection {
-  background: color-mix(in oklab, var(--color-brand-primary) 72%, black 0%);
-  color: #ffffff;
+  background: hsl(var(--primary) / 0.82);
+  color: hsl(var(--primary-foreground));
 }
 
 @layer utilities {
   .bg-app {
-    background-color: var(--color-bg);
+    background-color: hsl(var(--background));
   }
 
   .bg-surface {
-    background-color: var(--color-surface);
+    background-color: hsl(var(--surface));
   }
 
   .bg-surface-soft {
-    background-color: var(--color-surface-soft);
+    background-color: hsl(var(--surface-soft));
   }
 
   .bg-surface-elevated {
-    background-color: var(--color-surface-elevated);
+    background-color: hsl(var(--surface-elevated));
   }
 
   .bg-inverse {
-    background-color: var(--color-inverse-bg);
+    background-color: hsl(var(--foreground));
   }
 
   .text-fg {
-    color: var(--color-fg);
+    color: hsl(var(--foreground));
   }
 
   .text-muted {
-    color: var(--color-muted);
+    color: hsl(var(--muted-foreground));
   }
 
   .text-muted-strong {
-    color: var(--color-muted-strong);
+    color: hsl(var(--foreground) / 0.86);
   }
 
   .text-subtle {
-    color: var(--color-subtle);
+    color: hsl(var(--muted-foreground) / 0.88);
   }
 
   .text-inverse {
-    color: var(--color-inverse-fg);
+    color: hsl(var(--background));
   }
 
   .border-default {
-    border-color: var(--color-border);
+    border-color: hsl(var(--border));
   }
 
   .border-strong {
-    border-color: var(--color-border-strong);
+    border-color: hsl(var(--input));
   }
 
   .status-success {
-    background-color: var(--color-success-bg);
-    color: var(--color-success-fg);
+    background-color: hsl(142 70% 45% / 0.15);
+    color: hsl(142 72% 34%);
   }
 
   .status-warning {
-    background-color: var(--color-warning-bg);
-    color: var(--color-warning-fg);
+    background-color: hsl(38 92% 56% / 0.17);
+    color: hsl(33 92% 34%);
   }
 
   .status-danger {
-    background-color: var(--color-danger-bg);
-    color: var(--color-danger-fg);
+    background-color: hsl(var(--destructive) / 0.18);
+    color: hsl(var(--destructive));
   }
 
   .hover-surface-soft:hover {
-    background-color: var(--color-surface-soft);
+    background-color: hsl(var(--surface-soft));
   }
 
   .hover-fg:hover {
-    color: var(--color-fg);
+    color: hsl(var(--foreground));
   }
 
   .group:hover .group-hover-fg {
-    color: var(--color-fg);
+    color: hsl(var(--foreground));
   }
 
   .group:hover .group-hover-border-strong {
-    border-color: var(--color-border-strong);
+    border-color: hsl(var(--input));
   }
 
   .btn-primary {
-    background-color: var(--color-inverse-bg);
-    color: var(--color-inverse-fg);
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
   }
 
   .btn-primary:hover {
-    opacity: 0.9;
+    filter: brightness(0.95);
   }
 
   .btn-secondary {
-    border: 1px solid var(--color-border-strong);
-    color: var(--color-muted-strong);
+    border: 1px solid hsl(var(--input));
+    color: hsl(var(--foreground) / 0.88);
     background-color: transparent;
   }
 
   .btn-secondary:hover {
-    background-color: var(--color-surface-soft);
+    background-color: hsl(var(--surface-soft));
   }
 
   .field-surface {
-    border: 1px solid var(--color-border-strong);
-    background-color: var(--color-surface);
-    color: var(--color-fg);
+    border: 1px solid hsl(var(--input));
+    background-color: hsl(var(--surface));
+    color: hsl(var(--foreground));
+    border-radius: var(--radius-input);
   }
 
   .field-surface:focus {
     outline: none;
-    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
+    box-shadow: var(--focus-ring);
   }
 
 
   .brand-gradient-text {
-    background: linear-gradient(120deg, var(--color-brand-primary), var(--color-brand-secondary));
+    background: linear-gradient(120deg, hsl(var(--primary)), hsl(var(--accent)));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
@@ -195,8 +247,8 @@ body {
 
   .brand-glow {
     box-shadow:
-      0 10px 40px -16px color-mix(in oklab, var(--color-brand-primary) 52%, transparent),
-      0 8px 32px -18px color-mix(in oklab, var(--color-brand-secondary) 58%, transparent);
+      0 10px 40px -16px hsl(var(--primary) / 0.45),
+      0 8px 32px -18px hsl(var(--accent) / 0.45);
   }
 
   .float-slow {
diff --git a/app/layout.tsx b/app/layout.tsx
index 9351006..e0ffcb8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="de" suppressHydrationWarning>
-      <body className="min-h-screen antialiased">{children}</body>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/app/root/page.tsx b/app/root/page.tsx
index 7fad369..d7ac480 100644
--- a/app/root/page.tsx
+++ b/app/root/page.tsx
@@ -1,7 +1,9 @@
 import {
+  ArrowLeft,
   BarChart3,
   Boxes,
   FolderKanban,
+  LayoutDashboard,
   LockKeyhole,
   LogOut,
   Power,
@@ -11,8 +13,10 @@ import {
 import { revalidatePath } from "next/cache";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import Link from "next/link";
 
 import { MotionFade } from "@/components/motion-fade";
+import { routing } from "@/i18n/routing";
 import {
   clearAdminSessionCookie,
   getAdminLockState,
@@ -23,9 +27,17 @@ import {
   resetAdminFailedAttempts,
   setAdminSessionCookie,
 } from "@/lib/admin-auth";
-import { routing } from "@/i18n/routing";
 import { getMaintenanceMode, setMaintenanceMode } from "@/lib/app-config";
 import { resolveLocale } from "@/lib/site-data";
+import { AppHeader } from "@/src/components/layout/app-header";
+import { AppShell } from "@/src/components/layout/app-shell";
+import { AppSidebar } from "@/src/components/layout/app-sidebar";
+import { Badge } from "@/src/components/ui/badge";
+import { Button } from "@/src/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/src/components/ui/card";
+import { Input } from "@/src/components/ui/input";
+import { Label } from "@/src/components/ui/label";
+
 
 type RootPageProps = {
   searchParams?: {
@@ -126,6 +138,7 @@ export default async function RootPage({ searchParams }: RootPageProps) {
           basicAuthMissing:
             "ROOT_BASIC_AUTH_USER und ROOT_BASIC_AUTH_PASS fehlen in env.",
           logout: "Ausloggen",
+          backToSite: "Zur Website",
         }
       : {
           title: "Root",
@@ -155,63 +168,56 @@ export default async function RootPage({ searchParams }: RootPageProps) {
           basicAuthMissing:
             "ROOT_BASIC_AUTH_USER and ROOT_BASIC_AUTH_PASS are missing in env.",
           logout: "Sign out",
+          backToSite: "Back to site",
         };
 
   if (!authenticated) {
     return (
       <div className="mx-auto flex w-full max-w-xl flex-col gap-6 px-4 py-12 sm:px-6 lg:px-8">
         <MotionFade>
-          <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-            <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
-              <LockKeyhole className="h-4 w-4" />
-              {copy.loginTitle}
-            </p>
-            <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">{copy.loginText}</p>
-
-            {!authConfigured ? (
-              <p className="mt-4 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300">
-                {copy.configMissing}
-              </p>
-            ) : null}
-
-            {!basicConfigured ? (
-              <p className="mt-4 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300">
-                {copy.basicAuthMissing}
-              </p>
-            ) : null}
-
-            {searchParams?.error === "invalid" ? (
-              <p className="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-300">
-                {copy.invalidLogin}
-              </p>
-            ) : null}
-
-            {searchParams?.error === "locked" || lockState.locked ? (
-              <p className="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-300">
-                {copy.lockedLogin}
-              </p>
-            ) : null}
-
-            <form action={loginAction} className="mt-5 space-y-3">
-              <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-200">
-                {copy.passwordLabel}
-              </label>
-              <input
-                type="password"
-                name="password"
-                required
-                className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none ring-zinc-300 focus:ring-2 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:ring-zinc-700"
-              />
-              <button
-                type="submit"
-                className="inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
-                disabled={!authConfigured || !basicConfigured || lockState.locked}
-              >
+          <Card>
+            <CardHeader>
+              <p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
                 <LockKeyhole className="h-4 w-4" />
-                {copy.loginButton}
-              </button>
-            </form>
-          </section>
+                {copy.loginTitle}
+              </p>
+              <CardDescription>{copy.loginText}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {!authConfigured ? (
+                <p className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                  {copy.configMissing}
+                </p>
+              ) : null}
+
+              {!basicConfigured ? (
+                <p className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                  {copy.basicAuthMissing}
+                </p>
+              ) : null}
+
+              {searchParams?.error === "invalid" ? (
+                <p className="mb-4 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-300">
+                  {copy.invalidLogin}
+                </p>
+              ) : null}
+
+              {searchParams?.error === "locked" || lockState.locked ? (
+                <p className="mb-4 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-300">
+                  {copy.lockedLogin}
+                </p>
+              ) : null}
+
+              <form action={loginAction} className="space-y-3">
+                <Label htmlFor="password">{copy.passwordLabel}</Label>
+                <Input id="password" type="password" name="password" required />
+                <Button type="submit" disabled={!authConfigured || !basicConfigured || lockState.locked}>
+                  <LockKeyhole className="mr-2 h-4 w-4" />
+                  {copy.loginButton}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
         </MotionFade>
       </div>
     );
@@ -224,102 +230,102 @@ export default async function RootPage({ searchParams }: RootPageProps) {
     { label: copy.conversion, value: "4.8%", icon: BarChart3 },
   ];
 
+  const sidebarItems = [
+    { label: copy.title, href: "/root", icon: LayoutDashboard, active: true },
+    { label: copy.maintenanceTitle, href: "#maintenance", icon: ShieldAlert },
+    { label: copy.updates, href: "#updates", icon: FolderKanban },
+  ];
+
   return (
-    <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
-      <MotionFade>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-10">
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <h1 className="text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
-              {copy.title}
-            </h1>
+    <AppShell
+      sidebar={
+        <AppSidebar
+          title={copy.title}
+          description={copy.subtitle}
+          items={sidebarItems}
+          footer={
             <form action={logoutAction}>
-              <button
-                type="submit"
-                className="inline-flex items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-900"
-              >
-                <LogOut className="h-4 w-4" />
+              <Button type="submit" variant="outline" className="w-full justify-start">
+                <LogOut className="mr-2 h-4 w-4" />
                 {copy.logout}
-              </button>
+              </Button>
             </form>
-          </div>
-          <p className="mt-4 max-w-3xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
-            {copy.subtitle}
-          </p>
+          }
+        />
+      }
+      header={
+        <AppHeader
+          title={copy.title}
+          description={copy.subtitle}
+          actions={
+            <>
+              <Badge variant={maintenanceEnabled ? "warning" : "success"}>
+                {maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
+              </Badge>
+              <Button asChild variant="outline">
+                <Link href={`/${localeKey}`}>
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                  {copy.backToSite}
+                </Link>
+              </Button>
+            </>
+          }
+        />
+      }
+    >
+      <div className="grid gap-6">
+        <MotionFade delay={0.05}>
+          <Card id="maintenance">
+            <CardHeader>
+              <CardTitle className="text-xl">{copy.maintenanceTitle}</CardTitle>
+              <CardDescription>{copy.maintenanceText}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form action={updateMaintenanceMode}>
+                <input type="hidden" name="enabled" value={maintenanceEnabled ? "false" : "true"} />
+                <Button type="submit">
+                  <Power className="mr-2 h-4 w-4" />
+                  {maintenanceEnabled ? copy.disableMaintenance : copy.enableMaintenance}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        </MotionFade>
+
+        <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {stats.map((item, index) => {
+            const Icon = item.icon;
+            return (
+              <MotionFade key={item.label} delay={index * 0.05}>
+                <Card>
+                  <CardContent className="p-5">
+                    <Icon className="h-5 w-5 text-muted-foreground" />
+                    <p className="mt-3 text-sm text-muted-foreground">{item.label}</p>
+                    <p className="mt-1 text-2xl font-semibold text-foreground">{item.value}</p>
+                  </CardContent>
+                </Card>
+              </MotionFade>
+            );
+          })}
         </section>
-      </MotionFade>
 
-      <MotionFade delay={0.05}>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <div className="flex flex-wrap items-start justify-between gap-4">
-            <div>
-              <p className="inline-flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
-                <ShieldAlert className="h-4 w-4" />
-                {copy.maintenanceTitle}
-              </p>
-              <p className="mt-2 max-w-2xl text-sm text-zinc-600 dark:text-zinc-300">
-                {copy.maintenanceText}
-              </p>
-            </div>
-            <span
-              className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${
-                maintenanceEnabled
-                  ? "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200"
-                  : "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200"
-              }`}
-            >
-              {maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
-            </span>
-          </div>
-
-          <form action={updateMaintenanceMode} className="mt-5">
-            <input
-              type="hidden"
-              name="enabled"
-              value={maintenanceEnabled ? "false" : "true"}
-            />
-            <button
-              type="submit"
-              className="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:border-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
-            >
-              <Power className="h-4 w-4" />
-              {maintenanceEnabled ? copy.disableMaintenance : copy.enableMaintenance}
-            </button>
-          </form>
-        </section>
-      </MotionFade>
-
-      <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {stats.map((item, index) => {
-          const Icon = item.icon;
-          return (
-            <MotionFade key={item.label} delay={index * 0.05}>
-              <article className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
-                <Icon className="h-5 w-5 text-zinc-700 dark:text-zinc-200" />
-                <p className="mt-3 text-sm text-zinc-500 dark:text-zinc-400">{item.label}</p>
-                <p className="mt-1 text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
-                  {item.value}
-                </p>
-              </article>
-            </MotionFade>
-          );
-        })}
-      </section>
-
-      <MotionFade delay={0.1}>
-        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
-          <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{copy.updates}</h2>
-          <ul className="mt-4 space-y-3">
-            {[copy.updateOne, copy.updateTwo, copy.updateThree].map((item) => (
-              <li
-                key={item}
-                className="rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200"
-              >
-                {item}
-              </li>
-            ))}
-          </ul>
-        </section>
-      </MotionFade>
-    </div>
+        <MotionFade delay={0.1}>
+          <Card id="updates">
+            <CardHeader>
+              <CardTitle className="text-xl">{copy.updates}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-3">
+                {[copy.updateOne, copy.updateTwo, copy.updateThree].map((item) => (
+                  <li key={item} className="rounded-[var(--radius-input)] border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        </MotionFade>
+      </div>
+    </AppShell>
   );
 }
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..d137d8c
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/src/components",
+    "utils": "@/lib/utils",
+    "ui": "@/src/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/src/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/components/footer.tsx b/components/footer.tsx
index c476379..074faf8 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -7,41 +7,37 @@ const navItems = [
   { key: "products", path: "/products" },
   { key: "about", path: "/about" },
   { key: "contact", path: "/contact" },
-  { key: "root", path: "/root" },
 ];
 
-export function Footer() {
+type FooterProps = {
+  isAdmin?: boolean;
+};
+
+export function Footer({ isAdmin = false }: FooterProps) {
   const locale = useLocale();
   const tNav = useTranslations("navigation");
   const tFooter = useTranslations("footer");
 
   return (
-    <footer className="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
+    <footer className="border-t border-default bg-surface-soft">
       <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-8 sm:px-6 lg:px-8">
         <nav className="flex flex-wrap gap-4 text-sm">
           {navItems.map((item) => (
-            item.key === "root" ? (
-              <a
-                key={item.key}
-                href="/root"
-                className="text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
-              >
-                {tNav(item.key)}
-              </a>
-            ) : (
-              <Link
-                key={item.key}
-                href={`/${locale}${item.path}`}
-                className="text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
-              >
-                {tNav(item.key)}
-              </Link>
-            )
+            <Link
+              key={item.key}
+              href={`/${locale}${item.path}`}
+              className="text-muted transition hover:text-fg"
+            >
+              {tNav(item.key)}
+            </Link>
           ))}
+          {isAdmin ? (
+            <a href="/root" className="text-muted transition hover:text-fg">
+              {tNav("root")}
+            </a>
+          ) : null}
         </nav>
-        <p className="text-xs text-zinc-500 dark:text-zinc-400">
-          {tFooter("copyright", { year: new Date().getFullYear() })}
-        </p>
+        <p className="text-xs text-subtle">{tFooter("copyright", { year: new Date().getFullYear() })}</p>
       </div>
     </footer>
   );
diff --git a/components/navbar.tsx b/components/navbar.tsx
index d9f74a5..ef54c4f 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -7,6 +7,7 @@ import { useLocale, useTranslations } from "next-intl";
 import { useState } from "react";
 
 import { ThemeToggle } from "@/components/theme-toggle";
+import { Button } from "@/src/components/ui/button";
 
 const navItems = [
   { key: "home", path: "" },
@@ -14,21 +15,24 @@ const navItems = [
   { key: "products", path: "/products" },
   { key: "about", path: "/about" },
   { key: "contact", path: "/contact" },
-  { key: "root", path: "/root" },
 ];
 
-export function Navbar() {
+type NavbarProps = {
+  isAdmin?: boolean;
+};
+
+export function Navbar({ isAdmin = false }: NavbarProps) {
   const [isOpen, setIsOpen] = useState(false);
   const locale = useLocale();
   const t = useTranslations("navigation");
 
   return (
-    <header className="sticky top-0 z-40 border-b border-zinc-200 bg-white/95 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/95">
+    <header className="sticky top-0 z-40 border-b border-default bg-surface backdrop-blur">
       <div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-4 py-3 sm:px-6 lg:px-8">
         <div className="flex items-center gap-3">
           <Link
             href={`/${locale}`}
-            className="inline-flex items-center rounded-md border border-zinc-300 bg-white px-3 py-2 dark:border-zinc-700 dark:bg-zinc-950"
+            className="inline-flex items-center rounded-md border border-input bg-card px-3 py-2 shadow-xs"
           >
             <Image
               src="/logos/light-primary.svg"
@@ -49,80 +53,65 @@ export function Navbar() {
           </Link>
           <nav className="hidden items-center gap-5 md:flex">
             {navItems.map((item) => (
-              item.key === "root" ? (
-                <a
-                  key={item.key}
-                  href="/root"
-                  className="text-sm text-zinc-700 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
-                >
-                  {t(item.key)}
-                </a>
-              ) : (
-                <Link
-                  key={item.key}
-                  href={`/${locale}${item.path}`}
-                  className="text-sm text-zinc-700 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
-                >
-                  {t(item.key)}
-                </Link>
-              )
+              <Link
+                key={item.key}
+                href={`/${locale}${item.path}`}
+                className="text-sm text-muted transition hover:text-fg"
+              >
+                {t(item.key)}
+              </Link>
             ))}
+            {isAdmin ? (
+              <a href="/root" className="text-sm text-muted transition hover:text-fg">
+                {t("root")}
+              </a>
+            ) : null}
           </nav>
         </div>
 
         <div className="hidden items-center gap-2 md:flex">
           <ThemeToggle />
-          <button
-            type="button"
-            className="rounded-md border border-zinc-300 px-3 py-2 text-xs font-medium text-zinc-600 dark:border-zinc-700 dark:text-zinc-300"
-          >
+          <Button type="button" variant="outline" size="sm" className="text-xs">
             {t("languagePlaceholder")}
-          </button>
+          </Button>
         </div>
 
-        <button
+        <Button
           type="button"
           onClick={() => setIsOpen((open) => !open)}
-          className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-zinc-300 text-zinc-700 md:hidden dark:border-zinc-700 dark:text-zinc-200"
+          variant="outline"
+          size="icon"
+          className="md:hidden"
           aria-label={isOpen ? t("closeMenu") : t("openMenu")}
         >
           {isOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
-        </button>
+        </Button>
       </div>
 
       {isOpen ? (
-        <div className="border-t border-zinc-200 px-4 py-4 md:hidden dark:border-zinc-800">
+        <div className="border-t border-default px-4 py-4 md:hidden">
           <nav className="flex flex-col gap-3">
             {navItems.map((item) => (
-              item.key === "root" ? (
-                <a
-                  key={item.key}
-                  href="/root"
-                  className="text-sm text-zinc-700 dark:text-zinc-300"
-                  onClick={() => setIsOpen(false)}
-                >
-                  {t(item.key)}
-                </a>
-              ) : (
-                <Link
-                  key={item.key}
-                  href={`/${locale}${item.path}`}
-                  className="text-sm text-zinc-700 dark:text-zinc-300"
-                  onClick={() => setIsOpen(false)}
-                >
-                  {t(item.key)}
-                </Link>
-              )
+              <Link
+                key={item.key}
+                href={`/${locale}${item.path}`}
+                className="text-sm text-muted"
+                onClick={() => setIsOpen(false)}
+              >
+                {t(item.key)}
+              </Link>
             ))}
+            {isAdmin ? (
+              <a href="/root" className="text-sm text-muted" onClick={() => setIsOpen(false)}>
+                {t("root")}
+              </a>
+            ) : null}
           </nav>
           <div className="mt-4 flex items-center gap-2">
             <ThemeToggle />
-            <button
-              type="button"
-              className="rounded-md border border-zinc-300 px-3 py-2 text-xs font-medium text-zinc-600 dark:border-zinc-700 dark:text-zinc-300"
-            >
+            <Button type="button" variant="outline" size="sm" className="text-xs">
               {t("languagePlaceholder")}
-            </button>
+            </Button>
           </div>
         </div>
       ) : null}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
index e478fc4..feb05d5 100644
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -2,6 +2,19 @@
 
 import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes";
 
+const defaultThemeProps: ThemeProviderProps = {
+  attribute: "class",
+  defaultTheme: "system",
+  enableSystem: true,
+  disableTransitionOnChange: true,
+  enableColorScheme: true,
+  storageKey: "mohfarawati-theme",
+};
+
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+  return (
+    <NextThemesProvider {...defaultThemeProps} {...props}>
+      {children}
+    </NextThemesProvider>
+  );
 }
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
index 89f2bf9..16738cd 100644
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -3,6 +3,7 @@
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
+import { Button } from "@/src/components/ui/button";
 
 export function ThemeToggle() {
   const { setTheme, theme, resolvedTheme } = useTheme();
@@ -14,13 +15,9 @@ export function ThemeToggle() {
 
   if (!mounted) {
     return (
-      <button
-        type="button"
-        className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-zinc-300 text-zinc-600 dark:border-zinc-700 dark:text-zinc-200"
-        aria-label="Toggle theme"
-      >
+      <Button type="button" variant="outline" size="icon" aria-label="Toggle theme">
         <Moon className="h-4 w-4" />
-      </button>
+      </Button>
     );
   }
 
@@ -28,13 +25,8 @@ export function ThemeToggle() {
   const isDark = activeTheme === "dark";
 
   return (
-    <button
-      type="button"
-      onClick={() => setTheme(isDark ? "light" : "dark")}
-      className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-zinc-300 text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
-      aria-label="Toggle theme"
-    >
+    <Button type="button" variant="outline" size="icon" onClick={() => setTheme(isDark ? "light" : "dark")} aria-label="Toggle theme">
       {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-    </button>
+    </Button>
   );
 }
diff --git a/docker-compose.yml b/docker-compose.yml
index 3cbf121..a9ac4f4 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,14 +1,16 @@
+name: mohfarawati-de
+
 services:
   app:
     build:
       context: .
       dockerfile: Dockerfile
-    container_name: moh-sass-app
+    container_name: moh-sass-de-app
     restart: unless-stopped
     environment:
       NODE_ENV: production
       NEXT_TELEMETRY_DISABLED: "1"
-      DATABASE_URL: ${DATABASE_URL:-postgresql://postgres:postgres@db:5432/moh_sass?schema=public}
+      DATABASE_URL: postgresql://postgres:postgres@db:5432/moh_sass?schema=public
       ADMIN_PASSWORD: ${ADMIN_PASSWORD:-change-me}
       ADMIN_AUTH_SECRET: ${ADMIN_AUTH_SECRET:-change-me-long-secret}
       ROOT_BASIC_AUTH_USER: ${ROOT_BASIC_AUTH_USER:-root}
@@ -16,6 +18,8 @@ services:
     depends_on:
       db:
         condition: service_healthy
+    ports:
+      - "3000:3000"
     healthcheck:
       test: ["CMD-SHELL", "wget -q -O /dev/null http://127.0.0.1:3000/api/health || exit 1"]
       interval: 15s
@@ -25,18 +29,16 @@ services:
     labels:
       - "traefik.enable=true"
       - "traefik.docker.network=proxy"
-      - "traefik.http.routers.mohfarawati.rule=Host(`mohfarawati.de`) || Host(`www.mohfarawati.de`)"
-      - "traefik.http.routers.mohfarawati.entrypoints=websecure"
-      - "traefik.http.routers.mohfarawati.tls=true"
-      - "traefik.http.routers.mohfarawati.tls.certresolver=cf"
-      - "traefik.http.services.mohfarawati.loadbalancer.server.port=3000"
+      - "traefik.http.routers.mohfarawati-de.rule=Host(`mohfarawati.de`) || Host(`www.mohfarawati.de`)"
+      - "traefik.http.routers.mohfarawati-de.entrypoints=web"
+      - "traefik.http.services.mohfarawati-de.loadbalancer.server.port=3000"
     networks:
       - appnet
       - proxy
 
   db:
     image: postgres:16-alpine
-    container_name: moh-sass-db
+    container_name: moh-sass-de-db
     restart: unless-stopped
     environment:
       POSTGRES_DB: moh_sass
diff --git a/package-lock.json b/package-lock.json
index 01418b7..1d2326e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@prisma/adapter-pg": "^7.4.2",
         "@prisma/client": "^7.4.2",
+        "@radix-ui/react-slot": "^1.2.4",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^12.35.0",
         "lucide-react": "^0.577.0",
@@ -33,6 +35,7 @@
         "postcss": "^8",
         "prisma": "^7.4.2",
         "tailwindcss": "^3.4.1",
+        "tailwindcss-animate": "^1.0.7",
         "typescript": "^5"
       }
     },
@@ -1149,6 +1152,39 @@
         "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -2615,6 +2651,18 @@
         "consola": "^3.2.3"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -7271,6 +7319,16 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
diff --git a/package.json b/package.json
index d01a7ed..e4b2450 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
   "dependencies": {
     "@prisma/adapter-pg": "^7.4.2",
     "@prisma/client": "^7.4.2",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.35.0",
     "lucide-react": "^0.577.0",
@@ -41,6 +43,7 @@
     "postcss": "^8",
     "prisma": "^7.4.2",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5"
   }
 }
diff --git a/src/components/layout/app-header.tsx b/src/components/layout/app-header.tsx
new file mode 100644
index 0000000..cb36e0c
--- /dev/null
+++ b/src/components/layout/app-header.tsx
@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+import { Card, CardContent } from "@/src/components/ui/card";
+
+type AppHeaderProps = {
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+};
+
+export function AppHeader({ title, description, actions }: AppHeaderProps) {
+  return (
+    <Card>
+      <CardContent className="flex flex-wrap items-start justify-between gap-4 p-6 lg:p-8">
+        <div>
+          <h1 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">{title}</h1>
+          {description ? <p className="mt-2 max-w-3xl text-sm text-muted-foreground sm:text-base">{description}</p> : null}
+        </div>
+        {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
new file mode 100644
index 0000000..403c382
--- /dev/null
+++ b/src/components/layout/app-shell.tsx
@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+type AppShellProps = {
+  sidebar: ReactNode;
+  header: ReactNode;
+  children: ReactNode;
+  className?: string;
+};
+
+export function AppShell({ sidebar, header, children, className }: AppShellProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="mx-auto flex w-full max-w-[1400px] gap-6 px-4 py-6 sm:px-6 lg:px-8">
+        <aside className="hidden w-72 shrink-0 md:block">{sidebar}</aside>
+        <div className={cn("flex min-w-0 flex-1 flex-col gap-6", className)}>
+          {header}
+          <main>{children}</main>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/app-sidebar.tsx b/src/components/layout/app-sidebar.tsx
new file mode 100644
index 0000000..340bda2
--- /dev/null
+++ b/src/components/layout/app-sidebar.tsx
@@ -0,0 +1,52 @@
+import Link from "next/link";
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+import { Card, CardContent, CardHeader, CardTitle } from "@/src/components/ui/card";
+
+type SidebarItem = {
+  label: string;
+  href: string;
+  icon: LucideIcon;
+  active?: boolean;
+};
+
+type AppSidebarProps = {
+  title: string;
+  description: string;
+  items: SidebarItem[];
+  footer?: ReactNode;
+};
+
+export function AppSidebar({ title, description, items, footer }: AppSidebarProps) {
+  return (
+    <Card className="sticky top-6 overflow-hidden border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sidebar">
+      <CardHeader className="pb-4">
+        <CardTitle className="text-base font-semibold">{title}</CardTitle>
+        <p className="text-sm text-sidebar-foreground/70">{description}</p>
+      </CardHeader>
+      <CardContent className="space-y-1 px-3 pb-3 pt-0">
+        {items.map((item) => {
+          const Icon = item.icon;
+          return (
+            <Link
+              key={item.label}
+              href={item.href}
+              className={cn(
+                "flex items-center gap-2 rounded-[var(--radius-sidebar)] px-3 py-2 text-sm transition",
+                item.active
+                  ? "bg-sidebar-primary text-sidebar-primary-foreground"
+                  : "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+              )}
+            >
+              <Icon className="h-4 w-4" />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+      </CardContent>
+      {footer ? <div className="border-t border-sidebar-border px-4 py-3">{footer}</div> : null}
+    </Card>
+  );
+}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..0c6585a
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "text-foreground",
+        success: "border-transparent bg-emerald-600/20 text-emerald-700 dark:text-emerald-300",
+        warning: "border-transparent bg-amber-500/20 text-amber-700 dark:text-amber-300",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..6500f71
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:brightness-95",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/85",
+        outline: "border border-input bg-background shadow-xs hover:bg-muted",
+        ghost: "hover:bg-muted hover:text-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        destructive: "bg-destructive text-destructive-foreground shadow-xs hover:brightness-95",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..57c8782
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,44 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-[var(--radius-card)] border border-border bg-card text-card-foreground shadow-card",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />,
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />,
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />,
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />,
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..245e5f8
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-[var(--radius-input)] border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..12bffcc
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return <label className={cn("text-sm font-medium text-foreground/90", className)} {...props} />;
+}
+
+export { Label };
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..813b609
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+type SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {
+  orientation?: "horizontal" | "vertical";
+};
+
+function Separator({ className, orientation = "horizontal", ...props }: SeparatorProps) {
+  return (
+    <div
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7438f52
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[88px] w-full rounded-[var(--radius-input)] border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d43da91..e88c5ef 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,19 +1,78 @@
 import type { Config } from "tailwindcss";
+import animate from "tailwindcss-animate";
 
 const config: Config = {
+  darkMode: ["class"],
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "var(--radius-input)",
+        sm: "calc(var(--radius-input) - 2px)",
+        card: "var(--radius-card)",
+        sidebar: "var(--radius-sidebar)",
+      },
+      boxShadow: {
+        xs: "var(--shadow-xs)",
+        sm: "var(--shadow-sm)",
+        md: "var(--shadow-md)",
+        lg: "var(--shadow-lg)",
+        card: "var(--shadow-card)",
+        sidebar: "var(--shadow-sidebar)",
       },
     },
   },
-  plugins: [],
+  plugins: [animate],
 };
 export default config;