diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..fe70a09
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroLogo from "@/components/sections/hero/HeroLogo";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Zap, Target, Sparkles } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="aurora"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "hero" },
+            { name: "About", id: "/about" },
+            { name: "Services", id: "services" },
+            { name: "Work", id: "testimonials" },
+            { name: "Contact", id: "contact" },
+          ]}
+          brandName="Break Point Web Studio"
+          bottomLeftText="San Francisco, CA"
+          bottomRightText="hello@breakpointweb.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogo
+          logoText="About Break Point"
+          description="A high-performance digital boutique specializing in responsive architecture and precision code. We transform ambitions into exceptional digital experiences."
+          buttons={[
+            { text: "Explore Our Philosophy", href: "#about" },
+            { text: "Get In Touch", href: "#contact" },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/office-ready-work_1150-101.jpg"
+          imageAlt="Break Point Web Studio team workspace"
+          showDimOverlay={true}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextSplitAbout
+          title="Our Mission"
+          description={[
+            "Break Point Web Studio exists at the intersection of design excellence and technical precision. We are a high-performance digital boutique specializing in responsive architecture—building interfaces and systems that adapt flawlessly to every device, every user, and every moment of interaction.",            "We believe that the best digital solutions are those that work seamlessly across all touchpoints while maintaining blazing-fast performance and impeccable code quality. Every project we undertake is a commitment to elevating digital standards and pushing the boundaries of what's possible on the web."
+          ]}
+          buttons={[
+            { text: "Our Philosophy", href: "#services" },
+          ]}
+          showBorder={false}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardTen
+          title="Our Core Pillars"
+          description="The foundation of everything we do rests on three essential principles that guide our approach to digital excellence."
+          tag="Our Philosophy"
+          features={[
+            {
+              id: "1",              title: "Adaptability",              description: "We build solutions that evolve with your needs. From responsive design that works on every device to scalable architecture that grows with your business, adaptability is embedded in every line of code and every design decision we make.",              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/information-technology-connection-graphics-concept_53876-121040.jpg"
+              },
+              items: [
+                { icon: Zap, text: "Mobile-first responsive design" },
+                { icon: Target, text: "Scalable system architecture" },
+                { icon: Sparkles, text: "Future-proof solutions" },
+              ],
+              reverse: false,
+            },
+            {
+              id: "2",              title: "Performance",              description: "Speed matters. Every millisecond counts in user experience and search rankings. We obsess over performance metrics, optimize every asset, and employ cutting-edge techniques to deliver sites that load instantly and run flawlessly.",              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/top-view-woman-holding-tablet_23-2149762489.jpg"
+              },
+              items: [
+                { icon: Zap, text: "Sub-second load times" },
+                { icon: Target, text: "Core Web Vitals optimization" },
+                { icon: Sparkles, text: "Advanced caching strategies" },
+              ],
+              reverse: true,
+            },
+            {
+              id: "3",              title: "The Turning Point",              description: "Every successful digital project marks a turning point—the moment when strategy meets execution, vision becomes reality, and brands break through to new levels of customer engagement and business success.",              media: {
+                imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-landing-page-template_23-2149014644.jpg"
+              },
+              items: [
+                { icon: Zap, text: "Strategic digital transformation" },
+                { icon: Target, text: "Measurable business impact" },
+                { icon: Sparkles, text: "Breakthrough results" },
+              ],
+              reverse: false,
+            },
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardThree
+          title="Our Impact"
+          description="Proven results that demonstrate our commitment to excellence and client success."
+          metrics={[
+            { id: "1", icon: Zap, title: "Average Performance Improvement", value: "85%" },
+            { id: "2", icon: Target, title: "Client Retention Rate", value: "96%" },
+            { id: "3", icon: Sparkles, title: "Projects Delivered", value: "150+" },
+            { id: "4", icon: Zap, title: "Years of Excellence", value: "10+" },
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Ready to Break Point?"
+          title="Let's Create Your Next Digital Achievement"
+          description="Whether you're ready to transform your digital presence or want to discuss how we can help your business break through, we're here to listen and deliver exceptional results."
+          tagIcon={Sparkles}
+          inputPlaceholder="your@email.com"
+          buttonText="Start Conversation"
+          termsText="We respect your privacy. We'll only use your email to discuss your project."
+          background={{ variant: "rotated-rays-animated-grid" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Break Point"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 23862a7..f9200cc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,7 +14,7 @@ import { Award, Code, CreditCard, Gauge, Lock, Palette, Quote, ShoppingCart, Sma
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-bubble"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
       contentWidth="medium"
@@ -29,7 +29,7 @@ export default function LandingPage() {
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "hero" },
-            { name: "About", id: "about" },
+            { name: "About", id: "/about" },
             { name: "Services", id: "services" },
             { name: "Work", id: "testimonials" },
             { name: "Contact", id: "contact" },
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index c1f247d..ff74857 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #120006e6;
-  --primary-cta: #e63946;
+  --background: #1a1a1a;
+  --card: #2d2d2d;
+  --foreground: #ffffff;
+  --primary-cta: #00ff00;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #2d2d2d;
   --secondary-cta-text: #120006e6;
-  --accent: #e2e2e2;
-  --background-accent: #e2e2e2;
+  --accent: #00ff00;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);