diff --git a/server/src/main/kotlin/ir/armor/tachidesk/Main.kt b/server/src/main/kotlin/ir/armor/tachidesk/Main.kt
index 65cb55b..b1b1d38 100644
--- a/server/src/main/kotlin/ir/armor/tachidesk/Main.kt
+++ b/server/src/main/kotlin/ir/armor/tachidesk/Main.kt
@@ -81,9 +81,10 @@ class Main {
                 ctx.json(getChapterList(mangaId))
             }
 
-            app.get("/api/v1/chapter/:chapterId") { ctx ->
+            app.get("/api/v1/manga/:mangaId/chapter/:chapterId") { ctx ->
                 val chapterId = ctx.pathParam("chapterId").toInt()
-                ctx.json(getPages(chapterId))
+                val mangaId = ctx.pathParam("mangaId").toInt()
+                ctx.json(getPages(chapterId,mangaId))
             }
         }
 
diff --git a/server/src/main/kotlin/ir/armor/tachidesk/util/Chapter.kt b/server/src/main/kotlin/ir/armor/tachidesk/util/Chapter.kt
index ce307ec..cd0414b 100644
--- a/server/src/main/kotlin/ir/armor/tachidesk/util/Chapter.kt
+++ b/server/src/main/kotlin/ir/armor/tachidesk/util/Chapter.kt
@@ -56,10 +56,10 @@ fun getChapterList(mangaId: Int): List<ChapterDataClass> {
     }
 }
 
-fun getPages(chapterId: Int): List<PageDataClass> {
+fun getPages(chapterId: Int, mangaId: Int): List<PageDataClass> {
     return transaction {
         val chapterEntry = ChapterTable.select { ChapterTable.id eq chapterId }.firstOrNull()!!
-        val mangaId = chapterEntry[ChapterTable.manga].value
+        assert(mangaId == chapterEntry[ChapterTable.manga].value) // sanity check
         val mangaEntry = MangaTable.select { MangaTable.id eq mangaId }.firstOrNull()!!
         val source = getHttpSource(mangaEntry[MangaTable.sourceReference].value)
 
diff --git a/webUI/react/src/App.tsx b/webUI/react/src/App.tsx
index d618f5a..040f420 100644
--- a/webUI/react/src/App.tsx
+++ b/webUI/react/src/App.tsx
@@ -8,6 +8,7 @@ import Sources from './screens/Sources';
 import Extensions from './screens/Extensions';
 import MangaList from './screens/MangaList';
 import Manga from './screens/Manga';
+import Reader from './screens/Reader';
 
 export default function App() {
     return (
@@ -27,6 +28,9 @@ export default function App() {
                 <Route path="/sources">
                     <Sources />
                 </Route>
+                <Route path="/manga/:mangaId/chapter/:chapterId">
+                    <Reader />
+                </Route>
                 <Route path="/manga/:id">
                     <Manga />
                 </Route>
diff --git a/webUI/react/src/components/ChapterCard.tsx b/webUI/react/src/components/ChapterCard.tsx
index be3b05f..be532bf 100644
--- a/webUI/react/src/components/ChapterCard.tsx
+++ b/webUI/react/src/components/ChapterCard.tsx
@@ -60,7 +60,7 @@ export default function ChapterCard(props: IProps) {
                             </div>
                         </div>
                         <div style={{ display: 'flex' }}>
-                            <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `http://127.0.0.1:4567/api/v1/chapter/${chapter.id}`; }}>open</Button>
+                            <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/manga/${chapter.mangaId}/chapter/${chapter.id}`; }}>open</Button>
                         </div>
                     </CardContent>
                 </Card>
diff --git a/webUI/react/src/screens/Reader.tsx b/webUI/react/src/screens/Reader.tsx
new file mode 100644
index 0000000..1a4b3b4
--- /dev/null
+++ b/webUI/react/src/screens/Reader.tsx
@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+const style = {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    margin: '0 auto',
+    backgroundColor: '#343a40',
+} as React.CSSProperties;
+
+interface IPage {
+    index: number
+    imageUrl: string
+}
+
+export default function Reader() {
+    const [pages, setPages] = useState<IPage[]>([]);
+    const { chapterId, mangaId } = useParams<{chapterId: string, mangaId: string}>();
+
+    useEffect(() => {
+        fetch(`http://127.0.0.1:4567/api/v1/manga/${mangaId}/chapter/${chapterId}`)
+            .then((response) => response.json())
+            .then((data) => setPages(data));
+    }, []);
+
+    pages.sort((a, b) => (a.index - b.index));
+
+    let mapped;
+    if (pages.length === 0) {
+        mapped = <h3>wait</h3>;
+    } else {
+        mapped = pages.map(({ imageUrl }) => (
+            <div style={{ margin: '0 auto' }}>
+                <img src={imageUrl} alt="f" style={{ maxWidth: '100%' }} />
+            </div>
+        ));
+    }
+
+    return (
+        <div style={style}>
+            {mapped}
+        </div>
+    );
+}