diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 95a6ac1..688f08b 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -19,8 +19,7 @@ export default function AboutPage() {
 
   const footerColumns = [
     {
-      title: "Services",
-      items: [
+      title: "Services",      items: [
         { label: "Roof Repair", href: "/services" },
         { label: "Roof Replacement", href: "/services" },
         { label: "Inspections", href: "/services" },
@@ -28,8 +27,7 @@ export default function AboutPage() {
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About Us", href: "/about" },
         { label: "Customer Reviews", href: "/reviews" },
         { label: "Contact", href: "/contact" },
@@ -37,8 +35,7 @@ export default function AboutPage() {
       ],
     },
     {
-      title: "Contact",
-      items: [
+      title: "Contact",      items: [
         { label: "Phone: (551) 310-2400", href: "tel:(551)310-2400" },
         { label: "Address: 260 Ryders Ln, Milltown, NJ 08850", href: "#" },
         { label: "Open 24/7 for Emergencies", href: "#" },
@@ -64,9 +61,7 @@ export default function AboutPage() {
         <NavbarStyleCentered
           navItems={navItems}
           button={{
-            text: "Get Free Estimate",
-            href: "/contact",
-          }}
+            text: "Get Free Estimate",            href: "/contact"}}
           brandName="Navarro Family Roofing"
         />
       </div>
@@ -78,6 +73,39 @@ export default function AboutPage() {
         </p>
       </div>
 
+      <div id="before-after" data-section="before-after" className="mx-auto px-4 md:px-6 py-16 md:py-24">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">See Our Work in Action</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Before */}
+            <div className="space-y-4">
+              <h3 className="text-xl font-semibold text-center text-foreground/80">Before</h3>
+              <div className="relative overflow-hidden rounded-lg shadow-lg">
+                <img
+                  src="http://img.b2bpic.net/free-photo/weathered-concrete-surface-with-grime-mildew_632498-60772.jpg"
+                  alt="Roof before repair - damaged and worn"
+                  className="w-full h-64 object-cover"
+                />
+              </div>
+              <p className="text-center text-foreground/70">Damaged, worn roof in need of repair</p>
+            </div>
+
+            {/* After */}
+            <div className="space-y-4">
+              <h3 className="text-xl font-semibold text-center text-foreground/80">After</h3>
+              <div className="relative overflow-hidden rounded-lg shadow-lg">
+                <img
+                  src="http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg"
+                  alt="Roof after repair - restored and pristine"
+                  className="w-full h-64 object-cover"
+                />
+              </div>
+              <p className="text-center text-foreground/70">Professional restoration - like new again</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="why-choose" data-section="why-choose">
         <TextAbout
           tag="About Us"
@@ -85,9 +113,7 @@ export default function AboutPage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "Get Your Free Estimate",
-              href: "/contact",
-            },
+              text: "Get Your Free Estimate",              href: "/contact"},
           ]}
         />
       </div>
@@ -102,40 +128,20 @@ export default function AboutPage() {
           animationType="slide-up"
           metrics={[
             {
-              id: "1",
-              value: "4.8★",
-              title: "Google Rating from 58+ Reviews",
-              items: [
-                "Real customer testimonials",
-                "Verified Milltown service area",
-              ],
+              id: "1",              value: "4.8★",              title: "Google Rating from 58+ Reviews",              items: [
+                "Real customer testimonials",                "Verified Milltown service area"],
             },
             {
-              id: "2",
-              value: "24/7",
-              title: "Emergency Roof Repair Available",
-              items: [
-                "Same-day inspections",
-                "Fast emergency response",
-              ],
+              id: "2",              value: "24/7",              title: "Emergency Roof Repair Available",              items: [
+                "Same-day inspections",                "Fast emergency response"],
             },
             {
-              id: "3",
-              value: "100%",
-              title: "Fully Licensed & Insured",
-              items: [
-                "All work guaranteed",
-                "Comprehensive coverage",
-              ],
+              id: "3",              value: "100%",              title: "Fully Licensed & Insured",              items: [
+                "All work guaranteed",                "Comprehensive coverage"],
             },
             {
-              id: "4",
-              value: "Local",
-              title: "Family-Owned Since Day One",
-              items: [
-                "Community focused service",
-                "Personalized attention",
-              ],
+              id: "4",              value: "Local",              title: "Family-Owned Since Day One",              items: [
+                "Community focused service",                "Personalized attention"],
             },
           ]}
         />
@@ -149,4 +155,4 @@ export default function AboutPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index dd18eff..4a9bb3b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,9 +15,9 @@ export default function HomePage() {
   const navItems = [
     { name: "Home", id: "/" },
     { name: "Services", id: "/services" },
-    { name: "About", id: "about" },
-    { name: "Reviews", id: "reviews" },
-    { name: "Contact", id: "contact" },
+    { name: "About", id: "/about" },
+    { name: "Reviews", id: "/reviews" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
@@ -31,9 +31,9 @@ export default function HomePage() {
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "#about" },
-        { label: "Customer Reviews", href: "#reviews" },
-        { label: "Contact", href: "#contact" },
+        { label: "About Us", href: "/about" },
+        { label: "Customer Reviews", href: "/reviews" },
+        { label: "Contact", href: "/contact" },
         { label: "Emergency Service", href: "tel:(551)310-2400" },
       ],
     },
@@ -42,7 +42,7 @@ export default function HomePage() {
         { label: "Phone: (551) 310-2400", href: "tel:(551)310-2400" },
         { label: "Address: 260 Ryders Ln, Milltown, NJ 08850", href: "#" },
         { label: "Open 24/7 for Emergencies", href: "#" },
-        { label: "Free Estimates Available", href: "#contact" },
+        { label: "Free Estimates Available", href: "/contact" },
       ],
     },
   ];
@@ -66,7 +66,7 @@ export default function HomePage() {
           brandName="Navarro Family Roofing"
           navItems={navItems}
           button={{
-            text: "Get Free Estimate",            href: "#contact"}}
+            text: "Get Free Estimate",            href: "/contact"}}
         />
       </div>
 
@@ -77,7 +77,7 @@ export default function HomePage() {
           description="Milltown's Trusted Family Roofing Experts. Roof repairs, replacements, and inspections done right the first time."
           buttons={[
             {
-              text: "Get Your Free Estimate",              href: "#contact"},
+              text: "Get Your Free Estimate",              href: "/contact"},
             {
               text: "Call Now: (551) 310-2400",              href: "tel:(551)310-2400"},
           ]}
@@ -90,6 +90,40 @@ export default function HomePage() {
         />
       </div>
 
+      {/* Before and After Section */}
+      <div id="before-after" data-section="before-after" className="mx-auto px-4 md:px-6 py-16 md:py-24">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">See the Difference We Make</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Before */}
+            <div className="space-y-4">
+              <h3 className="text-xl font-semibold text-center text-foreground/80">Before</h3>
+              <div className="relative overflow-hidden rounded-lg shadow-lg">
+                <img
+                  src="http://img.b2bpic.net/free-photo/weathered-concrete-surface-with-grime-mildew_632498-60772.jpg"
+                  alt="Roof before repair - damaged and worn"
+                  className="w-full h-64 object-cover"
+                />
+              </div>
+              <p className="text-center text-foreground/70">Damaged, worn roof in need of repair</p>
+            </div>
+
+            {/* After */}
+            <div className="space-y-4">
+              <h3 className="text-xl font-semibold text-center text-foreground/80">After</h3>
+              <div className="relative overflow-hidden rounded-lg shadow-lg">
+                <img
+                  src="http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg"
+                  alt="Roof after repair - restored and pristine"
+                  className="w-full h-64 object-cover"
+                />
+              </div>
+              <p className="text-center text-foreground/70">Professional restoration - like new again</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       {/* Trust Indicators Section */}
       <div id="trust-indicators" data-section="trust-indicators">
         <MetricCardSeven
@@ -157,7 +191,7 @@ export default function HomePage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "Get Your Free Estimate",              href: "#contact"},
+              text: "Get Your Free Estimate",              href: "/contact"},
           ]}
         />
       </div>
