diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 9357ef4..464fbb7 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -18,6 +18,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
     },
+    {
+      path: '/demo',
+      name: 'demo',
+      component: () => import('../views/DemoView.vue'),
+    },
     {
       path: '/login',
       name: 'login',
diff --git a/frontend/src/views/DemoView.vue b/frontend/src/views/DemoView.vue
new file mode 100644
index 0000000..6ffe76a
--- /dev/null
+++ b/frontend/src/views/DemoView.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import VideoSection from '@/components/home/VideoSection.vue'
+import LanguageSwitcher from '@/components/layout/LanguageSwitcher.vue'
+import ThemeSwitcher from '@/components/layout/ThemeSwitcher.vue'
+import { hotVideos, recommendVideos } from '@/mock/home'
+import { useSiteStore } from '@/stores/site'
+
+const { t } = useI18n()
+const site = useSiteStore()
+
+const recommendTabs = [
+  'category.all',
+  'category.anime',
+  'category.movie',
+  'category.video',
+] as const
+
+const footerLinkKeys = [
+  'footer.links.about',
+  'footer.links.help',
+  'footer.links.terms',
+  'footer.links.privacy',
+  'footer.links.guidelines',
+  'footer.links.contact',
+] as const
+</script>
+
+<template>
+  <div class="mx-auto max-w-[1600px] space-y-6 px-4 py-4">
+    <VideoSection
+      :title="t('home.recommend')"
+      :tabs="recommendTabs.map((key) => t(key))"
+      :videos="recommendVideos"
+    />
+    <VideoSection :title="t('home.hot')" :videos="hotVideos" />
+
+    <footer class="rounded-xl bg-surface px-6 py-6 text-center text-xs text-content-3">
+      <div class="mb-4 flex flex-wrap items-center justify-center gap-x-6 gap-y-3">
+        <ThemeSwitcher />
+        <LanguageSwitcher />
+      </div>
+      <nav class="mb-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-2">
+        <a v-for="key in footerLinkKeys" :key="key" href="#" class="hover:text-primary">
+          {{ t(key) }}
+        </a>
+      </nav>
+      <p>{{ site.footer || t('footer.copyright') }}</p>
+    </footer>
+  </div>
+</template>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 6ffe76a..9c49ebc 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,21 +1,12 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import VideoSection from '@/components/home/VideoSection.vue'
 import LanguageSwitcher from '@/components/layout/LanguageSwitcher.vue'
 import ThemeSwitcher from '@/components/layout/ThemeSwitcher.vue'
-import { hotVideos, recommendVideos } from '@/mock/home'
 import { useSiteStore } from '@/stores/site'
 
 const { t } = useI18n()
 const site = useSiteStore()
 
-const recommendTabs = [
-  'category.all',
-  'category.anime',
-  'category.movie',
-  'category.video',
-] as const
-
 const footerLinkKeys = [
   'footer.links.about',
   'footer.links.help',
@@ -27,15 +18,10 @@ const footerLinkKeys = [
 </script>
 
 <template>
-  <div class="mx-auto max-w-[1600px] space-y-6 px-4 py-4">
-    <VideoSection
-      :title="t('home.recommend')"
-      :tabs="recommendTabs.map((key) => t(key))"
-      :videos="recommendVideos"
-    />
-    <VideoSection :title="t('home.hot')" :videos="hotVideos" />
-
-    <footer class="rounded-xl bg-surface px-6 py-6 text-center text-xs text-content-3">
+  <div
+    class="mx-auto flex min-h-[calc(100vh-3.5rem)] max-w-[1600px] flex-col px-4 py-4"
+  >
+    <footer class="mt-auto rounded-xl bg-surface px-6 py-6 text-center text-xs text-content-3">
       <div class="mb-4 flex flex-wrap items-center justify-center gap-x-6 gap-y-3">
         <ThemeSwitcher />
         <LanguageSwitcher />