diff --git a/resources/js/components/BlogRecent.vue b/resources/js/components/BlogRecent.vue
index 25bde51..f4644cf 100644
--- a/resources/js/components/BlogRecent.vue
+++ b/resources/js/components/BlogRecent.vue
@@ -8,7 +8,7 @@
         </div>
         <div class="list">
             <ul class="blog-items">
-                <li class="blog-item">
+                <li class="blog-item" v-for="article of articles" :key="article.id">
                     <img
                         class="article-image"
                         src="//via.placeholder.com/128"
@@ -16,129 +16,46 @@
                     />
                     <div class="article-text">
                         <h4 class="article-title">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing.
+                            {{ article.title }}
                         </h4>
-                        <span class="article-date">March 8, 2021</span>
-                    </div>
-                </li>
-                <li class="blog-item">
-                    <img
-                        class="article-image"
-                        src="//via.placeholder.com/128"
-                        alt="Article Topic"
-                    />
-                    <div class="article-text">
-                        <h4 class="article-title">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing.
-                        </h4>
-                        <span class="article-date">March 8, 2021</span>
-                    </div>
-                </li>
-                <li class="blog-item">
-                    <img
-                        class="article-image"
-                        src="//via.placeholder.com/128"
-                        alt="Article Topic"
-                    />
-                    <div class="article-text">
-                        <h4 class="article-title">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing.
-                        </h4>
-                        <span class="article-date">March 8, 2021</span>
-                    </div>
-                </li>
-                <li class="blog-item">
-                    <img
-                        class="article-image"
-                        src="//via.placeholder.com/128"
-                        alt="Article Topic"
-                    />
-                    <div class="article-text">
-                        <h4 class="article-title">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing.
-                        </h4>
-                        <span class="article-date">March 8, 2021</span>
-                    </div>
-                </li>
-                <li class="blog-item">
-                    <img
-                        class="article-image"
-                        src="//via.placeholder.com/128"
-                        alt="Article Topic"
-                    />
-                    <div class="article-text">
-                        <h4 class="article-title">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing.
-                        </h4>
-                        <span class="article-date">March 8, 2021</span>
-                    </div>
-                </li>
-                <li class="blog-item">
-                    <img
-                        class="article-image"
-                        src="//via.placeholder.com/128"
-                        alt="Article Topic"
-                    />
-                    <div class="article-text">
-                        <h4 class="article-title">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing.
-                        </h4>
-                        <span class="article-date">March 8, 2021</span>
-                    </div>
-                </li>
-                <li class="blog-item">
-                    <img
-                        class="article-image"
-                        src="//via.placeholder.com/128"
-                        alt="Article Topic"
-                    />
-                    <div class="article-text">
-                        <h4 class="article-title">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing.
-                        </h4>
-                        <span class="article-date">March 8, 2021</span>
-                    </div>
-                </li>
-                <li class="blog-item">
-                    <img
-                        class="article-image"
-                        src="//via.placeholder.com/128"
-                        alt="Article Topic"
-                    />
-                    <div class="article-text">
-                        <h4 class="article-title">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing.
-                        </h4>
-                        <span class="article-date">March 8, 2021</span>
-                    </div>
-                </li>
-                <li class="blog-item">
-                    <img
-                        class="article-image"
-                        src="//via.placeholder.com/128"
-                        alt="Article Topic"
-                    />
-                    <div class="article-text">
-                        <h4 class="article-title">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing.
-                        </h4>
-                        <span class="article-date">March 8, 2021</span>
-                    </div>
-                </li>
-                <li class="blog-item">
-                    <img
-                        class="article-image"
-                        src="//via.placeholder.com/128"
-                        alt="Article Topic"
-                    />
-                    <div class="article-text">
-                        <h4 class="article-title">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing.
-                        </h4>
-                        <span class="article-date">March 8, 2021</span>
+                        <span class="article-date" :title="absDate(article.date)">{{ relDate(article.date) }}</span>
                     </div>
                 </li>
             </ul>
         </div>
     </section>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            loading: false,
+            articles: [],
+            error: null,
+        };
+    },
+    mounted() {
+        axios.get("/api/blog/recent").then((res) => {
+            if (res.status > 399) {
+                this.error = res.statusText;
+            } else {
+                this.articles = res.data;
+            }
+
+            this.loading = false;
+        }).catch(ex => {
+            this.loading = false;
+            this.error = ex.message;
+        });
+    },
+    methods: {
+        relDate(date) {
+            return moment(date).fromNow();
+        },
+        absDate(date) {
+            return moment(date).format('MMMM Do YYYY, hh:mm:ss');
+        },
+    },
+}
+</script>
diff --git a/routes/api.php b/routes/api.php
index eb6fa48..08e912b 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -17,3 +17,13 @@ use Illuminate\Support\Facades\Route;
 Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
     return $request->user();
 });
+
+Route::get('/blog/recent', function() {
+    return [
+        ['title' => 'asdf', 'id' => 1, 'summary' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consequatur et, velit earum magni necessitatibus?', 'date' => Carbon::now()->sub('13s')],
+        ['title' => 'asdf', 'id' => 2, 'summary' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consequatur et, velit earum magni necessitatibus?', 'date' => Carbon::now()->sub('10m')],
+        ['title' => 'asdf', 'id' => 3, 'summary' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consequatur et, velit earum magni necessitatibus?', 'date' => Carbon::now()->sub('15h')],
+        ['title' => 'asdf', 'id' => 4, 'summary' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consequatur et, velit earum magni necessitatibus?', 'date' => Carbon::now()->sub('5d')],
+        ['title' => 'asdf', 'id' => 5, 'summary' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consequatur et, velit earum magni necessitatibus?', 'date' => Carbon::now()->sub('52d')],
+    ];
+});