diff --git a/components/Banner.vue b/components/Banner.vue
new file mode 100644
index 0000000..b79e91d
--- /dev/null
+++ b/components/Banner.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = $defineProps<{
+  img: string
+  title?: string
+  topic?: string
+  description?: string
+  link?: {
+    href: string
+    name: string
+  }
+  mask?: 'top' | 'bottom' | 'both'
+}>()
+
+function getMask() {
+  switch (props.mask) {
+    case 'top':
+      return 'linear-gradient(0deg,#000, transparent);'
+    case 'bottom':
+      return 'linear-gradient(0deg, transparent, #000);'
+    case 'both':
+    default:
+      return 'linear-gradient(0deg, transparent, #000, transparent);'
+  }
+}
+</script>
+
+<template>
+  <Section
+    relative h-380px md:h-400px xl:h-450px
+  >
+    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat :style="`background-image: url('${img}');-webkit-mask-image:${getMask()}`" />
+    <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
+      <p v-if="title" class="text-title" drop-shadow>
+        {{ title }}
+      </p>
+      <h2 v-if="topic" class="text-h2" text-white drop-shadow>
+        {{ topic }}
+      </h2>
+      <p v-if="description" text-h6 pb-5 drop-shadow>
+        {{
+          description
+        }}
+      </p>
+      <NuxtLink v-if="link" :href="link?.href">
+        <ABtn>
+          {{ link?.name }}
+        </ABtn>
+      </NuxtLink>
+    </Section>
+  </Section>
+</template>
diff --git a/components/Carousel.vue b/components/Carousel.vue
index 2fd0f85..a479c9a 100644
--- a/components/Carousel.vue
+++ b/components/Carousel.vue
@@ -18,7 +18,7 @@ useIntervalFn(() => {
   >
     <AView v-for="(item, i) in carousels" :key="i" :value="i">
       <div class="relative h-full max-h-700px min-h-500px w-full flex items-center justify-center bg-transparent">
-        <div class="absolute absolute z-10 hidden text-shadow">
+        <!-- <div class="absolute absolute z-10 text-shadow">
           <h2 class="text-h2 text-start text-amber-700 dark:text-white">
             {{ $t(item.title) }}
           </h2>
@@ -30,8 +30,8 @@ useIntervalFn(() => {
               {{ $t(item.link.name) }}
             </ABtn>
           </NuxtLink>
-        </div>
-        <div class="absolute left-0 top-0 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 65%, hsl(var(--a-body-bg-c)));" />
+        </div> -->
+        <div class="absolute left-0 top-0 z-0 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 65%, hsl(var(--a-body-bg-c))); pointer-events: none;" />
         <img :src="item.img">
       </div>
       <!-- <ACard
diff --git a/components/Footer.vue b/components/Footer.vue
index 4dc35e8..fc9c1be 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -6,11 +6,11 @@ const footer = useFoot()
 
 <template>
   <Divider />
-  <div class="grid-row p-20 py-10 lg:(grid-cols-3) md:(grid-cols-2 px-30) xl:px-60">
+  <div class="grid-row p-20 pt-30 lg:(grid-cols-3) md:(grid-cols-2 px-30) xl:px-60">
     <div
       v-for="(col, i) in footer"
       :key="i"
-      class="w-full flex flex-col items-center gap-4"
+      class="w-full flex flex-col items-center gap-8"
     >
       <h5 text-title opacity-60>
         {{ $t(col.title) }}
@@ -21,7 +21,7 @@ const footer = useFoot()
       </NuxtLink>
     </div>
   </div>
-  <div my-10 mt-20 flex items-center justify-center gap-4>
+  <div my-10 flex items-center justify-center gap-4>
     <BrandLogo />
     © Copyright 2022 - 2023 LandVault · Wam Group · All rights reserved
     <DarkToggle />
diff --git a/components/brand/logo.vue b/components/brand/logo.vue
index 05e2df2..c88ef2d 100644
--- a/components/brand/logo.vue
+++ b/components/brand/logo.vue
@@ -1,9 +1,11 @@
 <script setup>
 const color = useColorMode()
+
+const textColor = computed(() => color.value === 'dark' ? 'white' : 'black')
 </script>
 
 <template>
-  <div inline-flex :class="color.value === 'dark' ? 'text-white' : 'text-black'">
+  <div :text="textColor" class="py-10">
     <svg xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 749.65 91.19">
       <path fill="currentColor" d="M80.84,7.07V22.23H48V72.75H32.84V22.23H0V7.07Z" />
       <path
diff --git a/components/header/header.vue b/components/header/header.vue
index a207842..e4c08c1 100644
--- a/components/header/header.vue
+++ b/components/header/header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="bg-header/10 min-h-[100px]" z-100 w-full flex flex-col items-start justify-start px-5 md="items-center flex-row justify-around px-15 absolute">
+  <header class="bg-header/10 min-h-[100px]" z-100 w-full flex flex-col items-start justify-start px-5 md="items-center flex-row justify-around px-15 absolute z-100 top-0">
     <NuxtLink to="/" class="w-35 flex items-center gap-5">
       <BrandLogo />
     </NuxtLink>
diff --git a/content/en/test.md b/content/en/test.md
new file mode 100644
index 0000000..ff1baea
--- /dev/null
+++ b/content/en/test.md
@@ -0,0 +1,30 @@
+---
+img: "/imgs/1 (8).jpg"
+topic: "Grave of the Fireflies"
+title: " "
+description: "In the latter part of World War II, a boy and his sister, orphaned when their mother is killed in the firebombing of Tokyo, are left to survive on their own in what remains of civilian life in Japan. The plot follows this boy and his sister as they do their best to survive in the Japanese countryside, battling hunger, prejudice, and pride in their own quiet, personal battle."
+---
+
+
+<p align="center">
+<img src="./public/topverse.svg" width="600"/>
+</p>
+
+<h2 align="center">
+</h2><br>
+
+<pre align="center">
+🧪 Working in Progress
+</pre>
+
+<p align="center">
+<br>
+<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
+<br><br>
+ 
+
+```bash
+git clone https://github.com/TOPVERSE/TOPVERSE_Official.git
+cd TOPVERSE_Official 
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```
diff --git a/content/test.md b/content/test.md
new file mode 100644
index 0000000..5d77cbe
--- /dev/null
+++ b/content/test.md
@@ -0,0 +1,33 @@
+---
+img: "/imgs/1 (1).jpg"
+topic: "Grave of the Fireflies"
+title: " "
+description: "In the latter part of World War II, a boy and his sister, orphaned when their mother is killed in the firebombing of Tokyo, are left to survive on their own in what remains of civilian life in Japan. The plot follows this boy and his sister as they do their best to survive in the Japanese countryside, battling hunger, prejudice, and pride in their own quiet, personal battle."
+director: "Isao Takahata"
+release_date: 1988
+running_time: 89
+---
+
+
+<p align="center">
+<img src="./public/topverse.svg" width="600"/>
+</p>
+
+<h2 align="center">
+</h2><br>
+
+<pre align="center">
+🧪 Working in Progress
+</pre>
+
+<p align="center">
+<br>
+<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
+<br><br>
+ 
+
+```bash
+git clone https://github.com/TOPVERSE/TOPVERSE_Official.git
+cd TOPVERSE_Official 
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```
diff --git a/content/zh/test.md b/content/zh/test.md
new file mode 100644
index 0000000..68be162
--- /dev/null
+++ b/content/zh/test.md
@@ -0,0 +1,30 @@
+---
+img: "/imgs/1 (8).jpg"
+topic: "中文中文"
+title: " "
+description: "I什么没什么吗吗吗吗吗没什么奥斯卡大奖发拉开京东方技术的叫阿里；垃圾袋 in their own quiet, personal battle."
+---
+
+
+<p align="center">
+<img src="./public/topverse.svg" width="600"/>
+</p>
+
+<h2 align="center">
+</h2><br>
+
+<pre align="center">
+🧪 Working in Progress
+</pre>
+
+<p align="center">
+<br>
+<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
+<br><br>
+ 
+
+```bash
+git clone https://github.com/TOPVERSE/TOPVERSE_Official.git
+cd TOPVERSE_Official 
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```
diff --git a/pages/blog/[id].vue b/pages/blog/[id].vue
new file mode 100644
index 0000000..305ab4e
--- /dev/null
+++ b/pages/blog/[id].vue
@@ -0,0 +1,17 @@
+<script setup>
+const route = useRoute()
+const { locale } = useI18n()
+
+const path = `/${locale.value}${route.path.split('blog')[1]}`
+
+const { data } = await useAsyncData(`content-${path}`, () => {
+  return queryContent().where({ _path: path }).findOne()
+})
+</script>
+
+<template>
+  <Banner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" />
+  <main class="m-auto prose">
+    <ContentRenderer v-if="data" :value="data" />
+  </main>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index d878039..d3fc579 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -140,26 +140,12 @@ const sectionNine = useSectionNine()
   </Section>
 
   <!-- Section Four -->
-  <Section
-    relative h-380px md:h-400px xl:h-450px
-  >
-    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat :style="`background-image: url('${sectionFour.img}');-webkit-mask-image:linear-gradient(0deg, transparent, #000);`" />
-    <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-shadow>
-      <h2 class="text-h2">
-        {{ $t(sectionFour.topic) }}
-      </h2>
-      <p text-h6 pb-5>
-        {{
-          $t(sectionFour.description)
-        }}
-      </p>
-      <NuxtLink :href="sectionFour.link.href">
-        <ABtn>
-          {{ $t(sectionFour.link.name) }}
-        </ABtn>
-      </NuxtLink>
-    </Section>
-  </Section>
+  <Banner
+    :img="$t(sectionFour.img)" :topic="$t(sectionFour.topic)" :description="$t(sectionFour.description)" :link="{
+      href: sectionFour.link.href,
+      name: $t(sectionFour.link.name),
+    }" mask="bottom"
+  />
 
   <!-- Section Five -->
   <Section class="from-violet-500 to-fuchsia-500 text-white dark:(from-violet-600 to-fuchsia-600)" bg-gradient-to-r>
@@ -229,19 +215,7 @@ const sectionNine = useSectionNine()
   </Section>
 
   <!-- Section Seven -->
-  <Section
-    relative h-380px md:h-400px xl:h-450px
-  >
-    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat :style="`background-image: url('${sectionSeven.img}');-webkit-mask-image:linear-gradient(0deg, transparent, #000);`" />
-    <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
-      <p class="text-title">
-        {{ $t(sectionSeven.title) }}
-      </p>
-      <h2 class="text-h2">
-        {{ $t(sectionSeven.topic) }}
-      </h2>
-    </Section>
-  </Section>
+  <Banner :img="$t(sectionSeven.img)" :title="$t(sectionSeven.title)" :topic="$t(sectionSeven.topic)" mask="bottom" />
 
   <!-- Section Eight -->
   <Section>