diff --git a/.github/workflows/backend.yaml b/.github/workflows/backend.yaml
index 0942ef8b..892b8ebe 100644
--- a/.github/workflows/backend.yaml
+++ b/.github/workflows/backend.yaml
@@ -11,7 +11,7 @@ on:
 
 env:
   MAIL_API_KEY: ${{ secrets.MAIL_API_KEY }}
-  RAPID_API_KEY: ${{ secrets.RAPID_API_KEY }}
+  TUMBLR_CONSUMER_KEY: ${{ secrets.TUMBLR_CONSUMER_KEY }}
 
 jobs:
   build-and-ship:
@@ -67,3 +67,4 @@ jobs:
           flags: '--service-min-instances=3'
           env_vars: |
             MAIL_API_KEY=${{ env.MAIL_API_KEY }}
+            TUMBLR_CONSUMER_KEY=${{ env.TUMBLR_CONSUMER_KEY }}
diff --git a/api-server/routes/api.js b/api-server/routes/api.js
index cc72f181..7ac51fc0 100644
--- a/api-server/routes/api.js
+++ b/api-server/routes/api.js
@@ -5,6 +5,7 @@ const aboutRouter = require('./about');
 const cvRouter = require('./cv');
 const worksRouter = require('./works');
 const contactRouter = require('./contact');
+const postsRouter = require('./logues');
 
 const URL_PREFIX = '/api/v1';
 
@@ -12,5 +13,6 @@ router.use(URL_PREFIX + '/about', aboutRouter);
 router.use(URL_PREFIX + '/cv', cvRouter);
 router.use(URL_PREFIX + '/works', worksRouter);
 router.use(URL_PREFIX + '/contact', contactRouter);
+router.use(URL_PREFIX + '/posts', postsRouter);
 
 module.exports = router;
diff --git a/api-server/routes/logues.js b/api-server/routes/logues.js
new file mode 100644
index 00000000..26f087da
--- /dev/null
+++ b/api-server/routes/logues.js
@@ -0,0 +1,38 @@
+const express = require('express');
+const router = express.Router();
+const axios = require('axios');
+
+router.get('/', async (req, res, next) => {
+  // #swagger.tags = ['Logues']
+  // #swagger.summary = 'returns dynamic content for the blog page'
+  // #swagger.description = '/api/v1/logues'
+
+  const CONSUMER_KEY = process.env.TUMBLR_CONSUMER_KEY;
+  const url = 'https://api.tumblr.com/v2/blog/hwakabh.tumblr.com/posts?api_key=' + CONSUMER_KEY;
+  const respPosts = await axios.get(url)
+    .then(response => {
+      return response.data.response.posts
+    })
+    .catch(error => {
+      console.log(error);
+    })
+
+  const posts = [];
+  respPosts.forEach(p => {
+    posts.push({
+      date: p.date,
+      body: p.body
+    })
+  });
+
+  console.log(posts);
+
+  res.header('Content-Type', 'application/json; charset=utf-8');
+  res.json({
+    "path": req.originalUrl,
+    "content": posts
+  });
+
+});
+
+module.exports = router;
diff --git a/schemas/swagger.json b/schemas/swagger.json
index 0810cc1f..a904ed58 100644
--- a/schemas/swagger.json
+++ b/schemas/swagger.json
@@ -226,6 +226,20 @@
           }
         }
       }
+    },
+    "/api/v1/posts/": {
+      "get": {
+        "tags": [
+          "Logues"
+        ],
+        "summary": "returns dynamic content for the blog page",
+        "description": "/api/v1/logues",
+        "responses": {
+          "200": {
+            "description": "OK"
+          }
+        }
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/web-frontend/src/pages/Blog.vue b/web-frontend/src/pages/Blog.vue
index 66a6b3bc..901d21a3 100644
--- a/web-frontend/src/pages/Blog.vue
+++ b/web-frontend/src/pages/Blog.vue
@@ -1,67 +1,30 @@
-<template>
-  <section class="wrapper fullscreen">
-    <div class="inner">
-      <h1 class="major">Elements</h1>
-      <section>
-        <h2>Text</h2>
-        <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
-        This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
-        This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
-        <hr />
-        <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
-        <hr />
-        <h2>Heading Level 2</h2>
-        <h3>Heading Level 3</h3>
-        <h4>Heading Level 4</h4>
-        <hr />
-        <h3>Blockquote</h3>
-        <blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
-        <h3>Preformatted</h3>
-        <pre><code>i = 0;
+<script setup>
+import axios from "axios";
+import { ref } from "vue";
 
-while (!deck.isInOrder()) {
-    print 'Iteration ' + i;
-    deck.shuffle();
-    i++;
-}
+const postData = ref([]);
+axios.get('/api/v1/posts')
+  .then((resp) => {
+    postData.value = resp.data.content;
+  })
+  .catch((err) => {
+    console.log(err);
+  })
 
-print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
-      </section>
+</script>
 
-      <!-- Lists -->
-      <section>
-        <h2>Lists</h2>
-        <div class="row">
-          <div class="col-4 col-12-medium">
-            <h3>Unordered</h3>
-            <ul>
-              <li>Dolor pulvinar etiam.</li>
-              <li>Sagittis adipiscing.</li>
-              <li>Felis enim feugiat.</li>
-            </ul>
-          </div>
-          <div class="col-4 col-12-medium">
-            <h3>Alternate</h3>
-            <ul class="alt">
-              <li>Dolor pulvinar etiam.</li>
-              <li>Sagittis adipiscing.</li>
-              <li>Felis enim feugiat.</li>
-            </ul>
-          </div>
-          <div class="col-4 col-12-medium">
-            <h3>Ordered</h3>
-            <ol>
-              <li>Dolor pulvinar etiam.</li>
-              <li>Etiam vel felis viverra.</li>
-              <li>Felis enim feugiat.</li>
-              <li>Dolor pulvinar etiam.</li>
-              <li>Etiam vel felis lorem.</li>
-              <li>Felis enim et feugiat.</li>
-            </ol>
-          </div>
+<template>
+  <section class="wrapper fullscreen">
+    <div class="inner">
+      <h1 class="major">Blogs</h1>
+        <div v-for="(p, idx) in postData"
+          :key="idx"
+          class="post-detail"
+          >
+            <div v-html="p.date"></div>
+            <div v-html="p.body"></div>
+          <hr />
         </div>
-      </section>
-
     </div>
   </section>
 </template>