diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
new file mode 100644
index 0000000..f2bde61
--- /dev/null
+++ b/src/app/events/page.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { TextSplitAbout } from '@/components/sections/about/TextSplitAbout';
+
+export default function EventsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeLargeTitles"
+        background="none"
+        cardStyle="outline"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Events", id: "/events" },
+              { name: "Menu", id: "/#menu" },
+              { name: "Visit", id: "/#visit" },
+              { name: "Shop", id: "/#shop" }
+            ]}
+            brandName="HANDS+ROSE"
+          />
+        </div>
+
+        <div style={{ minHeight: "60vh", display: "flex", alignItems: "center", padding: "4rem 0" }}>
+          <TextSplitAbout
+            title="Upcoming Events"
+            description={["Join us for community gatherings, worship nights, and special coffee tastings held right here in the sanctuary.", "Keep an eye on this space for our latest schedule updates." ]}
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Explore", items: [{ label: "Menu", href: "/#menu" }, { label: "Story", href: "#" }, { label: "Visit", href: "/#visit" }] },
+              { title: "Community", items: [{ label: "Events", href: "/events" }, { label: "Upperroom", href: "#" }, { label: "Shop", href: "/#shop" }] }
+            ]}
+            logoText="HANDS+ROSE"
+            copyrightText="© 2025 HANDS+ROSE COFFEE"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
new file mode 100644
index 0000000..7ca9ff0
--- /dev/null
+++ b/src/app/menu/page.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function MenuPage() {
+  return (
+    <ThemeProvider>
+      <ReactLenis root>
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "Story", id: "/story" }, { name: "Visit", id: "/visit" }, { name: "Shop", id: "/shop" }]} brandName="HANDS+ROSE" />
+        <ProductCardFour
+          animationType="slide-up"
+          textboxLayout="default"
+          gridVariant="three-columns-all-equal-width"
+          useInvertedBackground={false}
+          products={[
+            { id: "1", name: "Maui Cup", price: "Seasonal", variant: "House Favorite", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcYbS8v4l7y4Itr4rowFin1yZu/a-high-end-artistic-close-up-of-a-season-1774789971389-7e4f0c24.png" },
+            { id: "2", name: "Miel Latte", price: "Staple", variant: "Classic", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcYbS8v4l7y4Itr4rowFin1yZu/a-warm-miel-latte-with-delicate-honey-dr-1774789968523-c787b062.png" },
+            { id: "3", name: "Ginger Rose Matcha", price: "Most Loved", variant: "Seasonal", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcYbS8v4l7y4Itr4rowFin1yZu/a-vivid-iced-matcha-latte-with-visible-g-1774789968772-5d758a64.png" }
+          ]}
+          title="Signature Drinks"
+          description="Creative, seasonal, and crafted for stillness."
+        />
+        <FooterBase columns={[{ title: "Explore", items: [{ label: "Menu", href: "/menu" }, { label: "Story", href: "/story" }, { label: "Visit", href: "/visit" }] }, { title: "Community", items: [{ label: "Events", href: "#" }, { label: "Upperroom", href: "#" }, { label: "Shop", href: "/shop" }] }]} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ce5eb53..0bbb69c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -31,10 +31,11 @@ export default function LandingPage() {
         <div id="nav" data-section="nav">
           <NavbarStyleCentered
             navItems={[
-              { name: "Home", id: "hero" },
-              { name: "Menu", id: "menu" },
-              { name: "Visit", id: "visit" },
-              { name: "Shop", id: "shop" }
+              { name: "Home", id: "/" },
+              { name: "Events", id: "/events" },
+              { name: "Menu", id: "/#menu" },
+              { name: "Visit", id: "/#visit" },
+              { name: "Shop", id: "/#shop" }
             ]}
             brandName="HANDS+ROSE"
           />
@@ -52,7 +53,7 @@ export default function LandingPage() {
               { name: "Jordan M.", handle: "@visitor", testimonial: "A sanctuary for both the body and the soul. Truly unique.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcYbS8v4l7y4Itr4rowFin1yZu/a-vivid-iced-matcha-latte-with-visible-g-1774789968772-5d758a64.png", imageAlt: "A vivid iced matcha latte with visible ginger and rose petals, bright and elegant, in a clear glass " },
               { name: "Sarah L.", handle: "@regular", testimonial: "The attention to detail in their roasts is unmatched in the city.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcYbS8v4l7y4Itr4rowFin1yZu/a-quiet-peaceful-sanctuary-space-featuri-1774789968460-82a3f557.png", imageAlt: "A quiet, peaceful sanctuary space featuring soft natural light, minimalist seating, and a sense of s" }
             ]}
-            buttons={[{ text: "Plan Your Visit", href: "#visit" }, { text: "Explore the Menu", href: "#menu" }]}
+            buttons={[{ text: "Plan Your Visit", href: "/#visit" }, { text: "Explore the Menu", href: "/#menu" }]}
             imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcYbS8v4l7y4Itr4rowFin1yZu/a-luxurious-coffee-bar-interior-with-war-1774789969035-02390410.png"
             imageAlt="Hand-crafted coffee at HANDS+ROSE"
             mediaAnimation="slide-up"
@@ -135,8 +136,8 @@ export default function LandingPage() {
         <div id="footer" data-section="footer">
           <FooterBase
             columns={[
-              { title: "Explore", items: [{ label: "Menu", href: "#menu" }, { label: "Story", href: "#" }, { label: "Visit", href: "#visit" }] },
-              { title: "Community", items: [{ label: "Events", href: "#" }, { label: "Upperroom", href: "#" }, { label: "Shop", href: "#shop" }] }
+              { title: "Explore", items: [{ label: "Menu", href: "/#menu" }, { label: "Story", href: "#" }, { label: "Visit", href: "/#visit" }] },
+              { title: "Community", items: [{ label: "Events", href: "/events" }, { label: "Upperroom", href: "#" }, { label: "Shop", href: "/#shop" }] }
             ]}
             logoText="HANDS+ROSE"
             copyrightText="© 2025 HANDS+ROSE COFFEE"
@@ -145,4 +146,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/story/page.tsx b/src/app/story/page.tsx
new file mode 100644
index 0000000..dd9d23d
--- /dev/null
+++ b/src/app/story/page.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function StoryPage() {
+  return (
+    <ThemeProvider>
+      <ReactLenis root>
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "Story", id: "/story" }, { name: "Visit", id: "/visit" }, { name: "Shop", id: "/shop" }]} brandName="HANDS+ROSE" />
+        <SplitAbout
+          textboxLayout="split"
+          useInvertedBackground={false}
+          title="More Than a Coffee Shop. A Sanctuary."
+          description="Inside Upperroom, HANDS+ROSE COFFEE sits at the intersection of craft and contemplation. Come for the coffee, stay for the stillness."
+          bulletPoints={[
+            { title: "Quiet Corners", description: "Perfect for reading, journaling, and reflection." },
+            { title: "Live Worship", description: "Experience the sound of Upperroom while you sip." },
+            { title: "Outdoor Patio", description: "Peaceful space for conversation and community." }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcYbS8v4l7y4Itr4rowFin1yZu/a-quiet-peaceful-sanctuary-space-featuri-1774789968460-82a3f557.png"
+          mediaAnimation="slide-up"
+        />
+        <FooterBase columns={[{ title: "Explore", items: [{ label: "Menu", href: "/menu" }, { label: "Story", href: "/story" }, { label: "Visit", href: "/visit" }] }, { title: "Community", items: [{ label: "Events", href: "#" }, { label: "Upperroom", href: "#" }, { label: "Shop", href: "/shop" }] }]} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 959dad9..5390abe 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #F7F1EA;
+  --background: #FAF7F2;
   --card: #FFFFFF;
-  --foreground: #1F130F;
-  --primary-cta: #C9A15D;
+  --foreground: #2C2420;
+  --primary-cta: #B88E5E;
   --primary-cta-text: #1F130F;
-  --secondary-cta: #E3C4C9;
+  --secondary-cta: #E6DCD1;
   --secondary-cta-text: #1F130F;
-  --accent: #A9B7A0;
-  --background-accent: #E3C4C9;
+  --accent: #A7B8A0;
+  --background-accent: #D1C6BB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);