diff --git a/front/components/Navbar.vue b/front/components/Navbar.vue
new file mode 100644
index 0000000..ec4d1b1
--- /dev/null
+++ b/front/components/Navbar.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="flex flex-row bg-white/10 backdrop-blur-xl p-2 rounded-full">
+        <div v-for="item in routes" :key="item.key" 
+        :class="cx('flex flex-row text-sm px-4 py-2 font-bold rounded-full cursor-pointer', 
+            item?.key === type && 'bg-black/10'
+        )"
+        @click="()=>{
+            router.push({
+                query: {
+                    ...route.query,
+                    type: item.key
+                }
+            })
+        }"
+        >
+          {{ item.name }}
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cx } from 'class-variance-authority'
+const routes = [
+    { name: '文件', key: 'file' },
+    { name: '文本', key: 'text' }
+]
+const route = useRoute()
+const router = useRouter()
+const type = computed(() => route?.query?.type)
+</script>
\ No newline at end of file
diff --git a/front/layouts/default.vue b/front/layouts/default.vue
index 4dff124..26f645a 100644
--- a/front/layouts/default.vue
+++ b/front/layouts/default.vue
@@ -1,5 +1,9 @@
 <template>
-  <div>
-    <slot />
+  <div class="h-screen w-screen">
+    <img class="w-full h-full object-cover absolute inset-0 -z-[1]" src="https://fuwari.vercel.app/_astro/demo-banner.DFyx781H_Z1gN7UP.webp" />
+    <div class=" h-full w-full flex flex-col items-center p-10">
+      <Navbar />
+      <slot />
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/front/package.json b/front/package.json
index d9b0697..8b1c243 100644
--- a/front/package.json
+++ b/front/package.json
@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.1",
     "nuxt": "^3.16.0",
     "vue": "latest",
     "vue-router": "latest"