diff --git a/pages/blog/blog.html b/pages/blog/blog.html
index 52106a4..8b715fe 100644
--- a/pages/blog/blog.html
+++ b/pages/blog/blog.html
@@ -5,4 +5,6 @@
 
 <br>
 <p>articles:</p>
-<a href="#" onclick="blogVisitArticle('Welcome', 'a welcome article for my website')">welcome</a>
\ No newline at end of file
+<div id="articlelist">
+
+</div>
\ No newline at end of file
diff --git a/res/blog.js b/res/blog.js
index ac2f2c3..24d04c3 100644
--- a/res/blog.js
+++ b/res/blog.js
@@ -1,4 +1,22 @@
+const blogArticles = {
+    'Welcome': 'a welcome page for my new blog'
+}
+
+const blogPopulateArticleList = (elementId) => {
+    const element = A(`#${elementId}`);
+    console.log(element);
+
+    let html = '';
+    for (const [k, v] of Object.entries(blogArticles)) {
+        html += `<a href="#" onclick="blogVisitArticle('${k}', '${v}')">${k}</a>`;
+        console.log(html);
+    }
+
+    element.html(html);
+};
+
 const blogVisitArticle = async (name, desc) => {
+    if (!name || !desc) return;
     if (/[^a-zA-Z0-9\.]/.test(name)) {
         alert('Tried to access and invalid article (invalid name)');
         console.error('Tried to access and invalid article (invalid name)');
@@ -16,4 +34,5 @@ const blogVisitArticle = async (name, desc) => {
     // TODO: The output markdown is not sanitized. This is not really 100000% urgent, since I am the one that is uploading the aricles, but this still may pose a threat.
     A('#content-container').html(marked(articleMarkdown));
     A('meta[name="description"]').attr('content', desc);
+    history.pushState({ route: `/article/${name}`, articleName: name }, '', `/article/${name}`);
 }
\ No newline at end of file
diff --git a/res/index.js b/res/index.js
index 3b52a0d..1b1960e 100644
--- a/res/index.js
+++ b/res/index.js
@@ -11,6 +11,11 @@ const stripTrailingSlash = (str) => {
     return str.endsWith('/') ? str.slice(0, -1) : str;
 };
 
+const loadBlogScripts = async () => {
+    await loadScript('https://cdn.jsdelivr.net/npm/marked/marked.min.js');
+    await loadScript('/res/blog.js');
+}
+
 const peformRouteAction = async (pathname) => {
     const route = stripTrailingSlash(pathname);
 
@@ -21,9 +26,9 @@ const peformRouteAction = async (pathname) => {
         }
         case '/blog': {
             A('meta[name="description"]').attr('content', "hippoz's blog");
-            await loadScript('https://cdn.jsdelivr.net/npm/marked/marked.min.js');
-            await loadScript('/res/blog.js');
-            A('#content-container').load('/pages/blog/blog.html');
+            await loadBlogScripts();
+            await A('#content-container').load('/pages/blog/blog.html');
+            blogPopulateArticleList('articlelist');
             break;
         }
         case '/upload': {
@@ -63,6 +68,19 @@ const buttonMap = {
     '__NOT_FOUND': '/404'
 }
 
+const dynamicRoutesActions = {
+    '/article': async (arg) => {
+        await loadBlogScripts();
+
+        const desc = blogArticles[arg];
+        if (!desc) {
+            peformRouteAction('/404');
+            return;
+        }
+        blogVisitArticle(arg, desc);
+    }
+};
+
 const onButtonClick = (buttonId) => {
     if (selectedButtonId === buttonId) {
         return;
@@ -96,6 +114,15 @@ const updateFromCurrentPathname = () => {
         pathname = '/';
     }
 
+    for (const [route, action] of Object.entries(dynamicRoutesActions)) {
+        if (pathname.startsWith(route)) {
+            const arg = stripTrailingSlash(pathname).split('/')[1];
+            console.log(arg);
+            action(arg);
+            break;
+        }
+    }
+
     const buttonId = getButtonFromPathname(pathname);
     changeSelected(buttonId);
     peformRouteAction(pathname);