diff --git a/webUI/react/src/App.tsx b/webUI/react/src/App.tsx
index 760957fb..1680c2d5 100644
--- a/webUI/react/src/App.tsx
+++ b/webUI/react/src/App.tsx
@@ -7,6 +7,7 @@ import {
 import Button from '@material-ui/core/Button';
 import NavBar from './components/NavBar';
 import ExtensionCard from './components/ExtensionCard';
+import SourceCard from './components/SourceCard';
 
 function Extensions() {
     let mapped;
@@ -24,6 +25,22 @@ function Extensions() {
     return <h2>{mapped}</h2>;
 }
 
+function Sources() {
+    let mapped;
+    const [sources, setSources] = useState<ISource[]>([]);
+
+    if (sources.length === 0) {
+        mapped = <h3>wait</h3>;
+        fetch('http://127.0.0.1:4567/api/v1/sources')
+            .then((response) => response.json())
+            .then((data) => setSources(data));
+    } else {
+        mapped = sources.map((it) => <SourceCard source={it} />);
+    }
+
+    return <h2>{mapped}</h2>;
+}
+
 function Home() {
     return (
         <Button variant="contained" color="primary">
@@ -32,10 +49,6 @@ function Home() {
     );
 }
 
-function Users() {
-    return <h2>Users</h2>;
-}
-
 export default function App() {
     return (
         <Router>
@@ -46,8 +59,8 @@ export default function App() {
                 <Route path="/extensions">
                     <Extensions />
                 </Route>
-                <Route path="/users">
-                    <Users />
+                <Route path="/sources">
+                    <Sources />
                 </Route>
                 <Route path="/">
                     <Home />
diff --git a/webUI/react/src/components/SourceCard.tsx b/webUI/react/src/components/SourceCard.tsx
new file mode 100644
index 00000000..c889685f
--- /dev/null
+++ b/webUI/react/src/components/SourceCard.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Button from '@material-ui/core/Button';
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 16,
+    },
+    bullet: {
+        display: 'inline-block',
+        margin: '0 2px',
+        transform: 'scale(0.8)',
+    },
+    title: {
+        fontSize: 14,
+    },
+    pos: {
+        marginBottom: 12,
+    },
+    icon: {
+        width: theme.spacing(7),
+        height: theme.spacing(7),
+        flex: '0 0 auto',
+        marginRight: 16,
+    },
+}));
+
+interface IProps {
+    source: ISource
+}
+
+export default function SourceCard(props: IProps) {
+    const {
+        source: {
+            name, lang, iconUrl, supportsLatest,
+        },
+    } = props;
+
+    const classes = useStyles();
+    const langPress = lang === 'all' ? 'All' : lang.toUpperCase();
+
+    return (
+        <Card>
+            <CardContent className={classes.root}>
+                <div style={{ display: 'flex' }}>
+                    <Avatar
+                        variant="rounded"
+                        className={classes.icon}
+                        alt={name}
+                        src={iconUrl}
+                    />
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        <Typography variant="h5" component="h2">
+                            {name}
+                        </Typography>
+                        <Typography variant="caption" display="block" gutterBottom>
+                            {langPress}
+                        </Typography>
+                    </div>
+                </div>
+                <div style={{ display: 'flex' }}>
+                    {supportsLatest && <Button variant="outlined">Latest</Button>}
+                    <Button variant="outlined" style={{ marginLeft: 20 }}>Browse</Button>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
diff --git a/webUI/react/src/components/TemporaryDrawer.tsx b/webUI/react/src/components/TemporaryDrawer.tsx
index 443f69f7..9a1e4d0f 100644
--- a/webUI/react/src/components/TemporaryDrawer.tsx
+++ b/webUI/react/src/components/TemporaryDrawer.tsx
@@ -16,6 +16,7 @@ const useStyles = makeStyles({
 
 interface IProps {
     drawerOpen: boolean
+
     setDrawerOpen(state: boolean): void
 }
 
@@ -39,6 +40,14 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
                         <ListItemText primary="Extensions" />
                     </ListItem>
                 </Link>
+                <Link to="/sources" style={{ color: 'inherit', textDecoration: 'none' }}>
+                    <ListItem button key="Sources">
+                        <ListItemIcon>
+                            <InboxIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Sources" />
+                    </ListItem>
+                </Link>
             </List>
         </div>
     );
diff --git a/webUI/react/src/typings.d.ts b/webUI/react/src/typings.d.ts
index 1a21c32e..9e0b07bc 100644
--- a/webUI/react/src/typings.d.ts
+++ b/webUI/react/src/typings.d.ts
@@ -6,3 +6,11 @@ interface IExtension {
     installed: boolean
     apkName: string
 }
+
+interface ISource {
+    id: number
+    name: string
+    lang: string
+    iconUrl: string
+    supportsLatest: boolean
+}