diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..f34dca1
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import FeatureProcessSteps from "@/components/sections/feature/FeatureProcessSteps";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Award, Users, Globe, Heart, Zap } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="slide-background"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="mediumSmall"
+      sizing="large"
+      background="grid"
+      cardStyle="outline"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Lumina Hotel"
+          navItems={[
+            { name: "Rooms", id: "/rooms" },
+            { name: "Amenities", id: "/amenities" },
+            { name: "About", id: "/about" },
+            { name: "Reviews", id: "/reviews" },
+            { name: "Pricing", id: "/pricing" }
+          ]}
+          button={{
+            text: "Book Now",            href: "/pricing"
+          }}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <AboutMetric
+          title="Lumina Hotel: 25 Years of Excellence"
+          metrics={[
+            {
+              icon: Award,
+              label: "Awards Won",              value: "47+"
+            },
+            {
+              icon: Users,
+              label: "Happy Guests Annually",              value: "50K+"
+            },
+            {
+              icon: Globe,
+              label: "International Recognition",              value: "5-Star"
+            },
+            {
+              icon: Heart,
+              label: "Satisfaction Rate",              value: "98%"
+            }
+          ]}
+          metricsAnimation="blur-reveal"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="vision" data-section="vision">
+        <FeatureProcessSteps
+          title="Our Journey & Vision"
+          description="From our founding in 1999 to becoming a global luxury hospitality icon, Lumina Hotel has consistently delivered exceptional experiences."
+          tag="Our Story"
+          tagIcon={Zap}
+          steps={[
+            {
+              number: "01",              title: "Founded with a Dream",              tag: "1999",              description: "Lumina Hotel was founded with a simple yet powerful vision: to create a sanctuary where luxury meets warmth, and every guest feels like family."
+            },
+            {
+              number: "02",              title: "Expansion & Excellence",              tag: "2005-2015",              description: "Over a decade of growth, we expanded our facilities, added world-class amenities, and established ourselves as a premier destination for discerning travelers."
+            },
+            {
+              number: "03",              title: "Global Recognition",              tag: "2015-Present",              description: "Today, Lumina Hotel is recognized internationally for our commitment to sustainability, innovation, and delivering unforgettable hospitality experiences."
+            }
+          ]}
+          stepsAnimation="blur-reveal"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Lumina Hotel"
+          columns={[
+            {
+              title: "About",              items: [
+                {
+                  label: "Our Story",                  href: "/about"
+                },
+                {
+                  label: "Awards",                  href: "#"
+                },
+                {
+                  label: "Careers",                  href: "#"
+                }
+              ]
+            },
+            {
+              title: "Services",              items: [
+                {
+                  label: "Rooms",                  href: "#rooms"
+                },
+                {
+                  label: "Dining",                  href: "#"
+                },
+                {
+                  label: "Spa",                  href: "#amenities"
+                },
+                {
+                  label: "Events",                  href: "#"
+                }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                {
+                  label: "Call Us: +1 (555) 123-4567",                  href: "#"
+                },
+                {
+                  label: "Email: info@luminahotel.com",                  href: "#"
+                },
+                {
+                  label: "Visit Us",                  href: "#"
+                }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Lumina Hotel. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 7af14b7..ada4210 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -28,14 +28,13 @@ export default function BlogPage() {
                     <NavbarStyleCentered
                         brandName="Lumina Hotel"
                         navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Rooms", id: "rooms" },
-                            { name: "Amenities", id: "amenities" },
-                            { name: "About", id: "about" },
-                            { name: "Reviews", id: "reviews" },
-                            { name: "Pricing", id: "pricing" }
+                            { name: "Rooms", id: "#rooms" },
+                            { name: "Amenities", id: "#amenities" },
+                            { name: "About", id: "/about" },
+                            { name: "Reviews", id: "#reviews" },
+                            { name: "Pricing", id: "#pricing" }
                         ]}
-                        button={{ text: "Book Now", href: "pricing" }}
+                        button={{ text: "Book Now", href: "#pricing" }}
                     />
                 </div>
 
@@ -64,16 +63,16 @@ export default function BlogPage() {
                         columns={[
                             {
                                 title: "About",                                items: [
-                                    { label: "Our Story", href: "about" },
+                                    { label: "Our Story", href: "/about" },
                                     { label: "Awards", href: "#" },
                                     { label: "Careers", href: "#" }
                                 ]
                             },
                             {
                                 title: "Services",                                items: [
-                                    { label: "Rooms", href: "rooms" },
+                                    { label: "Rooms", href: "#rooms" },
                                     { label: "Dining", href: "#" },
-                                    { label: "Spa", href: "amenities" },
+                                    { label: "Spa", href: "#amenities" },
                                     { label: "Events", href: "#" }
                                 ]
                             },
@@ -92,4 +91,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
\ No newline at end of file
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 09f29f7..b497137 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1269,4 +1269,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 34496d6..c0cfbe9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -33,7 +33,7 @@ export default function LuminaHotelPage() {
           navItems={[
             { name: "Rooms", id: "rooms" },
             { name: "Amenities", id: "amenities" },
-            { name: "About", id: "about" },
+            { name: "About", id: "/about" },
             { name: "Reviews", id: "reviews" },
             { name: "Pricing", id: "pricing" }
           ]}
@@ -290,7 +290,7 @@ export default function LuminaHotelPage() {
             {
               title: "About",              items: [
                 {
-                  label: "Our Story",                  href: "about"
+                  label: "Our Story",                  href: "/about"
                 },
                 {
                   label: "Awards",                  href: "#"
@@ -335,4 +335,4 @@ export default function LuminaHotelPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 6caa61c..665e2a3 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -85,8 +85,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <NavbarStyleCentered
                             brandName="Lumina Hotel"
                             navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
+                                { name: "Rooms", id: "#rooms" },
+                                { name: "Amenities", id: "#amenities" },
+                                { name: "About", id: "/about" },
+                                { name: "Reviews", id: "#reviews" },
+                                { name: "Pricing", id: "#pricing" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -100,16 +103,16 @@ export default function ProductPage({ params }: ProductPageProps) {
                             columns={[
                                 {
                                     title: "About",                                    items: [
-                                        { label: "Our Story", href: "about" },
+                                        { label: "Our Story", href: "/about" },
                                         { label: "Awards", href: "#" },
                                         { label: "Careers", href: "#" }
                                     ]
                                 },
                                 {
                                     title: "Services",                                    items: [
-                                        { label: "Rooms", href: "rooms" },
+                                        { label: "Rooms", href: "#rooms" },
                                         { label: "Dining", href: "#" },
-                                        { label: "Spa", href: "amenities" },
+                                        { label: "Spa", href: "#amenities" },
                                         { label: "Events", href: "#" }
                                     ]
                                 },
@@ -149,8 +152,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <NavbarStyleCentered
                             brandName="Lumina Hotel"
                             navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
+                                { name: "Rooms", id: "#rooms" },
+                                { name: "Amenities", id: "#amenities" },
+                                { name: "About", id: "/about" },
+                                { name: "Reviews", id: "#reviews" },
+                                { name: "Pricing", id: "#pricing" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -172,16 +178,16 @@ export default function ProductPage({ params }: ProductPageProps) {
                             columns={[
                                 {
                                     title: "About",                                    items: [
-                                        { label: "Our Story", href: "about" },
+                                        { label: "Our Story", href: "/about" },
                                         { label: "Awards", href: "#" },
                                         { label: "Careers", href: "#" }
                                     ]
                                 },
                                 {
                                     title: "Services",                                    items: [
-                                        { label: "Rooms", href: "rooms" },
+                                        { label: "Rooms", href: "#rooms" },
                                         { label: "Dining", href: "#" },
-                                        { label: "Spa", href: "amenities" },
+                                        { label: "Spa", href: "#amenities" },
                                         { label: "Events", href: "#" }
                                     ]
                                 },
@@ -220,8 +226,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <NavbarStyleCentered
                         brandName="Lumina Hotel"
                         navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
+                            { name: "Rooms", id: "#rooms" },
+                            { name: "Amenities", id: "#amenities" },
+                            { name: "About", id: "/about" },
+                            { name: "Reviews", id: "#reviews" },
+                            { name: "Pricing", id: "#pricing" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
@@ -268,16 +277,16 @@ export default function ProductPage({ params }: ProductPageProps) {
                         columns={[
                             {
                                 title: "About",                                items: [
-                                    { label: "Our Story", href: "about" },
+                                    { label: "Our Story", href: "/about" },
                                     { label: "Awards", href: "#" },
                                     { label: "Careers", href: "#" }
                                 ]
                             },
                             {
                                 title: "Services",                                items: [
-                                    { label: "Rooms", href: "rooms" },
+                                    { label: "Rooms", href: "#rooms" },
                                     { label: "Dining", href: "#" },
-                                    { label: "Spa", href: "amenities" },
+                                    { label: "Spa", href: "#amenities" },
                                     { label: "Events", href: "#" }
                                 ]
                             },
@@ -296,4 +305,4 @@ export default function ProductPage({ params }: ProductPageProps) {
             </ReactLenis>
         </ThemeProvider>
     );
-}
\ No newline at end of file
+}
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index d5bb22e..3bd2392 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -38,8 +38,11 @@ export default function ShopPage() {
                         <NavbarStyleCentered
                             brandName="Lumina Hotel"
                             navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
+                                { name: "Rooms", id: "#rooms" },
+                                { name: "Amenities", id: "#amenities" },
+                                { name: "About", id: "/about" },
+                                { name: "Reviews", id: "#reviews" },
+                                { name: "Pricing", id: "#pricing" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -53,16 +56,16 @@ export default function ShopPage() {
                             columns={[
                                 {
                                     title: "About",                                    items: [
-                                        { label: "Our Story", href: "about" },
+                                        { label: "Our Story", href: "/about" },
                                         { label: "Awards", href: "#" },
                                         { label: "Careers", href: "#" }
                                     ]
                                 },
                                 {
                                     title: "Services",                                    items: [
-                                        { label: "Rooms", href: "rooms" },
+                                        { label: "Rooms", href: "#rooms" },
                                         { label: "Dining", href: "#" },
-                                        { label: "Spa", href: "amenities" },
+                                        { label: "Spa", href: "#amenities" },
                                         { label: "Events", href: "#" }
                                     ]
                                 },
@@ -101,8 +104,11 @@ export default function ShopPage() {
                     <NavbarStyleCentered
                         brandName="Lumina Hotel"
                         navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
+                            { name: "Rooms", id: "#rooms" },
+                            { name: "Amenities", id: "#amenities" },
+                            { name: "About", id: "/about" },
+                            { name: "Reviews", id: "#reviews" },
+                            { name: "Pricing", id: "#pricing" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
@@ -124,16 +130,16 @@ export default function ShopPage() {
                         columns={[
                             {
                                 title: "About",                                items: [
-                                    { label: "Our Story", href: "about" },
+                                    { label: "Our Story", href: "/about" },
                                     { label: "Awards", href: "#" },
                                     { label: "Careers", href: "#" }
                                 ]
                             },
                             {
                                 title: "Services",                                items: [
-                                    { label: "Rooms", href: "rooms" },
+                                    { label: "Rooms", href: "#rooms" },
                                     { label: "Dining", href: "#" },
-                                    { label: "Spa", href: "amenities" },
+                                    { label: "Spa", href: "#amenities" },
                                     { label: "Events", href: "#" }
                                 ]
                             },
@@ -152,4 +158,4 @@ export default function ShopPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
\ No newline at end of file
+}