diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..fe44a33
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { Target, Eye, Sparkles } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="largeSizeMediumTitles"
+        background="grid"
+        cardStyle="inset"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Features", id: "/features" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Nexus AI"
+          />
+        </div>
+
+        <div id="who-we-are" data-section="who-we-are">
+          <SplitAbout
+            title="Who We Are"
+            description="Nexus AI is a premier development agency focused on accelerating enterprise innovation through cutting-edge AI architecture and custom software engineering."
+            imageSrc="http://img.b2bpic.net/free-photo/startup-cybersecurity-expert-looking-company-security-vulnerabilities_482257-125918.jpg"
+            imagePosition="left"
+            textboxLayout="split"
+          />
+        </div>
+
+        <div id="mission-vision" data-section="mission-vision">
+            <FeatureCardTwentyOne
+                title="Our Core Direction"
+                description="The guiding principles that define our commitment to excellence and future-focused growth."
+                accordionItems={[
+                    { id: "m1", title: "Our Mission", content: "To empower businesses by bridging the gap between complex AI research and scalable, practical software solutions." },
+                    { id: "v1", title: "Our Vision", content: "To define the future of enterprise software, making advanced automation accessible and impactful for every industry." }
+                ]}
+                imageSrc="http://img.b2bpic.net/free-photo/data-center-engineering-team-working-together-using-ai-visualization_482257-126733.jpg"
+                mediaPosition="right"
+            />
+        </div>
+
+        <div id="why-choose-us" data-section="why-choose-us">
+          <SplitAbout
+            title="Why Choose Us"
+            description="We blend deep technical expertise with a relentless focus on client success."
+            bulletPoints={[
+              { title: "Proven Expertise", description: "Years of experience delivering complex AI deployments.", icon: Sparkles },
+              { title: "Strategic Alignment", description: "Solutions tailored to your specific business model.", icon: Target },
+              { title: "Future-Proof", description: "Technology stacks that evolve with the changing landscape.", icon: Eye },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/business-concept-with-progress-close-up_23-2149151161.jpg"
+            imagePosition="right"
+            textboxLayout="split"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/light-blue-3d-abstract-wave-pattern_53876-95187.jpg"
+            logoText="Nexus AI"
+            columns={[
+              { title: "Agency", items: [{ label: "About", href: "/about" }, { label: "Services", href: "/#features" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6861666..f77c6a7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
@@ -11,7 +11,7 @@ import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSp
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import { Award, Shield, Zap } from "lucide-react";
+import { Award, Shield, Zap, Mail, MessageSquare } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -182,15 +182,14 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
+      <ContactCenter
+      tag="Contact"
+      tagIcon={MessageSquare}
+      title="Let's Build Something Great"
+      description="Reach out to us via our form, send an email to hello@nexus.ai, or connect on WhatsApp for immediate support."
       background={{
         variant: "sparkles-gradient"}}
-      text="Ready to build the future? Reach out today."
-      buttons={[
-        {
-          text: "Contact Us",          href: "mailto:hello@agency.com"},
-      ]}
+      onSubmit={(email) => console.log("Form submitted", email)}
     />
   </div>