diff --git a/server/src/main/kotlin/ir/armor/tachidesk/Main.kt b/server/src/main/kotlin/ir/armor/tachidesk/Main.kt
index 95d002c..bf8d476 100644
--- a/server/src/main/kotlin/ir/armor/tachidesk/Main.kt
+++ b/server/src/main/kotlin/ir/armor/tachidesk/Main.kt
@@ -62,13 +62,15 @@ class Main {
                 ctx.json(getSourceList())
             }
 
-            app.get("/api/v1/source/:source_id/popular") { ctx ->
+            app.get("/api/v1/source/:source_id/popular/:pageNum") { ctx ->
                 val sourceId = ctx.pathParam("source_id")
-                ctx.json(getPopularManga(sourceId))
+                val pageNum = ctx.pathParam("pageNum").toInt()
+                ctx.json(getPopularManga(sourceId,pageNum))
             }
-            app.get("/api/v1/source/:source_id/latest") { ctx ->
+            app.get("/api/v1/source/:source_id/latest/:pageNum") { ctx ->
                 val sourceId = ctx.pathParam("source_id")
-                ctx.json(getLatestManga(sourceId))
+                val pageNum = ctx.pathParam("pageNum").toInt()
+                ctx.json(getLatestManga(sourceId,pageNum))
             }
         }
 
diff --git a/server/src/main/kotlin/ir/armor/tachidesk/util/MangaList.kt b/server/src/main/kotlin/ir/armor/tachidesk/util/MangaList.kt
index 37e485c..935377a 100644
--- a/server/src/main/kotlin/ir/armor/tachidesk/util/MangaList.kt
+++ b/server/src/main/kotlin/ir/armor/tachidesk/util/MangaList.kt
@@ -3,8 +3,8 @@ package ir.armor.tachidesk.util
 import ir.armor.tachidesk.database.dataclass.MangaDataClass
 import ir.armor.tachidesk.database.table.MangaStatus
 
-fun getPopularManga(sourceId: String): List<MangaDataClass> {
-    val manguasPage = getHttpSource(sourceId.toLong()).fetchPopularManga(1).toBlocking().first()
+fun getPopularManga(sourceId: String, pageNum: Int = 1): List<MangaDataClass> {
+    val manguasPage = getHttpSource(sourceId.toLong()).fetchPopularManga(pageNum).toBlocking().first()
     return manguasPage.mangas.map {
         MangaDataClass(
                 sourceId.toLong(),
@@ -24,8 +24,8 @@ fun getPopularManga(sourceId: String): List<MangaDataClass> {
     }
 }
 
-fun getLatestManga(sourceId: String): List<MangaDataClass> {
-    val manguasPage = getHttpSource(sourceId.toLong()).fetchLatestUpdates(1).toBlocking().first()
+fun getLatestManga(sourceId: String, pageNum: Int = 1): List<MangaDataClass> {
+    val manguasPage = getHttpSource(sourceId.toLong()).fetchLatestUpdates(pageNum).toBlocking().first()
     return manguasPage.mangas.map {
         MangaDataClass(
                 sourceId.toLong(),
diff --git a/webUI/react/src/App.tsx b/webUI/react/src/App.tsx
index 87d98b2..99b98f8 100644
--- a/webUI/react/src/App.tsx
+++ b/webUI/react/src/App.tsx
@@ -6,7 +6,7 @@ import NavBar from './components/NavBar';
 import Home from './screens/Home';
 import Sources from './screens/Sources';
 import Extensions from './screens/Extensions';
-import MangaList from './screens/PopularManga';
+import MangaList from './screens/MangaList';
 
 export default function App() {
     return (
@@ -17,10 +17,10 @@ export default function App() {
                 <Route path="/extensions">
                     <Extensions />
                 </Route>
-                <Route path="/sources/:sourceId/popular">
+                <Route path="/sources/:sourceId/popular/">
                     <MangaList popular />
                 </Route>
-                <Route path="/sources/:sourceId/latest">
+                <Route path="/sources/:sourceId/latest/">
                     <MangaList popular={false} />
                 </Route>
                 <Route path="/sources">
diff --git a/webUI/react/src/components/SourceCard.tsx b/webUI/react/src/components/SourceCard.tsx
index 60aacb6..cc534e7 100644
--- a/webUI/react/src/components/SourceCard.tsx
+++ b/webUI/react/src/components/SourceCard.tsx
@@ -65,8 +65,8 @@ export default function SourceCard(props: IProps) {
                     </div>
                 </div>
                 <div style={{ display: 'flex' }}>
-                    {supportsLatest && <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `sources/${id}/latest`; }}>Latest</Button>}
-                    <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `sources/${id}/popular`; }}>Browse</Button>
+                    {supportsLatest && <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `sources/${id}/latest/`; }}>Latest</Button>}
+                    <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `sources/${id}/popular/`; }}>Browse</Button>
                 </div>
             </CardContent>
         </Card>
diff --git a/webUI/react/src/screens/PopularManga.tsx b/webUI/react/src/screens/MangaList.tsx
similarity index 93%
rename from webUI/react/src/screens/PopularManga.tsx
rename to webUI/react/src/screens/MangaList.tsx
index fa311e9..720ed1e 100644
--- a/webUI/react/src/screens/PopularManga.tsx
+++ b/webUI/react/src/screens/MangaList.tsx
@@ -11,10 +11,11 @@ export default function MangaList(props: { popular: boolean }) {
     const { sourceId } = useParams<{sourceId: string}>();
     let mapped;
     const [mangas, setMangas] = useState<IManga[]>([]);
+    const [lastPageNum] = useState<number>(1);
 
     useEffect(() => {
         const sourceType = props.popular ? 'popular' : 'latest';
-        fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/${sourceType}`)
+        fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/${sourceType}/${lastPageNum}`)
             .then((response) => response.json())
             .then((data: { title: string, thumbnail_url: string }[]) => setMangas(
                 data.map((it) => ({ title: it.title, thumbnailUrl: it.thumbnail_url })),