diff --git a/src/App.tsx b/src/App.tsx
index 910333b..87e49a9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,304 +1,12 @@
-import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
-import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
-import FooterSimpleCard from '@/components/sections/footer/FooterSimpleCard';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import NavbarCentered from '@/components/ui/NavbarCentered';
-import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
-import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
-import TestimonialDetailedCards from '@/components/sections/testimonial/TestimonialDetailedCards';
+import { Routes, Route } from 'react-router-dom';
+import HomePage from './pages/HomePage';
 
+import BlogPage from './pages/BlogPage';
 export default function App() {
   return (
-    <>
-  <div id="nav" data-section="nav">
-      <NavbarCentered
-      logo="Brew & Bean"
-      navItems={[
-        {
-          name: "Home",
-          href: "#hero",
-        },
-        {
-          name: "About",
-          href: "#about",
-        },
-        {
-          name: "Menu",
-          href: "#menu",
-        },
-        {
-          name: "Contact",
-          href: "#contact",
-        },
-      ]}
-      ctaButton={{
-        text: "Visit Us",
-        href: "#contact",
-      }}
-    />
-  </div>
-
-  <div id="hero" data-section="hero">
-      <HeroSplitKpi
-      tag="Crafted with love"
-      title="Your Daily Brew, Perfected."
-      description="Experience artisan coffee in a cozy, welcoming atmosphere designed for the community."
-      primaryButton={{
-        text: "View Menu",
-        href: "#menu",
-      }}
-      secondaryButton={{
-        text: "Our Story",
-        href: "#about",
-      }}
-      kpis={[
-        {
-          value: "12+",
-          label: "Coffee Origins",
-        },
-        {
-          value: "200+",
-          label: "Daily Cups",
-        },
-        {
-          value: "5k+",
-          label: "Happy Guests",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ot8dba"
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <AboutMediaOverlay
-      tag="Since 2012"
-      title="More Than Just Coffee"
-      description="We believe coffee is a catalyst for conversation and connection. From ethically sourced beans to our hand-crafted pastries, every detail is considered."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qovlji"
-    />
-  </div>
-
-  <div id="features" data-section="features">
-      <FeaturesComparison
-      tag="The Quality Difference"
-      title="Better Beans, Better Mornings"
-      description="We carefully select our roast profiles to ensure every cup is consistent, vibrant, and delicious."
-      negativeItems={[
-        "Mass-produced bitter beans",
-        "Over-roasted grounds",
-        "Artificial flavorings",
-      ]}
-      positiveItems={[
-        "Single-origin ethically sourced",
-        "Small batch artisan roast",
-        "Fresh organic dairy",
-      ]}
-    />
-  </div>
-
-  <div id="menu" data-section="menu">
-      <ProductMediaCards
-      tag="Our Favorites"
-      title="Signature Menu"
-      description="Hand-crafted drinks prepared by our award-winning baristas."
-      products={[
-        {
-          name: "Classic Espresso",
-          price: "$3.50",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6m02ty",
-        },
-        {
-          name: "Butter Croissant",
-          price: "$4.00",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6vcpld",
-        },
-        {
-          name: "Pour Over",
-          price: "$5.00",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ujtwfh",
-        },
-        {
-          name: "Velvet Latte",
-          price: "$4.50",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ypy5jk",
-        },
-        {
-          name: "Macchiato",
-          price: "$4.00",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t8rxll",
-        },
-        {
-          name: "Mocha Bliss",
-          price: "$5.50",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nud249",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingLayeredCards
-      tag="Membership"
-      title="Coffee Club Plans"
-      description="Join our community and enjoy perks every time you visit."
-      plans={[
-        {
-          tag: "Casual",
-          price: "$29/mo",
-          description: "Perfect for the daily sipper.",
-          primaryButton: {
-            text: "Join Now",
-            href: "#",
-          },
-          features: [
-            "10% discount on orders",
-            "Free birthday drink",
-            "Monthly beans sample",
-          ],
-        },
-        {
-          tag: "Pro",
-          price: "$59/mo",
-          description: "Unlimited caffeine for the pros.",
-          primaryButton: {
-            text: "Join Now",
-            href: "#",
-          },
-          features: [
-            "20% discount on orders",
-            "Free birthday drink",
-            "Priority seating",
-            "Exclusive merch",
-          ],
-        },
-      ]}
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialDetailedCards
-      tag="Hear from us"
-      title="Community Stories"
-      description="What our guests say about their daily ritual."
-      testimonials={[
-        {
-          title: "Great Vibe!",
-          quote: "The best place in town to get some work done.",
-          name: "John D.",
-          role: "Designer",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7u2r1n",
-        },
-        {
-          title: "Lovely Coffee",
-          quote: "Consistently excellent coffee and very friendly baristas.",
-          name: "Sarah L.",
-          role: "Student",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7j4shy",
-        },
-        {
-          title: "Cozy Home",
-          quote: "My favorite place to catch up with friends every Sunday.",
-          name: "Mike R.",
-          role: "Engineer",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=91duye",
-        },
-        {
-          title: "Quality Beans",
-          quote: "You can truly taste the difference in their roast.",
-          name: "Emily P.",
-          role: "Chef",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=avcu0e",
-        },
-        {
-          title: "Top Notch",
-          quote: "I travel 20 minutes just to grab a cup here.",
-          name: "David K.",
-          role: "Consultant",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3a3xym",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSimple
-      tag="Questions?"
-      title="Frequently Asked"
-      description="Everything you need to know about our cafe."
-      items={[
-        {
-          question: "Are you pet friendly?",
-          answer: "Yes! Well-behaved pets are welcome on our patio.",
-        },
-        {
-          question: "Do you offer vegan options?",
-          answer: "We offer oat, almond, and soy milk alternatives.",
-        },
-        {
-          question: "Can I reserve space?",
-          answer: "We accept bookings for events outside of peak hours.",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplitEmail
-      tag="Join the list"
-      title="Stay in the loop"
-      description="Get updates on new seasonal roasts and community events."
-      inputPlaceholder="Email address"
-      buttonText="Subscribe"
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dk7mnc"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterSimpleCard
-      brand="Brew & Bean"
-      columns={[
-        {
-          title: "Cafe",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Menu",
-              href: "#menu",
-            },
-          ],
-        },
-        {
-          title: "Community",
-          items: [
-            {
-              label: "Events",
-              href: "#",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      copyright="© 2024 Brew & Bean. All rights reserved."
-      links={[
-        {
-          label: "Privacy",
-          href: "#",
-        },
-        {
-          label: "Terms",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
-    </>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+          <Route path="/blog" element={<BlogPage />} />
+</Routes>
   );
 }
diff --git a/src/pages/BlogPage.tsx b/src/pages/BlogPage.tsx
new file mode 100644
index 0000000..b31f985
--- /dev/null
+++ b/src/pages/BlogPage.tsx
@@ -0,0 +1,15 @@
+import BlogSimpleCards from "@/components/sections/blog/BlogSimpleCards";
+import NavbarCentered from '@/components/ui/NavbarCentered';
+import FooterSimpleCard from '@/components/sections/footer/FooterSimpleCard';
+
+const BlogPage = () => {
+  return (
+    <BlogSimpleCards
+      tag="Blog"
+      title="Latest Articles"
+      description="Stay updated with our latest insights and news"
+    />
+  );
+};
+
+export default BlogPage;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index a3e7160..1aa1501 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,22 +1,306 @@
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import { routes } from "@/routes";
+import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
+import FaqSimple from '@/components/sections/faq/FaqSimple';
+import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
+import FooterSimpleCard from '@/components/sections/footer/FooterSimpleCard';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import NavbarCentered from '@/components/ui/NavbarCentered';
+import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
+import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
+import TestimonialDetailedCards from '@/components/sections/testimonial/TestimonialDetailedCards';
 
-const HomePage = () => {
+export default function HomePage() {
   return (
-    <div className="min-h-screen bg-background">
-      <NavbarCentered
-        logo="Logo"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Get Started", href: "#" }}
-      />
-      <main className="pt-20 flex flex-col items-center justify-center min-h-[80vh] px-4">
-        <h1 className="text-4xl font-bold text-foreground mb-4">Welcome</h1>
-        <p className="text-lg text-muted-foreground max-w-xl text-center">
-          Your website content will appear here.
-        </p>
-      </main>
-    </div>
-  );
-};
 
-export default HomePage;
+    <>
+  <div id="nav" data-section="nav">
+      <NavbarCentered
+      logo="Brew & Bean"
+      navItems={[
+        {
+          name: "Home",
+          href: "#hero",
+        },
+        {
+          name: "About",
+          href: "#about",
+        },
+        {
+          name: "Menu",
+          href: "#menu",
+        },
+        {
+          name: "Contact",
+          href: "#contact",
+        },
+      ]}
+      ctaButton={{
+        text: "Visit Us",
+        href: "#contact",
+      }}
+    />
+  </div>
+
+  <div id="hero" data-section="hero">
+      <HeroSplitKpi
+      tag="Crafted with love"
+      title="Your Daily Brew, Perfected."
+      description="Experience artisan coffee in a cozy, welcoming atmosphere designed for the community."
+      primaryButton={{
+        text: "View Menu",
+        href: "#menu",
+      }}
+      secondaryButton={{
+        text: "Our Story",
+        href: "#about",
+      }}
+      kpis={[
+        {
+          value: "12+",
+          label: "Coffee Origins",
+        },
+        {
+          value: "200+",
+          label: "Daily Cups",
+        },
+        {
+          value: "5k+",
+          label: "Happy Guests",
+        },
+      ]}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ot8dba"
+    />
+  </div>
+
+  <div id="about" data-section="about">
+      <AboutMediaOverlay
+      tag="Since 2012"
+      title="More Than Just Coffee"
+      description="We believe coffee is a catalyst for conversation and connection. From ethically sourced beans to our hand-crafted pastries, every detail is considered."
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qovlji"
+    />
+  </div>
+
+  <div id="features" data-section="features">
+      <FeaturesComparison
+      tag="The Quality Difference"
+      title="Better Beans, Better Mornings"
+      description="We carefully select our roast profiles to ensure every cup is consistent, vibrant, and delicious."
+      negativeItems={[
+        "Mass-produced bitter beans",
+        "Over-roasted grounds",
+        "Artificial flavorings",
+      ]}
+      positiveItems={[
+        "Single-origin ethically sourced",
+        "Small batch artisan roast",
+        "Fresh organic dairy",
+      ]}
+    />
+  </div>
+
+  <div id="menu" data-section="menu">
+      <ProductMediaCards
+      tag="Our Favorites"
+      title="Signature Menu"
+      description="Hand-crafted drinks prepared by our award-winning baristas."
+      products={[
+        {
+          name: "Classic Espresso",
+          price: "$3.50",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6m02ty",
+        },
+        {
+          name: "Butter Croissant",
+          price: "$4.00",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6vcpld",
+        },
+        {
+          name: "Pour Over",
+          price: "$5.00",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ujtwfh",
+        },
+        {
+          name: "Velvet Latte",
+          price: "$4.50",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ypy5jk",
+        },
+        {
+          name: "Macchiato",
+          price: "$4.00",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t8rxll",
+        },
+        {
+          name: "Mocha Bliss",
+          price: "$5.50",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nud249",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="pricing" data-section="pricing">
+      <PricingLayeredCards
+      tag="Membership"
+      title="Coffee Club Plans"
+      description="Join our community and enjoy perks every time you visit."
+      plans={[
+        {
+          tag: "Casual",
+          price: "$29/mo",
+          description: "Perfect for the daily sipper.",
+          primaryButton: {
+            text: "Join Now",
+            href: "#",
+          },
+          features: [
+            "10% discount on orders",
+            "Free birthday drink",
+            "Monthly beans sample",
+          ],
+        },
+        {
+          tag: "Pro",
+          price: "$59/mo",
+          description: "Unlimited caffeine for the pros.",
+          primaryButton: {
+            text: "Join Now",
+            href: "#",
+          },
+          features: [
+            "20% discount on orders",
+            "Free birthday drink",
+            "Priority seating",
+            "Exclusive merch",
+          ],
+        },
+      ]}
+    />
+  </div>
+
+  <div id="testimonials" data-section="testimonials">
+      <TestimonialDetailedCards
+      tag="Hear from us"
+      title="Community Stories"
+      description="What our guests say about their daily ritual."
+      testimonials={[
+        {
+          title: "Great Vibe!",
+          quote: "The best place in town to get some work done.",
+          name: "John D.",
+          role: "Designer",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7u2r1n",
+        },
+        {
+          title: "Lovely Coffee",
+          quote: "Consistently excellent coffee and very friendly baristas.",
+          name: "Sarah L.",
+          role: "Student",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7j4shy",
+        },
+        {
+          title: "Cozy Home",
+          quote: "My favorite place to catch up with friends every Sunday.",
+          name: "Mike R.",
+          role: "Engineer",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=91duye",
+        },
+        {
+          title: "Quality Beans",
+          quote: "You can truly taste the difference in their roast.",
+          name: "Emily P.",
+          role: "Chef",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=avcu0e",
+        },
+        {
+          title: "Top Notch",
+          quote: "I travel 20 minutes just to grab a cup here.",
+          name: "David K.",
+          role: "Consultant",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3a3xym",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="faq" data-section="faq">
+      <FaqSimple
+      tag="Questions?"
+      title="Frequently Asked"
+      description="Everything you need to know about our cafe."
+      items={[
+        {
+          question: "Are you pet friendly?",
+          answer: "Yes! Well-behaved pets are welcome on our patio.",
+        },
+        {
+          question: "Do you offer vegan options?",
+          answer: "We offer oat, almond, and soy milk alternatives.",
+        },
+        {
+          question: "Can I reserve space?",
+          answer: "We accept bookings for events outside of peak hours.",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="contact" data-section="contact">
+      <ContactSplitEmail
+      tag="Join the list"
+      title="Stay in the loop"
+      description="Get updates on new seasonal roasts and community events."
+      inputPlaceholder="Email address"
+      buttonText="Subscribe"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dk7mnc"
+    />
+  </div>
+
+  <div id="footer" data-section="footer">
+      <FooterSimpleCard
+      brand="Brew & Bean"
+      columns={[
+        {
+          title: "Cafe",
+          items: [
+            {
+              label: "About",
+              href: "#about",
+            },
+            {
+              label: "Menu",
+              href: "#menu",
+            },
+          ],
+        },
+        {
+          title: "Community",
+          items: [
+            {
+              label: "Events",
+              href: "#",
+            },
+            {
+              label: "Careers",
+              href: "#",
+            },
+          ],
+        },
+      ]}
+      copyright="© 2024 Brew & Bean. All rights reserved."
+      links={[
+        {
+          label: "Privacy",
+          href: "#",
+        },
+        {
+          label: "Terms",
+          href: "#",
+        },
+      ]}
+    />
+  </div>
+    </>
+  
+  );
+}