diff --git a/src/App.tsx b/src/App.tsx
index 6f0699d..09763ab 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,177 +1,10 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesDualMedia from '@/components/sections/features/FeaturesDualMedia';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
-import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
-import NavbarCentered from '@/components/ui/NavbarCentered';
-import ProductRatingCards from '@/components/sections/product/ProductRatingCards';
-import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
+import { Routes, Route } from 'react-router-dom';
+import HomePage from './pages/HomePage';
 
 export default function App() {
   return (
-    <>
-      <div id="nav" data-section="nav">
-        <NavbarCentered
-          logo="Happy Paws"
-          navItems={[
-            { name: "About", href: "#about" },
-            { name: "Pets", href: "#pets" },
-            { name: "Metrics", href: "#metrics" },
-            { name: "Testimonials", href: "#testimonials" },
-          ]}
-          ctaButton={{ text: "Adopt Today", href: "#contact" }}
-        />
-      </div>
-
-      <div id="hero" data-section="hero">
-        <HeroBillboardTiltedCarousel
-          tag="Find Your Best Friend"
-          title="Give a Second Chance"
-          description="Our shelter helps homeless pets find their forever homes. Meet our current residents waiting for love."
-          primaryButton={{ text: "View Pets", href: "#pets" }}
-          secondaryButton={{ text: "Volunteer", href: "#contact" }}
-          items={[
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=87dmhu" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=paw4k1" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tnqe3w" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yipmxq" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j10rae" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8cvoqu" },
-          ]}
-        />
-      </div>
-
-      <div id="about" data-section="about">
-        <AboutFeaturesSplit
-          tag="Our Mission"
-          title="Giving Love to Every Paw"
-          description="At Happy Paws, we believe every animal deserves a loving environment. We provide medical care, rehabilitation, and a safe harbor."
-          items={[
-            { icon: "Heart", title: "Rescue Services", description: "Taking in animals in need." },
-            { icon: "Activity", title: "Health Care", description: "Full medical support provided." },
-            { icon: "Home", title: "Adoption Support", description: "Matching pets to families." },
-          ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=53wx5y"
-        />
-      </div>
-
-      <div id="features" data-section="features">
-        <FeaturesDualMedia
-          tag="How We Help"
-          title="Programs That Matter"
-          description="We offer various programs to support the community and our shelter residents."
-          items={[
-            { 
-              icon: "Heart", 
-              title: "Fostering", 
-              description: "Open your home to a pet temporarily.", 
-              mediaItems: [
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ibrxn2" },
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uvt928" },
-              ]
-            },
-            { 
-              icon: "Calendar", 
-              title: "Adoption Days", 
-              description: "Regular weekend adoption events.", 
-              mediaItems: [
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f95q9k" },
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=28ocpi" },
-              ]
-            },
-            { 
-              icon: "BookOpen", 
-              title: "Pet Education", 
-              description: "Resources for responsible owners.", 
-              mediaItems: [
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ghygq2" },
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pig7v5" },
-              ]
-            },
-          ]}
-        />
-      </div>
-
-      <div id="pets" data-section="pets">
-        <ProductRatingCards
-          tag="Available Pets"
-          title="Adoptable Friends"
-          description="Meet our lovely animals waiting to meet you."
-          products={[
-            { brand: "Dog", name: "Buddy", price: "Adult", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g0wcnf" },
-            { brand: "Cat", name: "Luna", price: "Kitten", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7rjs3y" },
-            { brand: "Dog", name: "Max", price: "Senior", rating: 4, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zxiot0" },
-            { brand: "Cat", name: "Oliver", price: "Adult", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rngr7s" },
-            { brand: "Dog", name: "Daisy", price: "Puppy", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=191xu0" },
-            { brand: "Cat", name: "Milo", price: "Adult", rating: 4, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7giz1r" },
-          ]}
-        />
-      </div>
-
-      <div id="metrics" data-section="metrics">
-        <MetricsIconCards
-          tag="Our Impact"
-          title="Shelter Success"
-          description="Helping pets every day."
-          metrics={[
-            { icon: "Users", title: "Adoptions", value: "1200+" },
-            { icon: "Home", title: "Fosters", value: "450+" },
-            { icon: "Heart", title: "Rescues", value: "2000+" },
-          ]}
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialQuoteCards
-          tag="Happy Tails"
-          title="Stories from Adopters"
-          description="Heartwarming feedback from our community."
-          testimonials={[
-            { name: "Alice Smith", role: "Adopter", quote: "Buddy is the best dog ever!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v1phby" },
-            { name: "Bob Jones", role: "Foster", quote: "Fostering changed my life.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vulepf" },
-            { name: "Charlie Day", role: "Adopter", quote: "So thankful for Happy Paws.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kj0je1" },
-            { name: "Dana White", role: "Volunteer", quote: "Love working with this team.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udxu44" },
-            { name: "Evan Wright", role: "Adopter", quote: "Luna adapted perfectly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lngv46" },
-          ]}
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqSimple
-          tag="Questions?"
-          title="Adoption FAQ"
-          description="Everything you need to know."
-          items={[
-            { question: "What is the process?", answer: "Fill out a form, then meet the pet." },
-            { question: "Are they vaccinated?", answer: "Yes, all animals receive full care." },
-            { question: "Can I visit?", answer: "Yes, visit during open hours." },
-          ]}
-        />
-      </div>
-
-      <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Join Us"
-          title="Stay Connected"
-          description="Sign up for our newsletter to get updates."
-          inputPlaceholder="Enter your email"
-          buttonText="Subscribe"
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterSimple
-          brand="Happy Paws Shelter"
-          columns={[
-            { title: "Info", items: [{ label: "About Us", href: "#about" }, { label: "Volunteer", href: "#contact" }] },
-            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
-          ]}
-          copyright="© 2024 Happy Paws Shelter. All rights reserved."
-          links={[{ label: "Home", href: "/" }]}
-        />
-      </div>
-    </>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+    </Routes>
   );
 }
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index a3e7160..298d5c6 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,22 +1,179 @@
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import { routes } from "@/routes";
+import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSimple from '@/components/sections/faq/FaqSimple';
+import FeaturesDualMedia from '@/components/sections/features/FeaturesDualMedia';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import NavbarCentered from '@/components/ui/NavbarCentered';
+import ProductRatingCards from '@/components/sections/product/ProductRatingCards';
+import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
 
-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="Happy Paws"
+          navItems={[
+            { name: "About", href: "#about" },
+            { name: "Pets", href: "#pets" },
+            { name: "Metrics", href: "#metrics" },
+            { name: "Testimonials", href: "#testimonials" },
+          ]}
+          ctaButton={{ text: "Adopt Today", href: "#contact" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardTiltedCarousel
+          tag="Find Your Best Friend"
+          title="Give a Second Chance"
+          description="Our shelter helps homeless pets find their forever homes. Meet our current residents waiting for love."
+          primaryButton={{ text: "View Pets", href: "#pets" }}
+          secondaryButton={{ text: "Volunteer", href: "#contact" }}
+          items={[
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=87dmhu" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=paw4k1" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tnqe3w" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yipmxq" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j10rae" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8cvoqu" },
+          ]}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <AboutFeaturesSplit
+          tag="Our Mission"
+          title="Giving Love to Every Paw"
+          description="At Happy Paws, we believe every animal deserves a loving environment. We provide medical care, rehabilitation, and a safe harbor."
+          items={[
+            { icon: "Heart", title: "Rescue Services", description: "Taking in animals in need." },
+            { icon: "Activity", title: "Health Care", description: "Full medical support provided." },
+            { icon: "Home", title: "Adoption Support", description: "Matching pets to families." },
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=53wx5y"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeaturesDualMedia
+          tag="How We Help"
+          title="Programs That Matter"
+          description="We offer various programs to support the community and our shelter residents."
+          items={[
+            { 
+              icon: "Heart", 
+              title: "Fostering", 
+              description: "Open your home to a pet temporarily.", 
+              mediaItems: [
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ibrxn2" },
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uvt928" },
+              ]
+            },
+            { 
+              icon: "Calendar", 
+              title: "Adoption Days", 
+              description: "Regular weekend adoption events.", 
+              mediaItems: [
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f95q9k" },
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=28ocpi" },
+              ]
+            },
+            { 
+              icon: "BookOpen", 
+              title: "Pet Education", 
+              description: "Resources for responsible owners.", 
+              mediaItems: [
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ghygq2" },
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pig7v5" },
+              ]
+            },
+          ]}
+        />
+      </div>
+
+      <div id="pets" data-section="pets">
+        <ProductRatingCards
+          tag="Available Pets"
+          title="Adoptable Friends"
+          description="Meet our lovely animals waiting to meet you."
+          products={[
+            { brand: "Dog", name: "Buddy", price: "Adult", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g0wcnf" },
+            { brand: "Cat", name: "Luna", price: "Kitten", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7rjs3y" },
+            { brand: "Dog", name: "Max", price: "Senior", rating: 4, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zxiot0" },
+            { brand: "Cat", name: "Oliver", price: "Adult", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rngr7s" },
+            { brand: "Dog", name: "Daisy", price: "Puppy", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=191xu0" },
+            { brand: "Cat", name: "Milo", price: "Adult", rating: 4, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7giz1r" },
+          ]}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricsIconCards
+          tag="Our Impact"
+          title="Shelter Success"
+          description="Helping pets every day."
+          metrics={[
+            { icon: "Users", title: "Adoptions", value: "1200+" },
+            { icon: "Home", title: "Fosters", value: "450+" },
+            { icon: "Heart", title: "Rescues", value: "2000+" },
+          ]}
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialQuoteCards
+          tag="Happy Tails"
+          title="Stories from Adopters"
+          description="Heartwarming feedback from our community."
+          testimonials={[
+            { name: "Alice Smith", role: "Adopter", quote: "Buddy is the best dog ever!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v1phby" },
+            { name: "Bob Jones", role: "Foster", quote: "Fostering changed my life.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vulepf" },
+            { name: "Charlie Day", role: "Adopter", quote: "So thankful for Happy Paws.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kj0je1" },
+            { name: "Dana White", role: "Volunteer", quote: "Love working with this team.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udxu44" },
+            { name: "Evan Wright", role: "Adopter", quote: "Luna adapted perfectly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lngv46" },
+          ]}
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqSimple
+          tag="Questions?"
+          title="Adoption FAQ"
+          description="Everything you need to know."
+          items={[
+            { question: "What is the process?", answer: "Fill out a form, then meet the pet." },
+            { question: "Are they vaccinated?", answer: "Yes, all animals receive full care." },
+            { question: "Can I visit?", answer: "Yes, visit during open hours." },
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Join Us"
+          title="Stay Connected"
+          description="Sign up for our newsletter to get updates."
+          inputPlaceholder="Enter your email"
+          buttonText="Subscribe"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          brand="Happy Paws Shelter"
+          columns={[
+            { title: "Info", items: [{ label: "About Us", href: "#about" }, { label: "Volunteer", href: "#contact" }] },
+            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
+          ]}
+          copyright="© 2024 Happy Paws Shelter. All rights reserved."
+          links={[{ label: "Home", href: "/" }]}
+        />
+      </div>
+    </>
+  
+  );
+}