diff --git a/resources/js/components/BlogPopular.vue b/resources/js/components/BlogPopular.vue
index c8ad892..3a72df4 100644
--- a/resources/js/components/BlogPopular.vue
+++ b/resources/js/components/BlogPopular.vue
@@ -2,7 +2,7 @@
     <section class="blog-popular">
         <h3>Popular content</h3>
         <ul class="popular-items">
-            <li v-for="article of articles" :key="article.id">
+            <li v-for="article of articles" :key="article.id" @click="onClick(article)">
                 <span class="arrow">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -19,7 +19,7 @@
                         <polyline points="12 5 19 12 12 19"></polyline>
                     </svg>
                 </span>
-                <a class="link" href="#">
+                <a class="link" href="javascript:void(0)">
                     {{ article.title }}
                 </a>
             </li>
@@ -50,5 +50,17 @@ export default {
             this.error = ex.message;
         });
     },
+    methods: {
+        onClick(article) {
+            const date = moment(article.date);
+            const year = date.year();
+            const month = date.month() + 1;
+            const day = date.date();
+            const id = article.id;
+            const slug = article.slug;
+
+            this.$router.push({ name: 'blog-article', params: { year, month, day, id, slug }});
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/BlogRecent.vue b/resources/js/components/BlogRecent.vue
index c0855ab..371233f 100644
--- a/resources/js/components/BlogRecent.vue
+++ b/resources/js/components/BlogRecent.vue
@@ -3,7 +3,7 @@
         <div class="header">
             <h3>Latest Articles</h3>
             <div class="all-articles">
-                <a href="javascript:void(0)">All articles</a>
+                <router-link :to="{ name: 'blog' }">All articles</router-link>
             </div>
         </div>
         <div class="list">