diff --git a/app/blog/BlogPostCard.tsx b/app/blog/BlogPostCard.tsx
index 94c3b9b..ef34ac4 100644
--- a/app/blog/BlogPostCard.tsx
+++ b/app/blog/BlogPostCard.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, CardBody, CardHeader } from '@nextui-org/card';
 import { Divider } from '@nextui-org/react';
+import Link from 'next/link';
 
 type Props = {
     post: JSON
@@ -10,13 +11,14 @@ function BlogPostCard({ post }: Props) {
     let title = (post as any)['title'];
     let summary = (post as any)['summary'];
     let last_update = (post as any)['last_update'];
+    let post_id = (post as any)['post_id'];
 
     return (
 
         <div>
             {/*todo: to be update*/ }
             {/*<Link href={ `/blog/${ name }` }>*/ }
-            <Card>
+            <Card as={ Link } href={ `/blog/post/${ post_id }` }>
                 <CardHeader>
                     <p className={ 'font-bold' }>{ title }</p>
                 </CardHeader>
diff --git a/app/blog/fetch_posts_list.ts b/app/blog/fetch_posts_list.ts
index 0081c63..8464952 100644
--- a/app/blog/fetch_posts_list.ts
+++ b/app/blog/fetch_posts_list.ts
@@ -1,9 +1,11 @@
+import axios from 'axios';
+
 export default async function fetch_posts_list(): Promise<any> {
-    const response = await fetch(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post_list`);
-    if (!response.ok) {
+    const response = await axios(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post_list`);
+    if (response.status !== 200) {
         throw new Error(response.statusText);
     }
-    return await response.json();
+    return response.data;
 }
 
 
diff --git a/app/blog/post/[id]/generate.tsx b/app/blog/post/[id]/generate.tsx
index 12fbae3..98f1bc9 100644
--- a/app/blog/post/[id]/generate.tsx
+++ b/app/blog/post/[id]/generate.tsx
@@ -8,19 +8,26 @@ import rehypeHighlight from 'rehype-highlight';
 import rehypeSanitize from 'rehype-sanitize';
 import rehypeRaw from 'rehype-raw';
 import remarkToc from 'remark-toc';
+import remarkFrontmatter from 'remark-frontmatter';
+import axios from 'axios';
 
 type Props = {
     id: string
 }
 
 async function Generate(props: Props) {
-    const response = await fetch(`${ process.env.BLOG_ENDPOINT }/posts/${ props.id }`);
-    if (!response.ok) {
-        throw new Error(response.statusText);
+    const response = await axios(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post/${ props.id }`);
+    if (response.status !== 200) {
+        return (
+            <Card className={ `w-full max-w-[1024px]` }>
+                <CardBody>
+                    Fatal: Failed to load the post.
+                </CardBody>
+            </Card>
+        );
     }
-    const post_md = await response.text();
 
-    console.log(post_md);
+    let post_data = response.data;
 
     return (
         <div>
@@ -28,9 +35,9 @@ async function Generate(props: Props) {
                 <CardBody>
                     <Markdown
                         className={ `mx-5 my-5 max-w-none prose dark:prose-invert sm:prose-sm md:prose-sm lg:prose-lg` }
-                        remarkPlugins={ [ remarkGfm, remarkToc ] }
+                        remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
                         rehypePlugins={ [ rehypeHighlight, rehypeRaw, rehypeSanitize ] }
-                    >{ post_md }</Markdown>
+                    >{ (post_data as any)['content'] }</Markdown>
                 </CardBody>
 
             </Card>
diff --git a/package.json b/package.json
index 07c89db..4f1fb5e 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@nextui-org/react": "^2.3.5",
+    "axios": "^1.6.8",
     "framer-motion": "^11.1.7",
     "next": "14.2.2",
     "next-themes": "^0.3.0",
@@ -20,6 +21,7 @@
     "rehype-highlight": "^7.0.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
+    "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-toc": "^9.0.0"
   },