Index: chapterx-frontend/src/pages/profile/ProfilePage.tsx
===================================================================
--- chapterx-frontend/src/pages/profile/ProfilePage.tsx	(revision 99c1e45f4ac45a164229bc6f60f3b05bc26df047)
+++ chapterx-frontend/src/pages/profile/ProfilePage.tsx	(revision a8f4a2de5e875427a864aef1aa2ca9b7905549cc)
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { BookOpen, Heart, Calendar, MessageCircle } from 'lucide-react'
+import { BookOpen, Heart, Calendar, MessageCircle, Eye } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useStoryStore } from '../../store/storyStore'
@@ -76,4 +76,5 @@
   const totalLikes = userStories.reduce((acc, s) => acc + s.total_likes, 0)
   const totalComments = userStories.reduce((acc, s) => acc + s.total_comments, 0)
+  const totalViews = userStories.reduce((acc, s) => acc + s.total_views, 0)
   const allGenres = [...new Set(userStories.flatMap(s => s.genres))]
 
@@ -120,9 +121,10 @@
 
       {/* Stats */}
-      <div className="grid grid-cols-3 gap-4 mb-8">
+      <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: <MessageCircle size={16} className="text-amber-400" />, value: totalComments, label: 'Comments' },
+          { icon: <Eye size={16} className="text-cyan-400" />, value: totalViews.toLocaleString(), label: 'Views' },
         ].map(s => (
           <div key={s.label} className="bg-slate-800 border border-slate-700 rounded-xl p-4 text-center">
Index: chapterx-frontend/src/pages/story/ChapterReadPage.tsx
===================================================================
--- chapterx-frontend/src/pages/story/ChapterReadPage.tsx	(revision 99c1e45f4ac45a164229bc6f60f3b05bc26df047)
+++ chapterx-frontend/src/pages/story/ChapterReadPage.tsx	(revision a8f4a2de5e875427a864aef1aa2ca9b7905549cc)
@@ -1,7 +1,26 @@
 import React, { useEffect, useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, ArrowRight, BookOpen, Eye, ChevronLeft, ChevronRight } from 'lucide-react'
+import { ArrowLeft, ChevronLeft, ChevronRight } from 'lucide-react'
+import axios from 'axios'
 import { useStoryStore } from '../../store/storyStore'
+import { Chapter } from '../../types'
 import { Button } from '../../components/ui/Button'
+
+const API = 'https://localhost:7125/api'
+
+function mapChapter(c: any): Chapter {
+  return {
+    chapter_id: c.id ?? c.chapter_id,
+    story_id: c.storyId ?? c.story_id,
+    title: c.title ?? c.name ?? '',
+    content: c.content ?? '',
+    chapter_number: c.number ?? c.chapter_number ?? 0,
+    word_count: c.wordCount ?? c.word_count ?? 0,
+    view_count: c.viewCount ?? c.view_count ?? 0,
+    is_published: true,
+    created_at: c.createdAt ?? c.created_at ?? '',
+    updated_at: c.updatedAt ?? c.updated_at ?? '',
+  }
+}
 
 export const ChapterReadPage: React.FC = () => {
@@ -11,7 +30,24 @@
   const [scrollProgress, setScrollProgress] = useState(0)
   const [viewed, setViewed] = useState(false)
+  const [chapter, setChapter] = useState<Chapter | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    setViewed(false)
+    setScrollProgress(0)
+    axios.get(`${API}/chapters/${chapterId}`)
+      .then(res => {
+        const data = res.data?.chapter ?? res.data
+        setChapter(mapChapter(data))
+      })
+      .catch(() => {
+        const fallback = chapters.find(c => c.chapter_id === Number(chapterId))
+        if (fallback) setChapter(fallback)
+      })
+      .finally(() => setLoading(false))
+  }, [chapterId])
 
   const story = stories.find(s => s.story_id === Number(storyId))
-  const chapter = chapters.find(c => c.chapter_id === Number(chapterId))
   const storyChapters = chapters
     .filter(c => c.story_id === Number(storyId) && c.is_published)
@@ -37,4 +73,12 @@
     return () => window.removeEventListener('scroll', handler)
   }, [chapter, viewed, incrementViewCount])
+
+  if (loading) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-20 text-center">
+        <p className="text-slate-400">Loading chapter...</p>
+      </div>
+    )
+  }
 
   if (!story || !chapter) {
@@ -73,8 +117,5 @@
           </div>
 
-          <div className="flex items-center gap-1 text-slate-400 text-xs">
-            <Eye size={12} />
-            {scrollProgress.toFixed(0)}%
-          </div>
+          <div />
         </div>
       </div>
@@ -90,14 +131,4 @@
             {chapter.title}
           </h1>
-          <div className="flex items-center justify-center gap-4 text-slate-500 text-sm">
-            <span className="flex items-center gap-1">
-              <BookOpen size={13} />
-              {chapter.word_count.toLocaleString()} words
-            </span>
-            <span className="flex items-center gap-1">
-              <Eye size={13} />
-              {chapter.view_count.toLocaleString()} reads
-            </span>
-          </div>
           <div className="mt-4 w-16 h-px bg-gradient-to-r from-transparent via-indigo-500 to-transparent mx-auto" />
         </div>
Index: chapterx-frontend/src/pages/story/StoryDetailPage.tsx
===================================================================
--- chapterx-frontend/src/pages/story/StoryDetailPage.tsx	(revision 99c1e45f4ac45a164229bc6f60f3b05bc26df047)
+++ chapterx-frontend/src/pages/story/StoryDetailPage.tsx	(revision a8f4a2de5e875427a864aef1aa2ca9b7905549cc)
@@ -217,4 +217,8 @@
                 <span className="text-slate-400">Comments</span>
                 <span className="text-white">{liveComments ?? story.total_comments}</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/WriterDashboard.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/WriterDashboard.tsx	(revision 99c1e45f4ac45a164229bc6f60f3b05bc26df047)
+++ chapterx-frontend/src/pages/writer/WriterDashboard.tsx	(revision a8f4a2de5e875427a864aef1aa2ca9b7905549cc)
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Plus, BookOpen, Heart, MessageCircle, TrendingUp, Bell } from 'lucide-react'
+import { Plus, BookOpen, Heart, MessageCircle, TrendingUp, Bell, Eye } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useStoryStore } from '../../store/storyStore'
@@ -37,4 +37,5 @@
   const drafts = myStories.filter(s => s.status === 'draft')
   const totalLikes = myStories.reduce((acc, s) => acc + s.total_likes, 0)
+  const totalViews = myStories.reduce((acc, s) => acc + s.total_views, 0)
 
   const recentNotifs = notifications.slice(0, 5)
@@ -57,8 +58,9 @@
 
       {/* Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+      <div className="grid grid-cols-2 lg:grid-cols-4 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: <Heart size={20} className="text-rose-300" />, label: 'Total Likes', value: totalLikes.toLocaleString(), sub: 'Across all stories', color: 'bg-rose-500/20' },
+          { icon: <Eye size={20} className="text-cyan-300" />, label: 'Total Views', value: totalViews.toLocaleString(), sub: 'Chapter reads', color: 'bg-cyan-500/20' },
           { icon: <TrendingUp size={20} className="text-emerald-300" />, label: 'Drafts', value: drafts.length, sub: 'In progress', color: 'bg-emerald-500/20' },
         ].map(s => (
@@ -110,4 +112,5 @@
                         <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>
+                        <span className="flex items-center gap-1"><Eye size={11} /> {story.total_views.toLocaleString()}</span>
                         <span>{story.total_chapters} chapters</span>
                       </div>