diff --git a/server/src/main/kotlin/ir/armor/tachidesk/database/dataclass/SourceDataClass.kt b/server/src/main/kotlin/ir/armor/tachidesk/database/dataclass/SourceDataClass.kt
index bcf1691..96f7ff9 100644
--- a/server/src/main/kotlin/ir/armor/tachidesk/database/dataclass/SourceDataClass.kt
+++ b/server/src/main/kotlin/ir/armor/tachidesk/database/dataclass/SourceDataClass.kt
@@ -1,7 +1,7 @@
 package ir.armor.tachidesk.database.dataclass
 
 data class SourceDataClass(
-        val id: Long,
+        val id: String,
         val name: String,
         val lang: String,
         val iconUrl: String,
diff --git a/server/src/main/kotlin/ir/armor/tachidesk/database/table/ExtensionTable.kt b/server/src/main/kotlin/ir/armor/tachidesk/database/table/ExtensionTable.kt
index e7e9cd1..f37d323 100644
--- a/server/src/main/kotlin/ir/armor/tachidesk/database/table/ExtensionTable.kt
+++ b/server/src/main/kotlin/ir/armor/tachidesk/database/table/ExtensionTable.kt
@@ -8,7 +8,7 @@ object ExtensionsTable : IntIdTable() {
     val pkgName = varchar("pkg_name", 128)
     val versionName = varchar("version_name", 16)
     val versionCode = integer("version_code")
-    val lang = varchar("lang", 5)
+    val lang = varchar("lang", 10)
     val isNsfw = bool("is_nsfw")
     val apkName = varchar("apk_name", 1024)
     val iconUrl = varchar("icon_url", 2048)
diff --git a/server/src/main/kotlin/ir/armor/tachidesk/database/table/SourcesTable.kt b/server/src/main/kotlin/ir/armor/tachidesk/database/table/SourcesTable.kt
index e316004..f0b7182 100644
--- a/server/src/main/kotlin/ir/armor/tachidesk/database/table/SourcesTable.kt
+++ b/server/src/main/kotlin/ir/armor/tachidesk/database/table/SourcesTable.kt
@@ -5,7 +5,7 @@ import org.jetbrains.exposed.dao.id.IdTable
 object SourcesTable : IdTable<Long>() {
     override val id = long("id").entityId()
     val name= varchar("name", 128)
-    val lang = varchar("lang", 5)
+    val lang = varchar("lang", 10)
     val extension = reference("extension", ExtensionsTable)
     val partOfFactorySource = bool("part_of_factory_source").default(false)
     val positionInFactorySource = integer("position_in_factory_source").nullable()
diff --git a/server/src/main/kotlin/ir/armor/tachidesk/util/SourceList.kt b/server/src/main/kotlin/ir/armor/tachidesk/util/SourceList.kt
index d5c34bc..15ea359 100644
--- a/server/src/main/kotlin/ir/armor/tachidesk/util/SourceList.kt
+++ b/server/src/main/kotlin/ir/armor/tachidesk/util/SourceList.kt
@@ -73,7 +73,7 @@ fun getSourceList(): List<SourceDataClass> {
     return transaction {
         return@transaction SourcesTable.selectAll().map {
             SourceDataClass(
-                    it[SourcesTable.id].value,
+                    it[SourcesTable.id].value.toString(),
                     it[SourcesTable.name],
                     Locale(it[SourcesTable.lang]).getDisplayLanguage(Locale(it[SourcesTable.lang])),
                     ExtensionsTable.select { ExtensionsTable.id eq it[SourcesTable.extension] }.first()[ExtensionsTable.iconUrl],
diff --git a/webUI/react/src/App.tsx b/webUI/react/src/App.tsx
index 6dab408..39e780e 100644
--- a/webUI/react/src/App.tsx
+++ b/webUI/react/src/App.tsx
@@ -3,6 +3,7 @@ import {
     BrowserRouter as Router,
     Switch,
     Route,
+    useParams,
 } from 'react-router-dom';
 import Button from '@material-ui/core/Button';
 import NavBar from './components/NavBar';
@@ -11,14 +12,15 @@ import SourceCard from './components/SourceCard';
 import MangaCard from './components/MangaCard';
 
 function MangaPage() {
+    const { sourceId } = useParams<{sourceId: string}>();
     let mapped;
     const [mangas, setMangas] = useState<IManga[]>([]);
 
     useEffect(() => {
-        fetch('https://picsum.photos/v2/list')
+        fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/popular`)
             .then((response) => response.json())
-            .then((data: { author: string, download_url: string }[]) => setMangas(
-                data.map((it) => ({ name: it.author, imageUrl: it.download_url })),
+            .then((data: { title: string, thumbnail_url: string }[]) => setMangas(
+                data.map((it) => ({ title: it.title, thumbnailUrl: it.thumbnail_url })),
             ));
     });
 
@@ -84,12 +86,13 @@ export default function App() {
             <NavBar />
 
             <Switch>
-                <Route path="/mangapage">
-                    <MangaPage />
-                </Route>
                 <Route path="/extensions">
                     <Extensions />
                 </Route>
+                {/* eslint-disable-next-line react/no-children-prop */}
+                <Route path="/sources/:sourceId/popular">
+                    <MangaPage />
+                </Route>
                 <Route path="/sources">
                     <Sources />
                 </Route>
diff --git a/webUI/react/src/components/MangaCard.tsx b/webUI/react/src/components/MangaCard.tsx
index 5ece2bc..1695ef4 100644
--- a/webUI/react/src/components/MangaCard.tsx
+++ b/webUI/react/src/components/MangaCard.tsx
@@ -41,7 +41,7 @@ interface IProps {
 export default function MangaCard(props: IProps) {
     const {
         manga: {
-            name, imageUrl,
+            title, thumbnailUrl,
         },
     } = props;
     const classes = useStyles();
@@ -53,12 +53,12 @@ export default function MangaCard(props: IProps) {
                     <CardMedia
                         className={classes.image}
                         component="img"
-                        alt="Nagatoro"
-                        image={imageUrl}
-                        title="Nagatoro"
+                        alt={title}
+                        image={thumbnailUrl}
+                        title={title}
                     />
                     <div className={classes.gradient} />
-                    <Typography className={classes.title} variant="h5" component="h2">{name}</Typography>
+                    <Typography className={classes.title} variant="h5" component="h2">{title}</Typography>
                 </div>
             </CardActionArea>
         </Card>
diff --git a/webUI/react/src/components/SourceCard.tsx b/webUI/react/src/components/SourceCard.tsx
index a90a29b..530d1e2 100644
--- a/webUI/react/src/components/SourceCard.tsx
+++ b/webUI/react/src/components/SourceCard.tsx
@@ -39,7 +39,7 @@ interface IProps {
 export default function SourceCard(props: IProps) {
     const {
         source: {
-            name, lang, iconUrl, supportsLatest,
+            id, name, lang, iconUrl, supportsLatest,
         },
     } = props;
 
@@ -66,7 +66,7 @@ export default function SourceCard(props: IProps) {
                 </div>
                 <div style={{ display: 'flex' }}>
                     {supportsLatest && <Button variant="outlined">Latest</Button>}
-                    <Button variant="outlined" style={{ marginLeft: 20 }}>Browse</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/typings.d.ts b/webUI/react/src/typings.d.ts
index 3239358..beb0074 100644
--- a/webUI/react/src/typings.d.ts
+++ b/webUI/react/src/typings.d.ts
@@ -8,14 +8,15 @@ interface IExtension {
 }
 
 interface ISource {
-    id: number
+    id: string
     name: string
     lang: string
     iconUrl: string
     supportsLatest: boolean
+    history: any
 }
 
 interface IManga {
-    name: string
-    imageUrl: string
+    title: string
+    thumbnailUrl: string
 }