diff --git a/app/profile/[id]/profile-page-client.tsx b/app/profile/[id]/profile-page-client.tsx
index 22fb5bc..93fbdc8 100644
--- a/app/profile/[id]/profile-page-client.tsx
+++ b/app/profile/[id]/profile-page-client.tsx
@@ -22,28 +22,37 @@ interface ProfilePageClientProps {
 
 export function ProfilePageClient({ profile, recentContributions }: ProfilePageClientProps) {
   return (
-    <div className="max-w-2xl mx-auto px-4 py-8 space-y-8">
-      <ProfileHeader
-        name={profile.name}
-        image={profile.image}
-        role={profile.role}
-        verified={profile.verified}
-        createdAt={profile.createdAt}
-      />
+    <div className="w-full flex flex-col gap-8 pb-16">
+      <div className="px-4 md:px-[10svw]">
+        <div className="max-w-7xl mx-auto">
+          <ProfileHeader
+            name={profile.name}
+            role={profile.role}
+            verified={profile.verified}
+            createdAt={profile.createdAt}
+          />
+        </div>
+      </div>
 
-      <StatsRow
-        contributions={profile.contributions}
-        verifiedEntries={profile.verifiedEntries}
-        reputation={profile.reputation}
-      />
+      <div className="px-4 md:px-[10svw]">
+        <div className="max-w-7xl mx-auto">
+          <StatsRow
+            contributions={profile.contributions}
+            verifiedEntries={profile.verifiedEntries}
+            reputation={profile.reputation}
+          />
+        </div>
+      </div>
 
-      <div>
-        <h2 className="text-lg font-semibold mb-4">Recent Contributions</h2>
-        <ContributionList
-          entries={recentContributions}
-          showViewAll
-          totalCount={profile.contributions}
-        />
+      <div className="px-4 md:px-[10svw]">
+        <div className="max-w-7xl mx-auto">
+          <h2 className="text-lg font-semibold mb-4">Recent Contributions</h2>
+          <ContributionList
+            entries={recentContributions}
+            showViewAll
+            totalCount={profile.contributions}
+          />
+        </div>
       </div>
     </div>
   )
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index b71bd5c..775a262 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -84,61 +84,77 @@ export default function ProfilePage() {
   ]
 
   return (
-    <div className="max-w-3xl mx-auto px-4 py-8 space-y-6">
-      <ProfileHeader
-        name={profile.name}
-        image={profile.image}
-        role={profile.role}
-        verified={profile.verified}
-        createdAt={profile.createdAt}
-      />
+    <div className="w-full flex flex-col gap-8 pb-16">
+      {/* Profile header section */}
+      <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }} className="px-4 md:px-[10svw]">
+        <div className="max-w-7xl mx-auto">
+          <ProfileHeader
+            name={profile.name}
+            email={profile.email}
+            role={profile.role}
+            verified={profile.verified}
+            createdAt={profile.createdAt}
+          />
+        </div>
+      </motion.div>
 
-      <StatsRow
-        contributions={profile.contributions}
-        verifiedEntries={profile.verifiedEntries}
-        reputation={profile.reputation}
-      />
+      {/* Stats section */}
+      <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.1 }} className="px-4 md:px-[10svw]">
+        <div className="max-w-7xl mx-auto">
+          <StatsRow
+            contributions={profile.contributions}
+            verifiedEntries={profile.verifiedEntries}
+            reputation={profile.reputation}
+          />
+        </div>
+      </motion.div>
 
-      {/* Tabs */}
-      <div className="flex gap-1 border-b border-border">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
-              activeTab === tab.id
-                ? "border-primary text-primary"
-                : "border-transparent text-text/50 hover:text-text/70"
-            }`}
+      {/* Tabs + content section */}
+      <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.15 }} className="px-4 md:px-[10svw]">
+        <div className="max-w-7xl mx-auto">
+          {/* Tabs */}
+          <div className="flex gap-1 border-b border-border">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                  activeTab === tab.id
+                    ? "border-primary text-primary"
+                    : "border-transparent text-text/50 hover:text-text/70"
+                }`}
+              >
+                <tab.icon className="h-4 w-4" />
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Tab Content */}
+          <motion.div
+            key={activeTab}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.2 }}
+            className="pt-6"
           >
-            <tab.icon className="h-4 w-4" />
-            {tab.label}
-          </button>
-        ))}
-      </div>
+            {activeTab === "overview" && (
+              <div>
+                <h2 className="text-lg font-semibold mb-4">Recent Contributions</h2>
+                <ContributionList entries={contributions} />
+              </div>
+            )}
 
