diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0f7615f..359a87d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -155,4 +155,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 057d811..c646970 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1c1c1c;
+  --background: #020617;
+  --card: #0f172a;
+  --foreground: #e2e8f0;
+  --primary-cta: #c4d8f9;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #041633;
   --secondary-cta-text: #1c1c1c;
-  --accent: #159c49;
-  --background-accent: #a8e8ba;
+  --accent: #2d30f3;
+  --background-accent: #1d4ed8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
diff --git a/src/app/user-profile/page.tsx b/src/app/user-profile/page.tsx
index 2591636..9526f49 100644
--- a/src/app/user-profile/page.tsx
+++ b/src/app/user-profile/page.tsx
@@ -4,6 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
 
 export default function UserProfilePage() {
   return (
@@ -20,25 +21,40 @@ export default function UserProfilePage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-        <NavbarStyleCentered
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Profile", id: "/user-profile" },
-            { name: "Features", id: "features" },
-            { name: "Community", id: "metrics" },
-            { name: "FAQ", id: "faq" }
-          ]}
-          brandName="Sohix"
-        />
-        <main className="min-h-screen pt-32 px-6 flex flex-col items-center justify-center">
-          <h1 className="text-4xl font-bold mb-4">User Profile</h1>
-          <p className="text-lg opacity-80">Manage your custom nickname and community identity here.</p>
-        </main>
-        <FooterBaseCard
-          logoText="Sohix"
-          columns={[{ title: "Platform", items: [{ label: "Community", href: "#" }, { label: "Memes", href: "#" }, { label: "Features", href: "#" }] }, { title: "Support", items: [{ label: "FAQ", href: "#" }, { label: "Safety", href: "#" }, { label: "Contact", href: "#" }] }, { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] }]}
-        />
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Profile", id: "/user-profile" },
+                { name: "Features", id: "/#features" },
+                { name: "Community", id: "/#metrics" },
+                { name: "FAQ", id: "/#faq" }
+            ]}
+            brandName="Sohix"
+            />
+        </div>
+
+        <div className="min-h-screen py-24 flex items-center justify-center">
+            <ProductDetailCard 
+                layout="page"
+                name="Anonymous User #8291"
+                price="Level: 14"
+                description="Member since 2023. Loves memes, anonymous sharing, and community engagement. Custom profile frame active."
+                images={[{ src: "http://img.b2bpic.net/free-photo/portrait-laughing-young-relaxed-man-sitting-outdoors-vintage-circular-stairs_158595-3655.jpg", alt: "User Profile" }]}
+                buttons={[
+                    { text: "Edit Profile" },
+                    { text: "View Post History" }
+                ]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseCard
+            logoText="Sohix"
+            columns={[{ title: "Platform", items: [{ label: "Community", href: "/#" }, { label: "Memes", href: "/#" }, { label: "Features", href: "/#" }] }, { title: "Support", items: [{ label: "FAQ", href: "/#" }, { label: "Safety", href: "/#" }, { label: "Contact", href: "/#" }] }, { title: "Legal", items: [{ label: "Privacy Policy", href: "/#" }, { label: "Terms", href: "/#" }] }]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}