diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 7ab6109..a1966fa 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -5,7 +5,7 @@ import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { ThemeProvider } from '@/components/ui/ThemeProvider';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 
 export default function AboutPage() {
   return (
@@ -13,22 +13,27 @@ export default function AboutPage() {
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="pill"
-      contentWidth="compact"
-      sizing="largeSizeMediumTitles"
+      contentWidth="medium"
+      sizing="medium"
       background="aurora"
-      cardStyle="gradient-mesh"
-      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="layered"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       showBlurBottom={false}
     >
       <div id="nav" data-section="nav">
         <NavbarStyleMinimal
           brandName="Bloom & Petals"
           button={{
-            text: "Shop Now",
-            href: "/products"
+            text: "Shop Now",            href: "/products"
           }}
         />
+        <div style={{ position: 'absolute', top: '20px', right: '200px', zIndex: 1000 }}>
+          <Link href="/" style={{ marginRight: '15px', color: 'var(--foreground)' }}>Home</Link>
+          <Link href="/about" style={{ marginRight: '15px', color: 'var(--foreground)' }}>About</Link>
+          <Link href="/products" style={{ marginRight: '15px', color: 'var(--foreground)' }}>Products</Link>
+          <Link href="/contact" style={{ color: 'var(--foreground)' }}>Contact</Link>
+        </div>
       </div>
 
       <div id="about" data-section="about">
@@ -53,22 +58,13 @@ export default function AboutPage() {
           useInvertedBackground="noInvert"
           steps={[
             {
-              number: "01",
-              title: "Choose Your Flowers",
-              description: "Browse our curated collection of fresh, premium arrangements or customize your own.",
-              tag: "Selection"
+              number: "01",              title: "Choose Your Flowers",              description: "Browse our curated collection of fresh, premium arrangements or customize your own.",              tag: "Selection"
             },
             {
-              number: "02",
-              title: "Add Personal Touch",
-              description: "Include a heartfelt message, select delivery date, and add special add-ons like chocolates or candles.",
-              tag: "Customization"
+              number: "02",              title: "Add Personal Touch",              description: "Include a heartfelt message, select delivery date, and add special add-ons like chocolates or candles.",              tag: "Customization"
             },
             {
-              number: "03",
-              title: "Fast Delivery",
-              description: "We'll arrange, package, and deliver your flowers with care straight to the recipient's door.",
-              tag: "Delivery"
+              number: "03",              title: "Fast Delivery",              description: "We'll arrange, package, and deliver your flowers with care straight to the recipient's door.",              tag: "Delivery"
             }
           ]}
         />