diff --git a/app/(app)/(legal)/imprint/page.tsx b/app/(app)/(legal)/imprint/page.tsx
deleted file mode 100644
index 29fd55d..0000000
--- a/app/(app)/(legal)/imprint/page.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * @file app/(legal)/imprint/page.tsx
- * @description Server component rendering the imprint/legal notice page tailored to the app layout design.
- */
-
-import AppFooter from "@/components/layout/AppFooter";
-import { AppHeader } from "@/components/layout/AppHeader";
-
-export default async function ImprintPage() {
-  return (
-    <div className="flex flex-col h-full w-full bg-background p-4 min-h-0 overflow-hidden">
-      <AppHeader isLegalImprint />
-      <div className="flex-1 overflow-y-auto flex flex-col gap-4 py-4 min-h-0 pr-1">
-        {/* Information pursuant to § 5 DDG */}
-        <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
-          <h2 className="text-base font-semibold text-white flex items-center gap-2 font-mono">
-            <span className="text-accent">//</span> Information Pursuant to § 5
-            DDG
-          </h2>
-          <div className="font-mono text-xs bg-background border border-surface/80 rounded-xl p-4 text-foreground space-y-1">
-            <p className="font-semibold text-white">André Kempf</p>
-            <p className="text-accent">Full-Stack Web Developer</p>
-            <p className="text-muted">Großschneidersweg 2a</p>
-            <p className="text-muted">76149 Karlsruhe, Germany</p>
-          </div>
-          <p className="text-xs text-muted">
-            Also responsible for content pursuant to § 18 Abs. 2 MStV.
-          </p>
-        </div>
-
-        {/* Contact */}
-        <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
-          <h2 className="text-base font-semibold text-white flex items-center gap-2 font-mono">
-            <span className="text-accent">//</span> Contact
-          </h2>
-          <div className="p-4 bg-background border border-surface/80 rounded-xl font-mono text-xs">
-            <p className="text-muted">
-              <span className="text-white">Email:</span>{" "}
-              <span className="text-accent hover:underline cursor-pointer">
-                dev@andre-kempf.com
-              </span>
-            </p>
-          </div>
-        </div>
-
-        {/* Disclaimer */}
-        <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
-          <h2 className="text-base font-semibold text-white flex items-center gap-2 font-mono">
-            <span className="text-accent">//</span> Disclaimer & Legal Notes
-          </h2>
-          <div className="space-y-1">
-            <h3 className="font-semibold text-white text-sm">
-              Liability for Content
-            </h3>
-            <p className="text-muted">
-              As a service provider, I am responsible for my own content on
-              these pages according to general laws pursuant to § 7 Abs. 1 DDG.
-              However, according to §§ 8 to 10 DDG, I am not obligated to
-              monitor transmitted or stored third-party information or to
-              investigate circumstances that indicate illegal activity.
-            </p>
-          </div>
-          <div className="space-y-1 pt-3 border-t border-surface/60">
-            <h3 className="font-semibold text-white text-sm">
-              Liability for Links
-            </h3>
-            <p className="text-muted">
-              My website contains links to external third-party websites over
-              whose content I have no control. Therefore, I cannot accept any
-              liability for these external contents. The respective provider or
-              operator of the pages is always responsible for the content of the
-              linked pages.
-            </p>
-          </div>
-          <div className="space-y-1 pt-3 border-t border-surface/60">
-            <h3 className="font-semibold text-white text-sm">Copyright</h3>
-            <p className="text-muted">
-              The content and works created on these pages are subject to German
-              copyright law. Duplication, processing, distribution, or any form
-              of commercialization beyond the scope of copyright law require the
-              prior written consent of the author or creator.
-            </p>
-          </div>
-        </div>
-
-        {/* Dispute Resolution */}
-        <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
-          <h2 className="text-base font-semibold text-white flex items-center gap-2 font-mono">
-            <span className="text-accent">//</span> Dispute Resolution
-          </h2>
-          <p className="text-muted">
-            The European Commission provides a platform for online dispute
-            resolution (OS):{" "}
-            <a
-              href="https://ec.europa.eu/consumers/odr/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-accent hover:underline break-all"
-            >
-              https://ec.europa.eu/consumers/odr/
-            </a>
-            .<br />I am neither willing nor obligated to participate in dispute
-            resolution proceedings before a consumer arbitration board.
-          </p>
-        </div>
-      </div>
-      <AppFooter />
-    </div>
-  );
-}
diff --git a/app/(app)/(legal)/privacy/page.tsx b/app/(app)/(legal)/privacy/page.tsx
deleted file mode 100644
index d01ff8f..0000000
--- a/app/(app)/(legal)/privacy/page.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * @file app/(legal)/privacy/page.tsx
- * @description Server component rendering the privacy policy page tailored to the app layout design.
- */
-
-import AppFooter from "@/components/layout/AppFooter";
-import { AppHeader } from "@/components/layout/AppHeader";
-
-export default async function PrivacyPage() {
-  return (
-    <div className="flex flex-col h-full w-full bg-background p-4 min-h-0 overflow-hidden">
-      <AppHeader isLegalPrivacy />
-      <div className="flex-1 overflow-y-auto flex flex-col gap-4 py-4 min-h-0 pr-1">
-        {/* Overview */}
-        <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
-          <h2 className="text-base font-semibold text-white flex items-center gap-2 font-mono">
-            <span className="text-accent">//</span> Data Protection at a Glance
-          </h2>
-          <div className="space-y-2">
-            <h3 className="font-semibold text-white text-sm">
-              General Information
-            </h3>
-            <p className="text-muted">
-              The following notes provide a simple overview of what happens to
-              your personal data when you visit this website. Personal data is
-              any data that can be used to personally identify you.
-            </p>
-          </div>
-          <div className="space-y-2">
-            <h3 className="font-semibold text-white text-sm">
-              Data Collection on This Website
-            </h3>
-            <p className="text-muted">
-              Data processing on this website is carried out by the website
-              operator. Your data is collected when you provide it to us, or
-              automatically by our IT systems when you visit the site.
-            </p>
-          </div>
-        </div>
-
-        {/* Responsible Party */}
-        <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
-          <h2 className="text-base font-semibold text-white flex items-center gap-2 font-mono">
-            <span className="text-accent">//</span> Responsible Party
-            (Controller)
-          </h2>
-          <p className="text-muted">
-            The controller responsible for data processing on this website is:
-          </p>
-          <div className="font-mono text-xs bg-background border border-surface/80 rounded-xl p-4 text-foreground space-y-1">
-            <p className="font-semibold text-white">André Kempf</p>
-            <p className="text-muted">Großschneidersweg 2a</p>
-            <p className="text-muted">76149 Karlsruhe, Germany</p>
-            <p className="pt-2 text-muted">
-              Email:{" "}
-              <span className="text-accent hover:underline cursor-pointer font-medium">
-                dev@andre-kempf.com
-              </span>
-            </p>
-          </div>
-        </div>
-
-        {/* Hosting & Server Log Files */}
-        <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
-          <h2 className="text-base font-semibold text-white flex items-center gap-2 font-mono">
-            <span className="text-accent">//</span> Hosting & Server
-            Infrastructure
-          </h2>
-          <p className="text-muted">
-            This website is hosted externally on web servers operated by Netcup
-            GmbH. Personal data processed on this website is stored on the
-            host&apos;s secure servers.
-          </p>
-          <p className="text-muted">
-            The hosting provider automatically processes technical access data
-            in server environment variables necessary to establish a stable
-            connection and deliver page assets securely.
-          </p>
-        </div>
-
-        {/* Server Analytics */}
-        <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
-          <h2 className="text-base font-semibold text-white flex items-center gap-2 font-mono">
-            <span className="text-accent">//</span> Server Analytics &
-            Privacy-First Tracking
-          </h2>
-          <p className="text-muted">
-            To evaluate website reach and optimize user experience, this website
-            processes minimal access metrics (e.g., total daily views, coarse
-            device category, and daily visitor counts).
-          </p>
-          <div className="p-4 rounded-xl bg-background/80 border border-surface/80 space-y-2 text-xs font-mono">
-            <p className="text-emerald-400 font-semibold">
-              // Key privacy guarantees:
-            </p>
-            <ul className="list-disc list-inside space-y-1 text-muted">
-              <li>
-                <strong className="text-white">No Cookies:</strong> We do not
-                store cookies or local storage identifiers on your device.
-              </li>
-              <li>
-                <strong className="text-white">Anonymized IPs:</strong> IP
-                addresses are instantly hashed with a daily salt and never
-                stored in plain text.
-              </li>
-              <li>
-                <strong className="text-white">Zero Third Parties:</strong>{" "}
-                Analytics data is processed locally on our own server and never
-                shared with external tracking services.
-              </li>
-            </ul>
-          </div>
-          <p className="text-xs text-muted">
-            The legal basis for this processing is our legitimate interest in
-            maintaining and optimizing our online portfolio (Art. 6(1)(f) GDPR).
-          </p>
-        </div>
-
-        {/* Your Rights */}
-        <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
-          <h2 className="text-base font-semibold text-white flex items-center gap-2 font-mono">
-            <span className="text-accent">//</span> Your Rights
-          </h2>
-          <p className="text-muted">
-            You have the right at any time to receive information free of charge
-            about the origin, recipient, and purpose of your stored personal
-            data. You also have a right to request the correction or deletion of
-            this data.
-          </p>
-        </div>
-      </div>
-      <AppFooter />
-    </div>
-  );
-}
diff --git a/app/(app)/legal/imprint/page.tsx b/app/(app)/legal/imprint/page.tsx
new file mode 100644
index 0000000..2bb8a9d
--- /dev/null
+++ b/app/(app)/legal/imprint/page.tsx
@@ -0,0 +1,100 @@
+/**
+ * @file app/(app)/legal/imprint/page.tsx
+ * @description Server component rendering the imprint/legal notice page tailored to the app layout design.
+ */
+
+/** Renders the imprint page containing legal information and statutory disclosures. */
+export default function ImprintPage() {
+  return (
+    <div className="text-sm space-y-3">
+      {/* Information pursuant to § 5 DDG */}
+      <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
+        <h2 className="text-base font-semibold flex items-center gap-2 font-mono">
+          <span className="text-accent">//</span> Information Pursuant to § 5
+          DDG
+        </h2>
+        <div className="font-mono bg-background border border-surface/80 rounded-xl p-4 space-y-1">
+          <p className="font-semibold">André Kempf</p>
+          <p className="text-accent">Full-Stack Web Developer</p>
+          <p className="text-muted">Großschneidersweg 2a</p>
+          <p className="text-muted">76149 Karlsruhe, Germany</p>
+        </div>
+        <p className=" text-muted text-xs">
+          Also responsible for content pursuant to § 18 Abs. 2 MStV.
+        </p>
+      </div>
+
+      {/* Contact */}
+      <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
+        <h2 className="text-base font-semibold flex items-center gap-2 font-mono">
+          <span className="text-accent">//</span> Contact
+        </h2>
+        <div className="p-4 bg-background border border-surface/80 rounded-xl font-mono">
+          <p>
+            <span>Email:</span>{" "}
+            <span className="text-accent hover:underline cursor-pointer">
+              dev@andre-kempf.com
+            </span>
+          </p>
+        </div>
+      </div>
+
+      {/* Disclaimer */}
+      <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
+        <h2 className="text-base font-semibold flex items-center gap-2 font-mono">
+          <span className="text-accent">//</span> Disclaimer & Legal Notes
+        </h2>
+        <div className="space-y-1">
+          <h3 className="font-semibold">Liability for Content</h3>
+          <p className="text-muted">
+            As a service provider, I am responsible for my own content on these
+            pages according to general laws pursuant to § 7 Abs. 1 DDG. However,
+            according to §§ 8 to 10 DDG, I am not obligated to monitor
+            transmitted or stored third-party information or to investigate
+            circumstances that indicate illegal activity.
+          </p>
+        </div>
+        <div className="space-y-1 pt-3 border-t border-surface/60">
+          <h3 className="font-semibold">Liability for Links</h3>
+          <p className="text-muted">
+            My website contains links to external third-party websites over
+            whose content I have no control. Therefore, I cannot accept any
+            liability for these external contents. The respective provider or
+            operator of the pages is always responsible for the content of the
+            linked pages.
+          </p>
+        </div>
+        <div className="space-y-1 pt-3 border-t border-surface/60">
+          <h3 className="font-semibold">Copyright</h3>
+          <p className="text-muted">
+            The content and works created on these pages are subject to German
+            copyright law. Duplication, processing, distribution, or any form of
+            commercialization beyond the scope of copyright law require the
+            prior written consent of the author or creator.
+          </p>
+        </div>
+      </div>
+
+      {/* Dispute Resolution */}
+      <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
+        <h2 className="text-base font-semibold flex items-center gap-2 font-mono">
+          <span className="text-accent">//</span> Dispute Resolution
+        </h2>
+        <p className="text-muted">
+          The European Commission provides a platform for online dispute
+          resolution (OS):{" "}
+          <a
+            href="https://ec.europa.eu/consumers/odr/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-accent hover:underline break-all"
+          >
+            https://ec.europa.eu/consumers/odr/
+          </a>
+          .<br />I am neither willing nor obligated to participate in dispute
+          resolution proceedings before a consumer arbitration board.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(app)/legal/page.tsx b/app/(app)/legal/page.tsx
new file mode 100644
index 0000000..3e3920a
--- /dev/null
+++ b/app/(app)/legal/page.tsx
@@ -0,0 +1,37 @@
+/**
+ * @file app/(app)/legal/page.tsx
+ * @description Legal page component handling tabbed navigation between imprint and privacy policy views.
+ */
+
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { AppHeader } from "@/components/layout/AppHeader";
+import ImprintPage from "./imprint/page";
+import PrivacyPage from "./privacy/page";
+import AppFooter from "@/components/layout/AppFooter";
+
+/** Renders the legal section layout with tab-based toggling between imprint and privacy notices. */
+export default function LegalPage() {
+  const searchParams = useSearchParams();
+
+  const tabParam = searchParams.get("tab");
+  const activeTab: "imprint" | "privacy" =
+    tabParam === "privacy" ? "privacy" : "imprint";
+
+  return (
+    <div className="flex flex-col h-full w-full bg-background p-4 min-h-0 overflow-hidden">
+      <AppHeader
+        isLegalImprint={activeTab === "imprint"}
+        isLegalPrivacy={activeTab === "privacy"}
+      />
+
+      {/* Content Area */}
+      <div className="flex-1 overflow-y-auto flex flex-col gap-4 py-4 min-h-0 pr-1">
+        {activeTab === "imprint" ? <ImprintPage /> : <PrivacyPage />}
+      </div>
+
+      <AppFooter />
+    </div>
+  );
+}
diff --git a/app/(app)/legal/privacy/page.tsx b/app/(app)/legal/privacy/page.tsx
new file mode 100644
index 0000000..46fc0be
--- /dev/null
+++ b/app/(app)/legal/privacy/page.tsx
@@ -0,0 +1,124 @@
+/**
+ * @file app/(app)/legal/privacy/page.tsx
+ * @description Server component rendering the privacy policy page tailored to the app layout design.
+ */
+
+/** Renders the privacy policy page detailing data protection and privacy practices. */
+export default function PrivacyPage() {
+  return (
+    <div className="text-sm space-y-3">
+      {/* Overview */}
+      <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
+        <h2 className="text-base font-semibold flex items-center gap-2 font-mono">
+          <span className="text-accent">//</span> Data Protection at a Glance
+        </h2>
+        <div className="space-y-2">
+          <h3 className="font-semibold">General Information</h3>
+          <p className="text-muted">
+            The following notes provide a simple overview of what happens to
+            your personal data when you visit this website. Personal data is any
+            data that can be used to personally identify you.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <h3 className="font-semibold">Data Collection on This Website</h3>
+          <p className="text-muted">
+            Data processing on this website is carried out by the website
+            operator. Your data is collected when you provide it to us, or
+            automatically by our IT systems when you visit the site.
+          </p>
+        </div>
+      </div>
+
+      {/* Responsible Party */}
+      <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
+        <h2 className="text-base font-semibold flex items-center gap-2 font-mono">
+          <span className="text-accent">//</span> Responsible Party (Controller)
+        </h2>
+        <p className="text-muted">
+          The controller responsible for data processing on this website is:
+        </p>
+        <div className="font-mono bg-background border border-surface/80 rounded-xl p-4 text-foreground space-y-1">
+          <p className="font-semibold">André Kempf</p>
+          <p className="text-muted">Großschneidersweg 2a</p>
+          <p className="text-muted">76149 Karlsruhe, Germany</p>
+          <p className="pt-2">
+            Email:{" "}
+            <span className="text-accent hover:underline cursor-pointer font-medium">
+              dev@andre-kempf.com
+            </span>
+          </p>
+        </div>
+      </div>
+
+      {/* Hosting & Server Log Files */}
+      <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
+        <h2 className="text-base font-semibold flex items-center gap-2 font-mono">
+          <span className="text-accent">//</span> Hosting & Server
+          Infrastructure
+        </h2>
+        <p className="text-muted">
+          This website is hosted externally on web servers operated by Netcup
+          GmbH. Personal data processed on this website is stored on the
+          host&apos;s secure servers.
+        </p>
+        <p className="text-muted">
+          The hosting provider automatically processes technical access data in
+          server environment variables necessary to establish a stable
+          connection and deliver page assets securely.
+        </p>
+      </div>
+
+      {/* Server Analytics */}
+      <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
+        <h2 className="text-base font-semibold flex items-center gap-2 font-mono">
+          <span className="text-accent">//</span> Server Analytics &
+          Privacy-First Tracking
+        </h2>
+        <p className="text-muted">
+          To evaluate website reach and optimize user experience, this website
+          processes minimal access metrics (e.g., total daily views, coarse
+          device category, and daily visitor counts).
+        </p>
+        <div className="p-4 rounded-xl bg-background/80 border border-surface/80 space-y-2 font-mono">
+          <p className="text-emerald-400 font-semibold">
+            // Key privacy guarantees:
+          </p>
+          <ul className="list-disc list-inside space-y-1 text-muted">
+            <li>
+              <strong className="text-foreground">No Cookies:</strong> We do not
+              store cookies or local storage identifiers on your device.
+            </li>
+            <li>
+              <strong className="text-foreground">Anonymized IPs:</strong> IP
+              addresses are instantly hashed with a daily salt and never stored
+              in plain text.
+            </li>
+            <li>
+              <strong className="text-foreground">Zero Third Parties:</strong>{" "}
+              Analytics data is processed locally on our own server and never
+              shared with external tracking services.
+            </li>
+          </ul>
+        </div>
+        <p className="text-xs text-muted">
+          The legal basis for this processing is our legitimate interest in
+          maintaining and optimizing our online portfolio (Art. 6(1)(f) GDPR).
+        </p>
+      </div>
+
+      {/* Your Rights */}
+      <div className="bg-surface border border-muted/20 rounded-xl p-6 shadow-xl space-y-3">
+        <h2 className="text-base font-semiboldflex items-center gap-2 font-mono">
+          <span className="text-accent">//</span> Your Rights
+        </h2>
+        <p className="text-muted">
+          You have the right at any time to receive information free of charge
+          about the origin, recipient, and purpose of your stored personal data.
+          You also have a right to request the correction or deletion of this
+          data.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/lib/legal.ts b/lib/legal.ts
index 6e03d39..21a76a5 100644
--- a/lib/legal.ts
+++ b/lib/legal.ts
@@ -7,8 +7,12 @@ import { FileText, ShieldCheck } from "lucide-react";
 
 /** List of legal navigation links with their corresponding route paths and icon identifiers. */
 export const LEGAL_LINKS = [
-  { name: "Imprint", href: "/imprint", iconName: "FileText" },
-  { name: "Privacy Policy", href: "/privacy", iconName: "ShieldCheck" },
+  { name: "Imprint", href: "/legal?tab=imprint", iconName: "FileText" },
+  {
+    name: "Privacy Policy",
+    href: "/legal?tab=privacy",
+    iconName: "ShieldCheck",
+  },
 ] as const;
 
 /** Mapping object linking string identifiers to their respective Lucide icon components. */