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
+}