diff --git a/components/card/ArticleCard.vue b/components/card/ArticleCard.vue
index 182b8a2..6ff1ff4 100644
--- a/components/card/ArticleCard.vue
+++ b/components/card/ArticleCard.vue
@@ -13,16 +13,12 @@ const thumbUrl = computed(() => {
   return props.post.fields.thumb.value
 })
 
-const handleOnCardClick = () => {
-  window.open(props.post.url, '_self')
-}
-
 </script>
 
 <template>
-  <div :title="post.title"
+  <nuxt-link :title="post.title"
        class="container relative h-56 overflow-hidden rounded-2xl text-white hover:cursor-pointer hover:text-amber-200 hover:shadow-lg"
-       @click="handleOnCardClick">
+       :to="{name: 'blog-cid', params: {cid: post.cid}}">
     <!-- 图片 -->
     <div class="container h-full">
       <img :src="thumbUrl" alt=""
@@ -43,7 +39,7 @@ const handleOnCardClick = () => {
       <font-awesome-icon :icon="['far', 'clock']" class="mr-1 text-sm"/>
       <span>{{ post.date.year }}-{{ post.date.month }}-{{ post.date.day }}</span>
     </div>
-  </div>
+  </nuxt-link>
 </template>
 
 <style scoped>
diff --git a/components/markdown/Section.vue b/components/markdown/Section.vue
index 5761b76..5a121fe 100644
--- a/components/markdown/Section.vue
+++ b/components/markdown/Section.vue
@@ -5,9 +5,15 @@ defineProps<{
 </script>
 
 <template>
-  <div class="render" v-html="$mdRender.render(content)"></div>
+  <div class="markdown-body" v-html="$mdRender.render(content)"/>
 </template>
 
 
 <style lang="scss">
+.markdown-body {
+  img {
+    display: block;
+    margin: 0 auto;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/pages/blog.vue b/pages/blog.vue
new file mode 100644
index 0000000..61c76f4
--- /dev/null
+++ b/pages/blog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+onMounted( () => {
+  emitter.emit('startLoading', false)
+})
+</script>
+
+<template>
+  <nuxt-page/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/blog/[cid].vue b/pages/blog/[cid].vue
index 545c08a..71770da 100644
--- a/pages/blog/[cid].vue
+++ b/pages/blog/[cid].vue
@@ -1,12 +1,50 @@
 <script setup lang="ts">
 const route = useRoute()
 const cid = route.params.cid as string
-onMounted( () => {
+const content = ref<IBlogResponse<IPostFull>>()
 
+const getPost = get<IBlogResponse<IPostFull>, any>('/blog/index.php/api/post', {
+  params: {
+    cid: cid,
+    md: false
+  }
 })
+
+const title = computed(() => content.value?.data.title || 'Can not see me... can not see me...')
+const text = computed(() => content.value?.data.text || '## Ops!')
+const date = computed(() => new Date((content.value?.data.date.timeStamp || 0) * 1000)
+    .toISOString()
+    .split('T')[0]
+)
+const category = computed(() => content.value?.data.category || 'default')
+const url = computed(() => content.value?.data.url || '/error/404')
+
+content.value = await getPost()
 </script>
 
 <template>
+  <section class="container mx-auto m-4 p-8 bg-white rounded-xl shadow-md lg:max-w-screen-lg">
+    <div class="border-b-2 border-gray-200 border-dashed pb-4 mb-4">
+      <h1 class="text-center text-3xl font-bold">{{ title }}</h1>
+      <div class="text-gray-600 flex items-center justify-center w-full gap-4">
+        <!-- 日期 -->
+        <div class="flex items-center gap-2">
+          <font-awesome-icon :icon="['far', 'clock']" />
+          <time>{{ date }}</time>
+        </div>
+        <!-- 分类 -->
+        <div class="flex items-center gap-2">
+          <font-awesome-icon :icon="['far', 'folder']" />
+          <span>{{ category }}</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <font-awesome-icon :icon="['fas', 'link']" />
+          <a :href="url">原文链接</a>
+        </div>
+      </div>
+    </div>
+    <markdown-section :content="text"/>
+  </section>
 </template>
 
 <style scoped>
diff --git a/plugins/fontawsome.ts b/plugins/fontawsome.ts
index 1f0f7fb..e6480fe 100644
--- a/plugins/fontawsome.ts
+++ b/plugins/fontawsome.ts
@@ -1,6 +1,6 @@
 import {library, config} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
-import {faClock} from '@fortawesome/free-regular-svg-icons'
+import {faClock, faFolder} from '@fortawesome/free-regular-svg-icons'
 import {
   faXmark,
   faBlog,
@@ -15,7 +15,8 @@ import {
   faBrush,
   faChessRook,
   faBars,
-  faChevronDown
+  faChevronDown,
+  faLink
 } from '@fortawesome/free-solid-svg-icons'
 import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons'
 
@@ -25,7 +26,7 @@ config.autoAddCss = false
 export default defineNuxtPlugin((nuxtApp) => {
   library.add(
     faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight,
-    faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars, faChevronDown
+    faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars, faChevronDown, faFolder, faLink
   )
 
   nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
diff --git a/types/blog.d.ts b/types/blog.d.ts
index 5c2a1c5..f9bd602 100644
--- a/types/blog.d.ts
+++ b/types/blog.d.ts
@@ -1,3 +1,9 @@
+declare interface IBlogResponse<T> {
+  status: string
+  message: string
+  data: T
+}
+
 declare interface IPostsData {
   page: number
   pageSize: number
@@ -52,8 +58,12 @@ declare interface ICategory {
 }
 
 declare interface IDate {
-  timestamp: number
+  timeStamp: number
   year: string
   month: string
   day: string
 }
+
+declare interface IPostFull extends IPost {
+  text: string
+}
\ No newline at end of file