diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index c028a77..9368b14 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,43 +1,41 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
 import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function AboutPage() {
   const navItems = [
     { name: "Home", id: "/" },
-    { name: "Projects", id: "/projects" },
+    { name: "Explore My Works", id: "/explore" },
     { name: "Vision", id: "/about" },
     { name: "Connect", id: "/connect" },
-    { name: "Writing", id: "/writing" },
+    { name: "Thoughts", id: "/thoughts" },
   ];
 
   const footerColumns = [
     {
       title: "Navigation",      items: [
         { label: "Home", href: "/" },
-        { label: "Projects", href: "/projects" },
+        { label: "Explore My Works", href: "/explore" },
         { label: "Vision", href: "/about" },
         { label: "Contact", href: "/contact" },
       ],
     },
     {
       title: "Connect",      items: [
-        { label: "Twitter", href: "https://twitter.com" },
-        { label: "LinkedIn", href: "https://linkedin.com" },
-        { label: "Instagram", href: "https://instagram.com" },
+        { label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
+        { label: "Substack", href: "https://substack.com/@karuthompson" },
+        { label: "X", href: "https://x.com/KaruThompson" },
         { label: "Email", href: "mailto:hello@example.com" },
       ],
     },
     {
       title: "Resources",      items: [
         { label: "Newsletter", href: "#" },
-        { label: "Blog", href: "/writing" },
+        { label: "Thoughts", href: "/thoughts" },
         { label: "Privacy", href: "#" },
         { label: "Terms", href: "#" },
       ],
@@ -57,252 +55,49 @@ export default function AboutPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="light"
     >
-      <style>{`
-        @keyframes drawLine {
-          0% {
-            stroke-dashoffset: 1000;
-            opacity: 0;
-          }
-          10% {
-            opacity: 1;
-          }
-          90% {
-            opacity: 1;
-          }
-          100% {
-            stroke-dashoffset: 0;
-            opacity: 0;
-          }
-        }
-
-        @keyframes tiltShift {
-          0%, 100% {
-            transform: translateY(0) rotateZ(-1deg);
-          }
-          50% {
-            transform: translateY(-8px) rotateZ(1deg);
-          }
-        }
-
-        @keyframes sketchCursor {
-          0% {
-            opacity: 1;
-            transform: scale(1);
-          }
-          100% {
-            opacity: 0;
-            transform: scale(0.8);
-          }
-        }
-
-        .decorative-line {
-          stroke-dasharray: 1000;
-          animation: drawLine 4s ease-in-out 2s infinite;
-          pointer-events: none;
-        }
-
-        .tilt-media {
-          animation: tiltShift 6s ease-in-out infinite;
-        }
-
-        .sketch-trail {
-          position: fixed;
-          pointer-events: none;
-          z-index: 10;
-        }
-
-        .sketch-mark {
-          position: absolute;
-          border-radius: 50%;
-          animation: sketchCursor 1.5s ease-out forwards;
-        }
-      `}</style>
-
-      <canvas
-        id="sketch-canvas"
-        style={{
-          position: "fixed",          top: 0,
-          left: 0,
-          width: "100%",          height: "100%",          pointerEvents: "none",          zIndex: 5,
-        }}
-      />
-
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={navItems}
-          brandName="Portfolio"
+          brandName="Karu Thompson"
           bottomLeftText="Crafted with intention"
           bottomRightText="Let's connect"
         />
       </div>
 
-      <svg
-        style={{
-          position: "absolute",          top: "100px",          left: "50%",          transform: "translateX(-50%)",          width: "200px",          height: "2px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <line
-          x1="0"
-          y1="1"
-          x2="200"
-          y2="1"
-          stroke="currentColor"
-          strokeWidth="1"
-          opacity="0.3"
-          className="decorative-line"
-        />
-      </svg>
-
-      <div id="about-vision" data-section="about-vision">
+      <div id="about" data-section="about">
         <TextSplitAbout
-          title="Vision & Creative Philosophy"
+          title="My Vision & Values"
           description={[
-            "My journey has been defined by a commitment to intentional design—creating visual narratives that respect the viewer's intelligence and imagination. I believe that every design decision should serve a purpose, whether functional or emotional, creating experiences that resonate deeply and leave lasting impressions.",            "I draw inspiration from film aesthetics, the elegance of vintage typography, and the power of minimalist principles. These influences guide my approach to creating digital experiences that feel deliberately crafted, inviting audiences to pause, reflect, and engage meaningfully with ideas and stories that matter."]}
-          useInvertedBackground={false}
+            "I believe in the power of <i>intentional design</i> to create meaningful connections between ideas, people, and experiences. Every project I undertake reflects a commitment to <i>aesthetic sophistication paired with strategic clarity</i>.",            "My work spans creative direction, digital experience design, business strategy, and cultural storytelling. At the core is a belief that <i>creativity without purpose is decoration</i>, and <i>strategy without artistry is mechanical</i>. The most compelling work emerges when these forces are in balance."
+          ]}
+          useInvertedBackground={true}
           showBorder={true}
-          buttons={[{ text: "Explore My Work", href: "/projects" }]}
+          buttons={[{ text: "Explore My Works", href: "/explore" }]}
           buttonAnimation="blur-reveal"
         />
       </div>
 
-      <svg
-        style={{
-          position: "absolute",          top: "600px",          left: "10%",          width: "150px",          height: "50px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <path
-          d="M 10 30 Q 40 5 80 30 T 150 30"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
-        />
-      </svg>
-
-      <div id="testimonial-about" data-section="testimonial-about">
-        <TestimonialCardFifteen
-          testimonial="What sets this creative professional apart is their ability to synthesize complex ideas into elegant, intentional solutions. Their work demonstrates deep understanding of both form and function, creating experiences that feel both timeless and contemporary."
-          rating={5}
-          author="Brand Strategist, Creative Agency"
-          avatars={[
-            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png",              alt: "Industry colleague"},
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Get In Touch"
+          title="Let's collaborate on something meaningful"
+          description="Whether you have a project in mind, want to discuss ideas, or simply want to connect, I'd love to hear from you."
+          background={{ variant: "plain" }}
+          buttons={[
+            { text: "Schedule a Call", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
+            { text: "Send an Email", href: "mailto:hello@example.com" },
           ]}
-          ratingAnimation="blur-reveal"
-          avatarsAnimation="blur-reveal"
+          buttonAnimation="blur-reveal"
           useInvertedBackground={true}
         />
       </div>
 
-      <svg
-        style={{
-          position: "absolute",          top: "1000px",          right: "5%",          width: "100px",          height: "100px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <circle
-          cx="50"
-          cy="50"
-          r="40"
-          stroke="currentColor"
-          strokeWidth="1"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
-        />
-      </svg>
-
-      <div id="connect-channels" data-section="connect-channels">
-        <SocialProofOne
-          title="Let's Connect"
-          description="I'm always interested in meaningful collaborations and conversations about creative work, design philosophy, and storytelling. Reach out through your preferred channel."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          names={["Twitter", "LinkedIn", "Instagram", "Email", "Newsletter"]}
-          speed={40}
-          showCard={true}
-        />
-      </div>
-
       <div id="footer" data-section="footer">
         <FooterBaseReveal
           columns={footerColumns}
-          copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
+          copyrightText="© 2025 Karu Thompson. Crafted with intention and creative vision."
         />
       </div>
-
-      <script>{`
-        (function() {
-          const canvas = document.getElementById('sketch-canvas');
-          if (!canvas) return;
-          
-          const ctx = canvas.getContext('2d');
-          canvas.width = window.innerWidth;
-          canvas.height = window.innerHeight;
-          
-          let mouseX = 0;
-          let mouseY = 0;
-          let isDrawing = false;
-          
-          const strokes = [];
-          
-          const sketchColors = ['rgba(0, 0, 0, 0.15)', 'rgba(100, 100, 100, 0.1)', 'rgba(50, 50, 50, 0.12)'];
-          
-          document.addEventListener('mousemove', (e) => {
-            mouseX = e.clientX;
-            mouseY = e.clientY;
-            
-            if (Math.random() > 0.92) {
-              const offsets = [
-                { x: Math.random() * 20 - 10, y: Math.random() * 20 - 10 },
-                { x: Math.random() * 15 - 7, y: Math.random() * 15 - 7 }
-              ];
-              
-              offsets.forEach(offset => {
-                const stroke = {
-                  x: mouseX + offset.x,
-                  y: mouseY + offset.y,
-                  size: Math.random() * 3 + 1,
-                  opacity: Math.random() * 0.4 + 0.3,
-                  color: sketchColors[Math.floor(Math.random() * sketchColors.length)],
-                  life: 1
-                };
-                strokes.push(stroke);
-              });
-            }
-          });
-          
-          function animate() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            
-            for (let i = strokes.length - 1; i >= 0; i--) {
-              const stroke = strokes[i];
-              stroke.life -= 0.02;
-              
-              if (stroke.life <= 0) {
-                strokes.splice(i, 1);
-                continue;
-              }
-              
-              ctx.fillStyle = stroke.color;
-              ctx.globalAlpha = stroke.life * 0.5;
-              ctx.beginPath();
-              ctx.arc(stroke.x, stroke.y, stroke.size, 0, Math.PI * 2);
-              ctx.fill();
-            }
-            
-            ctx.globalAlpha = 1;
-            requestAnimationFrame(animate);
-          }
-          
-          animate();
-          
-          window.addEventListener('resize', () => {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-          });
-        })();
-      `}</script>
     </ThemeProvider>
   );
 }