Index: chapterx-frontend/src/pages/profile/ProfilePage.tsx
===================================================================
--- chapterx-frontend/src/pages/profile/ProfilePage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/profile/ProfilePage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,163 @@
+import React, { useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { BookOpen, Heart, Users, Calendar, MessageCircle, Eye } from 'lucide-react'
+import { useAuthStore } from '../../store/authStore'
+import { useStoryStore } from '../../store/storyStore'
+import { Avatar } from '../../components/ui/Avatar'
+import { RoleBadge, StatusBadge } from '../../components/ui/Badge'
+import { StoryCard } from '../../components/ui/StoryCard'
+import { GenreBadge } from '../../components/ui/Badge'
+
+type Tab = 'stories' | 'about'
+
+export const ProfilePage: React.FC = () => {
+  const { username } = useParams<{ username: string }>()
+  const navigate = useNavigate()
+  const { allUsers, currentUser } = useAuthStore()
+  const { stories, comments } = useStoryStore()
+  const [tab, setTab] = useState<Tab>('stories')
+
+  const user = allUsers.find(u => u.username === username)
+
+  if (!user) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-20 text-center">
+        <h2 className="text-2xl text-white mb-4">User not found</h2>
+      </div>
+    )
+  }
+
+  const userStories = stories.filter(s => s.user_id === user.user_id && s.status === 'published')
+  const totalLikes = userStories.reduce((acc, s) => acc + s.total_likes, 0)
+  const totalViews = userStories.reduce((acc, s) => acc + s.total_views, 0)
+  const userComments = comments.filter(c => c.user_id === user.user_id)
+  const allGenres = [...new Set(userStories.flatMap(s => s.genres))]
+
+  return (
+    <div className="max-w-5xl mx-auto px-4 py-8">
+      {/* Profile header */}
+      <div className="relative mb-8">
+        {/* Cover */}
+        <div className="h-32 sm:h-48 rounded-2xl bg-gradient-to-br from-indigo-900 via-violet-900 to-purple-900 mb-16 sm:mb-20 overflow-hidden">
+          <div className="absolute inset-0 rounded-2xl opacity-40">
+            <div className="absolute top-4 left-16 w-32 h-32 rounded-full bg-white/10 blur-2xl" />
+            <div className="absolute bottom-2 right-8 w-24 h-24 rounded-full bg-white/10 blur-xl" />
+          </div>
+        </div>
+
+        {/* Avatar + info */}
+        <div className="absolute bottom-0 left-0 right-0 px-6 flex items-end justify-between">
+          <Avatar name={`${user.name} ${user.surname}`} size="xl" className="ring-4 ring-slate-950" />
+          {currentUser?.user_id === user.user_id && (
+            <button className="mb-2 text-sm text-indigo-400 hover:text-indigo-300 transition-colors">
+              Edit Profile
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* User info */}
+      <div className="mb-8">
+        <div className="flex items-center gap-3 mb-1">
+          <h1 className="font-serif text-2xl font-bold text-white">
+            {user.name} {user.surname}
+          </h1>
+          <RoleBadge role={user.role} />
+        </div>
+        <p className="text-slate-400">@{user.username}</p>
+        {user.bio && <p className="text-slate-300 mt-3 max-w-xl">{user.bio}</p>}
+        <div className="flex items-center gap-4 mt-4 flex-wrap">
+          <span className="flex items-center gap-1 text-slate-400 text-sm">
+            <Calendar size={14} />
+            Joined {new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
+          </span>
+          <span className="flex items-center gap-1 text-slate-400 text-sm">
+            <Users size={14} />
+            {user.follower_count} followers · {user.following_count} following
+          </span>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
+        {[
+          { icon: <BookOpen size={16} className="text-indigo-400" />, value: userStories.length, label: 'Stories' },
+          { icon: <Heart size={16} className="text-rose-400" />, value: totalLikes.toLocaleString(), label: 'Likes' },
+          { icon: <Eye size={16} className="text-blue-400" />, value: totalViews.toLocaleString(), label: 'Views' },
+          { icon: <MessageCircle size={16} className="text-amber-400" />, value: userComments.length, label: 'Comments' },
+        ].map(s => (
+          <div key={s.label} className="bg-slate-800 border border-slate-700 rounded-xl p-4 text-center">
+            <div className="flex justify-center mb-1">{s.icon}</div>
+            <p className="text-xl font-bold text-white">{s.value}</p>
+            <p className="text-slate-500 text-xs">{s.label}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 p-1 bg-slate-800 rounded-xl mb-6 w-fit">
+        {(['stories', 'about'] as Tab[]).map(t => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            className={`px-4 py-2 rounded-lg text-sm font-medium capitalize transition-colors ${
+              tab === t ? 'bg-indigo-600 text-white' : 'text-slate-400 hover:text-white'
+            }`}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      {tab === 'stories' ? (
+        <div>
+          {userStories.length === 0 ? (
+            <div className="text-center py-16 text-slate-500">
+              <BookOpen size={40} className="mx-auto mb-3 opacity-40" />
+              <p>No published stories yet.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {userStories.map(story => (
+                <StoryCard key={story.story_id} story={story} />
+              ))}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-6">
+          <div className="bg-slate-800 border border-slate-700 rounded-2xl p-6">
+            <h3 className="text-white font-semibold mb-3">About</h3>
+            <p className="text-slate-300">{user.bio || 'No bio provided.'}</p>
+          </div>
+          {allGenres.length > 0 && (
+            <div className="bg-slate-800 border border-slate-700 rounded-2xl p-6">
+              <h3 className="text-white font-semibold mb-3">Writes In</h3>
+              <div className="flex flex-wrap gap-2">
+                {allGenres.map(g => <GenreBadge key={g} genre={g} />)}
+              </div>
+            </div>
+          )}
+          <div className="bg-slate-800 border border-slate-700 rounded-2xl p-6">
+            <h3 className="text-white font-semibold mb-3">Stats</h3>
+            <div className="space-y-3">
+              <div className="flex justify-between text-sm">
+                <span className="text-slate-400">Role</span>
+                <RoleBadge role={user.role} />
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-slate-400">Member since</span>
+                <span className="text-white">{new Date(user.created_at).toLocaleDateString()}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-slate-400">Published stories</span>
+                <span className="text-white">{userStories.length}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}