-      {/* Tab Content */}
-      <motion.div
-        key={activeTab}
-        initial={{ opacity: 0, y: 10 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.2 }}
-      >
-        {activeTab === "overview" && (
-          <div>
-            <h2 className="text-lg font-semibold mb-4">Recent Contributions</h2>
-            <ContributionList entries={contributions} />
-          </div>
-        )}
+            {activeTab === "saved" && <SavedGamesGrid />}
 
-        {activeTab === "saved" && <SavedGamesGrid />}
-
-        {activeTab === "settings" && (
-          <div className="text-center py-12 text-text/40">
-            <Settings className="h-8 w-8 mx-auto mb-2" />
-            <p>Account settings will appear here</p>
-          </div>
-        )}
+            {activeTab === "settings" && (
+              <div className="text-center py-12 text-text/40">
+                <Settings className="h-8 w-8 mx-auto mb-2" />
+                <p>Account settings will appear here</p>
+              </div>
+            )}
+          </motion.div>
+        </div>
       </motion.div>
     </div>
   )
diff --git a/components/profile/profile-header.tsx b/components/profile/profile-header.tsx
index 6070260..02cb5a1 100644
--- a/components/profile/profile-header.tsx
+++ b/components/profile/profile-header.tsx
@@ -1,24 +1,23 @@
 "use client"
 
-import Image from "next/image"
-import { User, Shield, Crown, CheckCircle } from "lucide-react"
+import { Shield, Crown, CheckCircle, Mail } from "lucide-react"
 import { motion } from "motion/react"
 
 interface ProfileHeaderProps {
   name: string
-  image: string | null
+  email?: string
   role: string | null
   verified: boolean
   createdAt: string
 }
 
-const roleConfig: Record<string, { label: string; color: string; icon: typeof User }> = {
+const roleConfig: Record<string, { label: string; color: string; icon: typeof Crown }> = {
   admin: { label: "Admin", color: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30", icon: Crown },
   contributor: { label: "Contributor", color: "bg-blue-500/20 text-blue-400 border-blue-500/30", icon: Shield },
-  user: { label: "Member", color: "bg-text/10 text-text/60 border-text/20", icon: User },
+  user: { label: "Member", color: "bg-text/10 text-text/60 border-text/20", icon: Shield },
 }
 
-export function ProfileHeader({ name, image, role, verified, createdAt }: ProfileHeaderProps) {
+export function ProfileHeader({ name, email, role, verified, createdAt }: ProfileHeaderProps) {
   const config = roleConfig[role || "user"] || roleConfig.user
   const RoleIcon = config.icon
 
@@ -31,39 +30,32 @@ export function ProfileHeader({ name, image, role, verified, createdAt }: Profil
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
-      className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6"
+      className="flex flex-col gap-2"
     >
-      <div className="relative shrink-0">
-        {image ? (
-          <Image
-            src={image}
-            alt={name}
-            width={96}
-            height={96}
-            unoptimized
-            className="h-24 w-24 rounded-full border-2 border-border"
-          />
-        ) : (
-          <div className="h-24 w-24 rounded-full bg-secondary/50 border-2 border-border flex items-center justify-center">
-            <User className="h-10 w-10 text-text/40" />
-          </div>
-        )}
+      <div className="flex flex-wrap items-center gap-3">
+        <h1 className="text-2xl font-bold">{name}</h1>
+        <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${config.color}`}>
+          <RoleIcon className="h-3 w-3" />
+          {config.label}
+        </span>
         {verified && (
-          <div className="absolute -bottom-1 -right-1 h-6 w-6 rounded-full bg-green-500 border-2 border-background flex items-center justify-center">
-            <CheckCircle className="h-4 w-4 text-white" />
-          </div>
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30">
+            <CheckCircle className="h-3 w-3" />
+            Verified
+          </span>
         )}
       </div>
-
-      <div className="text-center sm:text-left">
-        <div className="flex flex-col sm:flex-row items-center gap-2">
-          <h1 className="text-2xl font-bold">{name}</h1>
-          <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${config.color}`}>
-            <RoleIcon className="h-3 w-3" />
-            {config.label}
-          </span>
-        </div>
-        <p className="text-sm text-text/50 mt-1">Member since {joinDate}</p>
+      <div className="flex items-center gap-3 text-sm text-text/50">
+        <span>Member since {joinDate}</span>
+        {email && (
+          <>
+            <span>&middot;</span>
+            <span className="flex items-center gap-1">
+              <Mail className="h-3 w-3" />
+              {email}
+            </span>
+          </>
+        )}
       </div>
     </motion.div>
   )