@@ -223,4 +257,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 94abf8c..e28c043 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -12,9 +12,9 @@ export default function ServicesPage() {
   const navItems = [
     { name: "Home", id: "/" },
     { name: "Services", id: "/services" },
-    { name: "About", id: "about" },
-    { name: "Reviews", id: "reviews" },
-    { name: "Contact", id: "contact" },
+    { name: "About", id: "/about" },
+    { name: "Reviews", id: "/reviews" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
@@ -28,9 +28,9 @@ export default function ServicesPage() {
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "/#about" },
-        { label: "Customer Reviews", href: "/#reviews" },
-        { label: "Contact", href: "#contact" },
+        { label: "About Us", href: "/about" },
+        { label: "Customer Reviews", href: "/reviews" },
+        { label: "Contact", href: "/contact" },
         { label: "Emergency Service", href: "tel:(551)310-2400" },
       ],
     },
@@ -39,7 +39,7 @@ export default function ServicesPage() {
         { label: "Phone: (551) 310-2400", href: "tel:(551)310-2400" },
         { label: "Address: 260 Ryders Ln, Milltown, NJ 08850", href: "#" },
         { label: "Open 24/7 for Emergencies", href: "#" },
-        { label: "Free Estimates Available", href: "#contact" },
+        { label: "Free Estimates Available", href: "/contact" },
       ],
     },
   ];
@@ -63,7 +63,7 @@ export default function ServicesPage() {
           brandName="Navarro Family Roofing"
           navItems={navItems}
           button={{
-            text: "Get Free Estimate",            href: "#contact"}}
+            text: "Get Free Estimate",            href: "/contact"}}
         />
       </div>
 
@@ -96,6 +96,40 @@ export default function ServicesPage() {
         />
       </div>
 
+      {/* Before and After Section */}
+      <div id="before-after" data-section="before-after" className="mx-auto px-4 md:px-6 py-16 md:py-24">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Transformation Gallery</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Before */}
+            <div className="space-y-4">
+              <h3 className="text-xl font-semibold text-center text-foreground/80">Before</h3>
+              <div className="relative overflow-hidden rounded-lg shadow-lg">
+                <img
+                  src="http://img.b2bpic.net/free-photo/weathered-concrete-surface-with-grime-mildew_632498-60772.jpg"
+                  alt="Roof before repair - damaged and worn"
+                  className="w-full h-64 object-cover"
+                />
+              </div>
+              <p className="text-center text-foreground/70">Damaged, worn roof in need of repair</p>
+            </div>
+
+            {/* After */}
+            <div className="space-y-4">
+              <h3 className="text-xl font-semibold text-center text-foreground/80">After</h3>
+              <div className="relative overflow-hidden rounded-lg shadow-lg">
+                <img
+                  src="http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg"
+                  alt="Roof after repair - restored and pristine"
+                  className="w-full h-64 object-cover"
+                />
+              </div>
+              <p className="text-center text-foreground/70">Professional restoration - like new again</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       {/* Service Quality Section */}
       <div id="service-quality" data-section="service-quality">
         <TextAbout
@@ -104,7 +138,7 @@ export default function ServicesPage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "Schedule Your Free Inspection",              href: "#contact"},
+              text: "Schedule Your Free Inspection",              href: "/contact"},
           ]}
         />
       </div>
@@ -138,4 +172,4 @@ export default function ServicesPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}