diff --git a/theme/components/ShokaxArticle.vue b/theme/components/ShokaxArticle.vue
new file mode 100644
index 0000000..20575d4
--- /dev/null
+++ b/theme/components/ShokaxArticle.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+import ShokaxArticleInner from './ShokaxArticleInner.vue'
+
+defineProps<{
+  frontmatter: Post
+}>()
+</script>
+
+<template>
+  <main>
+    <div class="inner">
+      <div class="main">
+        <ShokaxArticleInner :frontmatter="frontmatter" />
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/theme/components/ShokaxArticleInner.vue b/theme/components/ShokaxArticleInner.vue
new file mode 100644
index 0000000..ed1773c
--- /dev/null
+++ b/theme/components/ShokaxArticleInner.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useThemeConfig } from 'composables'
+import { type Post, useSiteConfig } from 'valaxy'
+
+defineProps<{
+  frontmatter: Post
+}>()
+
+const siteConfig = useSiteConfig()
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <article itemscope itemtype="http://schema.org/Article" class="post block" :lang="siteConfig.lang">
+    <link itemprop="mainEntityOfPage" :href="frontmatter.url">
+    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <meta itemprop="image" :content="siteConfig.author.avatar">
+      <meta itemprop="name" :content="siteConfig.author.name">
+      <meta itemprop="description" :content="frontmatter.title">
+    </span>
+    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+      <meta itemprop="name" :content="frontmatter.title">
+    </span>
+    <RouterView />
+    <slot name="main-footer-before" />
+    <footer>
+      <ShokaxPostFooter :frontmatter="frontmatter" />
+      <ShokaxPostReward v-if="themeConfig.reward" :post="frontmatter" />
+      <ShokaxPostCopyright v-if="siteConfig.license.enabled" :frontmatter="frontmatter" />
+    </footer>
+    <slot name="main-footer-after" />
+  </article>
+</template>
diff --git a/theme/components/ValaxyMain.vue b/theme/components/ValaxyMain.vue
index 1a0b6c7..2e1bb24 100644
--- a/theme/components/ValaxyMain.vue
+++ b/theme/components/ValaxyMain.vue
@@ -1,51 +1,26 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
-import { useSiteConfig } from 'valaxy'
-import { useThemeConfig } from 'composables/config'
 import ShokaxPostFooterTags from './ShokaxPostFooterTags.vue'
-import ShokaxPostFooter from './ShokaxPostFooter.vue'
-import ShokaxPostReward from './ShokaxPostReward.vue'
-import ShokaxPostCopyright from './ShokaxPostCopyright.vue'
 
 defineProps<{
   frontmatter: Post
   data?: PageData
 }>()
-const siteConfig = useSiteConfig()
-const themeConfig = useThemeConfig()
 </script>
 
 <template>
-  <article itemscope itemtype="http://schema.org/Article" class="post block" :lang="siteConfig.lang">
-    <link itemprop="mainEntityOfPage" :href="frontmatter.url">
-    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
-      <meta itemprop="image" :content="siteConfig.author.avatar">
-      <meta itemprop="name" :content="siteConfig.author.name">
-      <meta itemprop="description" :content="frontmatter.title">
-    </span>
-    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
-      <meta itemprop="name" :content="frontmatter.title">
-    </span>
-    <slot name="main-header" />
-    <div class="body md" itemprop="articleBody">
-      <!-- photos 部分 TODO -->
-      <!-- summary 部分 TODO -->
-      <Transition appear>
-        <ValaxyMd :frontmatter="frontmatter">
-          <slot name="main-content-md" />
-          <slot />
-        </ValaxyMd>
-      </Transition>
+  <slot name="main-header" />
+  <div class="body md" itemprop="articleBody">
+    <!-- photos 部分 TODO -->
+    <!-- summary 部分 TODO -->
+    <Transition appear>
+      <ValaxyMd :frontmatter="frontmatter">
+        <slot name="main-content-md" />
+        <slot />
+      </ValaxyMd>
+    </Transition>
 
-      <slot name="main-content-after" />
-      <ShokaxPostFooterTags :post="frontmatter" />
-    </div>
-    <slot name="main-footer-before" />
-    <footer>
-      <ShokaxPostFooter :frontmatter="frontmatter" />
-      <ShokaxPostReward v-if="themeConfig.reward" :post="frontmatter" />
-      <ShokaxPostCopyright v-if="siteConfig.license.enabled" :frontmatter="frontmatter" />
-    </footer>
-    <slot name="main-footer-after" />
-  </article>
+    <slot name="main-content-after" />
+    <ShokaxPostFooterTags :post="frontmatter" />
+  </div>
 </template>