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
+}