diff --git a/public/demo.jpeg b/public/demo.jpeg
new file mode 100644
index 0000000..a29b83b
Binary files /dev/null and b/public/demo.jpeg differ
diff --git a/public/icons/devdotto.svg b/public/icons/devdotto.svg
new file mode 100644
index 0000000..e4b18cf
--- /dev/null
+++ b/public/icons/devdotto.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>dev.to</title><path d="M7.42 10.05c-.18-.16-.46-.23-.84-.23H6l.02 2.44.04 2.45.56-.02c.41 0 .63-.07.83-.26.24-.24.26-.36.26-2.2 0-1.91-.02-1.96-.29-2.18zM0 4.94v14.12h24V4.94H0zM8.56 15.3c-.44.58-1.06.77-2.53.77H4.71V8.53h1.4c1.67 0 2.16.18 2.6.9.27.43.29.6.32 2.57.05 2.23-.02 2.73-.47 3.3zm5.09-5.47h-2.47v1.77h1.52v1.28l-.72.04-.75.03v1.77l1.22.03 1.2.04v1.28h-1.6c-1.53 0-1.6-.01-1.87-.3l-.3-.28v-3.16c0-3.02.01-3.18.25-3.48.23-.31.25-.31 1.88-.31h1.64v1.3zm4.68 5.45c-.17.43-.64.79-1 .79-.18 0-.45-.15-.67-.39-.32-.32-.45-.63-.82-2.08l-.9-3.39-.45-1.67h.76c.4 0 .75.02.75.05 0 .06 1.16 4.54 1.26 4.83.04.15.32-.7.73-2.3l.66-2.52.74-.04c.4-.02.73 0 .73.04 0 .14-1.67 6.38-1.8 6.68z"/></svg>
\ No newline at end of file
diff --git a/public/icons/github.svg b/public/icons/github.svg
new file mode 100644
index 0000000..538ec5b
--- /dev/null
+++ b/public/icons/github.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
\ No newline at end of file
diff --git a/public/icons/linkedIn.png b/public/icons/linkedIn.png
new file mode 100644
index 0000000..2c28b27
Binary files /dev/null and b/public/icons/linkedIn.png differ
diff --git a/public/icons/x.svg b/public/icons/x.svg
new file mode 100644
index 0000000..a7c37cf
--- /dev/null
+++ b/public/icons/x.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg>
\ No newline at end of file
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
new file mode 100644
index 0000000..c8c234c
--- /dev/null
+++ b/src/app/(home)/layout.tsx
@@ -0,0 +1,16 @@
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+
+export default function HomeLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/(home)/page.tsx
similarity index 69%
rename from src/app/page.tsx
rename to src/app/(home)/page.tsx
index 01eb45f..958e16f 100644
--- a/src/app/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -6,13 +6,13 @@ const HomePage = () => {
   return (
     <main className="flex justify-center items-center ">
       <div className="max-w-6xl">
-      <Hero/>
-      <div className="md:py-8 py-4">
-        <MainContainer/>
-      </div>
-      <div>
-        <Explore />
-      </div>
+        <Hero />
+        <div className="md:py-8 py-4">
+          <MainContainer />
+        </div>
+        <div>
+          <Explore />
+        </div>
       </div>
     </main>
   );
diff --git a/src/app/(user)/components/profile-card.tsx b/src/app/(user)/components/profile-card.tsx
new file mode 100644
index 0000000..0334768
--- /dev/null
+++ b/src/app/(user)/components/profile-card.tsx
@@ -0,0 +1,44 @@
+import Image from "next/image";
+import { USER_SOCIALS_ICONS } from "@/constants";
+
+export default function ProfileCard() {
+  return (
+    <div className="bg-white rounded-2xl shadow-lg py-6 px-6 md:px-12 max-w-2xl mx-auto">
+      <div className="flex flex-col md:flex-row justify-between items-center gap-6 md:gap-8">
+        {/* profile user info */}
+        <div className="text-center md:text-left flex-1">
+          <h2 className="text-2xl font-bold mb-1">Navid Abbaszedeh</h2>
+          <p className="text-[var(--secondary)] text-sm md:text-base">
+            Fullstack Engineer and Systems Architect
+          </p>
+        </div>
+
+        {/* profile user socials */}
+        <div className="flex flex-col items-center md:items-end gap-3">
+          <button className="bg-[#004715] text-white rounded-lg py-2.5 px-10 hover:bg-[#00360f] transition-colors cursor-pointer font-medium text-sm whitespace-nowrap shadow-sm hover:shadow-md">
+            Follow
+          </button>
+
+          {/* social icons */}
+          <div className="flex gap-3 mt-1">
+            {USER_SOCIALS_ICONS.map((icon) => (
+              <a
+                key={icon.id}
+                href="#"
+                className="flex items-center hover:opacity-70 transition-opacity"
+              >
+                <Image
+                  src={icon.src}
+                  alt={icon.label}
+                  width={20}
+                  height={20}
+                  priority
+                />
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(user)/components/profile-tabs.tsx b/src/app/(user)/components/profile-tabs.tsx
new file mode 100644
index 0000000..9906c30
--- /dev/null
+++ b/src/app/(user)/components/profile-tabs.tsx
@@ -0,0 +1,41 @@
+"use client";
+import { useState } from "react";
+import { USER_PROFILE_TABS } from "@/constants";
+
+export default function ProfileTabs() {
+  const [activeTab, setActiveTab] = useState("achievements");
+
+  return (
+    <div className="p-6">
+      {/* Tab buttons */}
+      <div className="flex items-center justify-between gap-2 border-b border-gray-200 pb-4 max-w-2xl mx-auto">
+        {USER_PROFILE_TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`py-2 cursor-pointer font-medium rounded-t-lg transition ${
+              activeTab === tab.id
+                ? "text-[#004715] border-b-2 border-[#004715]"
+                : "text-gray-600 hover:text-[#004715]"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className="mt-6 bg-[var(--foreground)] text-white p-8 rounded-2xl text-center max-w-96">
+        {USER_PROFILE_TABS.map((tab) => (
+          <div
+            key={tab.id}
+            className={`${activeTab === tab.id ? "block" : "hidden"}`}
+          >
+            <h1 className="text-2xl font-bold mb-1">{tab.heading}</h1>
+            <p className="leading-relaxed text-sm">{tab.content}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(user)/profile/layout.tsx b/src/app/(user)/profile/layout.tsx
new file mode 100644
index 0000000..060d5fc
--- /dev/null
+++ b/src/app/(user)/profile/layout.tsx
@@ -0,0 +1,12 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Frontend Advanced user profile",
+  description: "View user profile, achievements, badges and certifications",
+};
+
+export default function UserLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return <section>{children}</section>;
+}
diff --git a/src/app/(user)/profile/page.tsx b/src/app/(user)/profile/page.tsx
new file mode 100644
index 0000000..32088f9
--- /dev/null
+++ b/src/app/(user)/profile/page.tsx
@@ -0,0 +1,37 @@
+import Image from "next/image";
+import ProfileCard from "@/app/(user)/components/profile-card";
+import ProfileTabs from "../components/profile-tabs";
+
+const UserProfile = () => {
+  return (
+    // black background section
+    <div className="relative">
+      <div className="bg-[var(--foreground)] h-64 relative">
+        {/* profile card centered on black background*/}
+        <div className="flex justify-center items-center h-full">
+          <div className="relative w-32 h-32">
+            <Image
+              src="/demo.jpeg"
+              alt="Profile"
+              fill
+              priority
+              className="object-cover rounded-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Profile info */}
+      <div className="max-w-6xl mx-auto">
+        <div className="relative -mt-12 z-10 px-4">
+          <ProfileCard />
+        </div>
+      </div>
+
+      {/* profile tabs */}
+      <ProfileTabs />
+    </div>
+  );
+};
+
+export default UserProfile;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8835845..9174fa1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,26 +1,21 @@
 import type { Metadata } from "next";
 import { inter } from "@/lib/font";
 import "./globals.css";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
 
 export const metadata: Metadata = {
   title: "Frontend Advanced",
-  description: "All-in-one educational platform for junior to senior frontend developers to lean advanced topics with interactive tools & hands-on coding sessions",
+  description:
+    "All-in-one educational platform for junior to senior frontend developers to lean advanced topics with interactive tools & hands-on coding sessions",
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en" className={`${inter.variable}`}>
-      <body className={`font-sans px-5 bg-background`}>
-        <Header />
-        {children}
-        <Footer />
-      </body>
+      <body className={`font-sans bg-background`}>{children}</body>
     </html>
   );
 }
diff --git a/src/constants/index.ts b/src/constants/index.ts
index e67e164..df4b71c 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -27,7 +27,62 @@ export interface SectionItem {
 }
 
 export const SECTION_CONTENT: SectionItem[] = [
-  { id: 1, h1Content: "Deep dives into frameworks.", pContent: "Unpack the complexities of React, Vue, and other cutting-edge libraries with real-world scenarios.", src: "/Section-1-img.webp", alt: "This image contains the vue.js logo and a developer who is working with his laptop and exploring the framework." },
-  { id: 2, h1Content: "Performance and architecture.", pContent: "Learn advanced techniques in performance optimization and scalable frontend architecture.", src: "/Section-2-img.webp", alt: "This image shows a high-level overview of a web application's architecture, with various components and layers." },
-  { id: 3, h1Content: "Modern tooling mastery.", pContent: "Expert workflows covering build tools, testing, accessibility, and much more.", src: "/Section-3-img.webp", alt: "This image features modern web development coding and HTML on the sides of a laptop." },
-];
\ No newline at end of file
+  {
+    id: 1,
+    h1Content: "Deep dives into frameworks.",
+    pContent:
+      "Unpack the complexities of React, Vue, and other cutting-edge libraries with real-world scenarios.",
+    src: "/Section-1-img.webp",
+    alt: "This image contains the vue.js logo and a developer who is working with his laptop and exploring the framework.",
+  },
+  {
+    id: 2,
+    h1Content: "Performance and architecture.",
+    pContent:
+      "Learn advanced techniques in performance optimization and scalable frontend architecture.",
+    src: "/Section-2-img.webp",
+    alt: "This image shows a high-level overview of a web application's architecture, with various components and layers.",
+  },
+  {
+    id: 3,
+    h1Content: "Modern tooling mastery.",
+    pContent:
+      "Expert workflows covering build tools, testing, accessibility, and much more.",
+    src: "/Section-3-img.webp",
+    alt: "This image features modern web development coding and HTML on the sides of a laptop.",
+  },
+];
+
+export const USER_SOCIALS_ICONS = [
+  { id: 1, label: "X", src: "/icons/x.svg" },
+  { id: 2, label: "Devto", src: "/icons/devdotto.svg" },
+  { id: 3, label: "LinkedIn", src: "/icons/linkedIn.png" },
+  { id: 4, label: "GitHub", src: "/icons/github.svg" },
+];
+
+export interface UserProfileTabItem {
+  id: string;
+  label: string;
+  heading?: string;
+  content: string;
+}
+
+export const USER_PROFILE_TABS: UserProfileTabItem[] = [
+  {
+    id: "achievements",
+    label: "Achievements",
+    heading: "System architect",
+    content:
+      "Responsible for designing and overseeing complex enterprise technical implementation with business objectives, define architectural standards, and guides development teams through strategic technology decisions",
+  },
+  {
+    id: "trophies",
+    label: "Trophies",
+    content: "trophies.....",
+  },
+  {
+    id: "badges",
+    label: "Badges",
+    content: "list of badges.....",
+  },
+];