Index: chapterx-frontend/src/pages/profile/ProfilePage.tsx
===================================================================
--- chapterx-frontend/src/pages/profile/ProfilePage.tsx	(revision 0b502c2664f4d6c64626f3394b4f1dc540e0aa9b)
+++ chapterx-frontend/src/pages/profile/ProfilePage.tsx	(revision 99c1e45f4ac45a164229bc6f60f3b05bc26df047)
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { BookOpen, Heart, Users, Calendar, MessageCircle, Eye } from 'lucide-react'
+import { BookOpen, Heart, Calendar, MessageCircle } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useStoryStore } from '../../store/storyStore'
@@ -18,5 +18,5 @@
   const navigate = useNavigate()
   const { allUsers, currentUser, fetchAllUsers, updateUser } = useAuthStore()
-  const { stories, comments } = useStoryStore()
+  const { stories, fetchStories } = useStoryStore()
   const { addToast } = useUIStore()
   const [tab, setTab] = useState<Tab>('stories')
@@ -27,4 +27,5 @@
 
   useEffect(() => {
+    fetchStories()
     if (allUsers.length === 0) {
       setLoading(true)
@@ -74,6 +75,5 @@
   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 totalComments = userStories.reduce((acc, s) => acc + s.total_comments, 0)
   const allGenres = [...new Set(userStories.flatMap(s => s.genres))]
 
@@ -116,18 +116,13 @@
             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">
+      <div className="grid grid-cols-3 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' },
+          { icon: <MessageCircle size={16} className="text-amber-400" />, value: totalComments, label: 'Comments' },
         ].map(s => (
           <div key={s.label} className="bg-slate-800 border border-slate-700 rounded-xl p-4 text-center">
@@ -172,8 +167,4 @@
       ) : (
         <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">
Index: chapterx-frontend/src/pages/story/StoryDetailPage.tsx
===================================================================
--- chapterx-frontend/src/pages/story/StoryDetailPage.tsx	(revision 0b502c2664f4d6c64626f3394b4f1dc540e0aa9b)
+++ chapterx-frontend/src/pages/story/StoryDetailPage.tsx	(revision 99c1e45f4ac45a164229bc6f60f3b05bc26df047)
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, BookOpen, Eye, Users, Calendar, Plus, BookmarkPlus } from 'lucide-react'
+import { ArrowLeft, BookOpen, Users, Calendar, Plus, BookmarkPlus } from 'lucide-react'
 import { useStoryStore } from '../../store/storyStore'
 import { useAuthStore } from '../../store/authStore'
@@ -117,4 +117,7 @@
       {/* Hero */}
       <div className={`relative rounded-2xl overflow-hidden mb-8 bg-gradient-to-br ${gradient}`}>
+        {story.cover_image && (
+          <img src={story.cover_image} alt={story.title} className="absolute inset-0 w-full h-full object-cover opacity-30" />
+        )}
         <div className="absolute inset-0 bg-gradient-to-t from-slate-950/90 via-slate-950/30 to-transparent" />
         <div className="relative p-8 sm:p-12">
@@ -134,8 +137,4 @@
               <Avatar name={story.author_username} size="sm" />
               <span className="text-white text-sm font-medium">{story.author_username}</span>
-            </div>
-            <div className="flex items-center gap-1 text-slate-400 text-sm">
-              <Eye size={14} />
-              {story.total_views.toLocaleString()} views
             </div>
             <div className="flex items-center gap-1 text-slate-400 text-sm">
@@ -170,4 +169,11 @@
           </div>
 
+          {/* Story content */}
+          {story.content && (
+            <div className="bg-slate-800/50 border border-slate-700 rounded-2xl p-6">
+              <p className="text-slate-200 leading-relaxed font-serif whitespace-pre-wrap">{story.content}</p>
+            </div>
+          )}
+
           {/* Chapters */}
           <div>
@@ -207,8 +213,4 @@
                 <span className="text-slate-400">Likes</span>
                 <span className="text-white">{(liveLikes ?? story.total_likes).toLocaleString()}</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-slate-400">Views</span>
-                <span className="text-white">{story.total_views.toLocaleString()}</span>
               </div>
               <div className="flex justify-between">
Index: chapterx-frontend/src/pages/writer/CreateStoryPage.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/CreateStoryPage.tsx	(revision 0b502c2664f4d6c64626f3394b4f1dc540e0aa9b)
+++ chapterx-frontend/src/pages/writer/CreateStoryPage.tsx	(revision 99c1e45f4ac45a164229bc6f60f3b05bc26df047)
@@ -21,4 +21,5 @@
     short_description: '',
     content: '',
+    cover_image: '',
     genres: [] as string[],
     mature_content: false,
@@ -45,4 +46,5 @@
       story_id: Date.now(),
       ...form,
+      cover_image: form.cover_image || undefined,
       user_id: currentUser.user_id,
       author_username: currentUser.username,
@@ -124,4 +126,21 @@
               <span className="text-slate-600 text-xs">{form.short_description.length}/280</span>
             </div>
+          </div>
+
+          {/* Cover image */}
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Cover Image URL <span className="text-slate-500 font-normal">(optional)</span></label>
+            <input
+              value={form.cover_image}
+              onChange={e => {
+                const val = e.target.value
+                if (!val || val.startsWith('http')) setField('cover_image', val)
+              }}
+              placeholder="https://example.com/image.jpg"
+              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+            />
+            {form.cover_image?.startsWith('http') && (
+              <img src={form.cover_image} alt="Cover preview" className="mt-2 h-32 w-full object-cover rounded-xl opacity-80" onError={e => (e.currentTarget.style.display = 'none')} />
+            )}
           </div>
 
Index: chapterx-frontend/src/pages/writer/WriterDashboard.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/WriterDashboard.tsx	(revision 0b502c2664f4d6c64626f3394b4f1dc540e0aa9b)
+++ chapterx-frontend/src/pages/writer/WriterDashboard.tsx	(revision 99c1e45f4ac45a164229bc6f60f3b05bc26df047)
@@ -1,5 +1,5 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Plus, BookOpen, Eye, Heart, MessageCircle, TrendingUp, Bell } from 'lucide-react'
+import { Plus, BookOpen, Heart, MessageCircle, TrendingUp, Bell } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useStoryStore } from '../../store/storyStore'
@@ -22,6 +22,8 @@
   const navigate = useNavigate()
   const { currentUser } = useAuthStore()
-  const { stories, collaborations } = useStoryStore()
+  const { stories, collaborations, fetchStories } = useStoryStore()
   const { notifications } = useNotificationStore()
+
+  useEffect(() => { fetchStories() }, [])
 
   if (!currentUser) return null
@@ -34,5 +36,4 @@
   const published = myStories.filter(s => s.status === 'published')
   const drafts = myStories.filter(s => s.status === 'draft')
-  const totalViews = myStories.reduce((acc, s) => acc + s.total_views, 0)
   const totalLikes = myStories.reduce((acc, s) => acc + s.total_likes, 0)
 
@@ -56,8 +57,7 @@
 
       {/* Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
         {[
           { icon: <BookOpen size={20} className="text-indigo-300" />, label: 'Total Stories', value: myStories.length, sub: `${published.length} published`, color: 'bg-indigo-500/20' },
-          { icon: <Eye size={20} className="text-blue-300" />, label: 'Total Views', value: totalViews.toLocaleString(), sub: 'All time', color: 'bg-blue-500/20' },
           { icon: <Heart size={20} className="text-rose-300" />, label: 'Total Likes', value: totalLikes.toLocaleString(), sub: 'Across all stories', color: 'bg-rose-500/20' },
           { icon: <TrendingUp size={20} className="text-emerald-300" />, label: 'Drafts', value: drafts.length, sub: 'In progress', color: 'bg-emerald-500/20' },
@@ -108,5 +108,4 @@
                       <div className="flex items-center gap-3 text-slate-500 text-xs">
                         {isCollab && <span className="text-slate-500">by {story.author_username}</span>}
-                        <span className="flex items-center gap-1"><Eye size={11} /> {story.total_views.toLocaleString()}</span>
                         <span className="flex items-center gap-1"><Heart size={11} /> {story.total_likes}</span>
                         <span className="flex items-center gap-1"><MessageCircle size={11} /> {story.total_comments}</span>
@@ -155,7 +154,6 @@
             <TrendingUp size={18} className="text-indigo-400" />
             <h2 className="font-serif text-xl font-bold text-white">Analytics</h2>
-            <span className="text-slate-500 text-sm">(Story: The Chronicles of Eldoria)</span>
           </div>
-          <StoryAnalytics />
+          <StoryAnalytics stories={myStories} />
         </div>
       )}