diff --git a/lawfirm-demos/demo-1/app/rechtsbereiche/page.tsx b/lawfirm-demos/demo-1/app/rechtsbereiche/page.tsx
new file mode 100644
index 0000000..503913f
--- /dev/null
+++ b/lawfirm-demos/demo-1/app/rechtsbereiche/page.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import {motion} from 'framer-motion';
+import SubpageHero from "@/components/SubpageHero";
+
+const rechtsgebiete = [
+    {
+        title: 'Arbeitsrecht',
+        lawyer: 'RA Dr. Mustermann',
+        description:
+            'Im Arbeitsrecht vertreten wir sowohl Arbeitnehmer:innen als auch Arbeitgeber:innen in allen Fragen rund um das Arbeitsverhältnis.',
+        example:
+            'Beispiel: Eine Arbeitnehmerin erhält eine fristlose Kündigung und möchte dagegen vorgehen.',
+    },
+    {
+        title: 'Familienrecht',
+        lawyer: 'RAin Künstler',
+        description:
+            'Wir unterstützen Sie in allen familienrechtlichen Angelegenheiten – von Scheidung bis Sorgerecht.',
+        example:
+            'Beispiel: Ein Ehepaar möchte sich einvernehmlich scheiden lassen und das Umgangsrecht für die Kinder regeln.',
+    },
+    {
+        title: 'Vertragsrecht',
+        lawyer: 'RA Dr. Mustermann',
+        description:
+            'Im Vertragsrecht prüfen und gestalten wir Verträge jeder Art und vertreten Sie bei Streitigkeiten.',
+        example:
+            'Beispiel: Ein Unternehmer möchte einen Dienstleistungsvertrag rechtssicher aufsetzen lassen.',
+    },
+];
+
+export default function RechtsgebietePage() {
+    return (
+        <div>
+            <SubpageHero
+                title="Unsere Rechtsgebiete"
+                subtitle="Ein Überblick über unsere Spezialisierungen und Ansprechpartner:innen."
+            />
+
+            <main className="bg-white py-24 px-6 md:px-16 lg:px-36 text-gray-900">
+                <div className="space-y-16">
+                    {rechtsgebiete.map((area, index) => (
+                        <motion.section
+                            key={area.title}
+                            initial={{opacity: 0, y: 30}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true, amount: 0.2}}
+                            transition={{duration: 0.6, delay: index * 0.1}}
+                            className="border-l-4 border-red-600 pl-6"
+                        >
+                            <h2 className="text-2xl md:text-3xl font-bold text-red-700 mb-2">{area.title}</h2>
+                            <p className="text-gray-800 text-base md:text-lg mb-2">{area.description}</p>
+                            <p className="text-gray-700 text-sm md:text-base mb-1 italic">{area.example}</p>
+                            <p className="text-sm text-gray-500">Zuständig: <span
+                                className="font-medium">{area.lawyer}</span></p>
+                        </motion.section>
+                    ))}
+                </div>
+            </main>
+        </div>
+    );
+}
diff --git a/lawfirm-demos/demo-1/components/Navbar.tsx b/lawfirm-demos/demo-1/components/Navbar.tsx
index b58dd08..a7ad88f 100644
--- a/lawfirm-demos/demo-1/components/Navbar.tsx
+++ b/lawfirm-demos/demo-1/components/Navbar.tsx
@@ -3,9 +3,13 @@
 import {useEffect, useState} from 'react';
 import Link from 'next/link';
 import Links from '@/app/Links';
+import {usePathname} from 'next/navigation';
 
 export default function Navbar() {
     const [scrolled, setScrolled] = useState(false);
+    const pathname = usePathname();
+
+    const isRoot = pathname === '/';
 
     useEffect(() => {
         const handleScroll = () => {
@@ -15,10 +19,12 @@ export default function Navbar() {
         return () => window.removeEventListener('scroll', handleScroll);
     }, []);
 
+    const isActiveScrolled = scrolled || !isRoot;
+
     return (
         <nav
             className={`fixed top-0 left-0 right-0 z-50 transition-colors duration-300 px-6 md:px-12 lg:px-24 py-5 ${
-                scrolled
+                isActiveScrolled
                     ? 'bg-white text-gray-900 shadow-md'
                     : 'bg-transparent text-white'
             }`}
@@ -29,8 +35,9 @@ export default function Navbar() {
                 </Link>
                 <div className="space-x-6 text-base md:text-lg font-semibold">
                     <Link href={Links.about}>Über uns</Link>
+                    <Link href={Links.legalFields}>Rechtsgebiete</Link>
                 </div>
             </div>
         </nav>
     );
-}
+}
\ No newline at end of file
diff --git a/lawfirm-demos/demo-1/components/SubpageHero.tsx b/lawfirm-demos/demo-1/components/SubpageHero.tsx
new file mode 100644
index 0000000..2b8ac6d
--- /dev/null
+++ b/lawfirm-demos/demo-1/components/SubpageHero.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import {motion} from 'framer-motion';
+
+export default function SubpageHero({
+                                        title,
+                                        subtitle,
+                                    }: {
+    title: string;
+    subtitle?: string;
+}) {
+    return (
+        <section className="relative min-h-[35vh] flex items-center bg-white px-6 md:px-16 lg:px-36 pt-24">
+            <div className="z-10 flex flex-col gap-y-2">
+                <motion.h1
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6}}
+                    className="text-4xl font-extrabold text-gray-900 leading-snug text-balance"
+                >
+                    {title}
+                </motion.h1>
+                {subtitle && (
+                    <motion.p
+                        initial={{opacity: 0, y: 20}}
+                        animate={{opacity: 1, y: 0}}
+                        transition={{duration: 0.6, delay: 0.1}}
+                        className="text-lg text-gray-600"
+                    >
+                        {subtitle}
+                    </motion.p>
+                )}
+            </div>
+        </section>
+    );
+}