diff --git a/src/router/index.js b/src/router/index.js
index b6e90bc..deff620 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import Login from '@/views/auth/Login.vue'
 import Register from '@/views/auth/Register.vue'
-
+import Notfound from '@/views/Notfound.vue'
 Vue.use(VueRouter)
 
 const routes = [
@@ -80,6 +80,11 @@ const routes = [
         }
       },
     ]
+  },
+  {
+    path: '*',
+    name: 'NotFound',
+    component: Notfound
   }
 ]
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 61007f0..dde00fa 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,13 +1,170 @@
 <template>
-  <div class="home">
-    <h1>Home</h1>
-    <p>Home page content</p>
+  <div class="home-page">
+    <!-- 顶部导航栏 -->
+    <header class="navbar">
+      <div class="logo">API计费系统</div>
+      <nav class="nav-buttons">
+        <button @click="goToLogin">登录</button>
+        <button @click="goToRegister">注册</button>
+      </nav>
+    </header>
+
+    <!-- 主内容区 -->
+    <section class="hero">
+      <h1>轻松管理您的 API 使用和费用</h1>
+      <p>我们的系统让您以简单透明的方式追踪每一笔调用。</p>
+    </section>
+
+    <!-- 套餐介绍 -->
+    <section class="plans">
+      <h2>套餐介绍</h2>
+      <div class="plan-list">
+        <div class="plan">
+          <h3>基础版</h3>
+          <p>适合初学者</p>
+          <ul>
+            <li>1000 次/月</li>
+            <li>限速：10 次/分钟</li>
+            <li>免费</li>
+          </ul>
+        </div>
+        <div class="plan">
+          <h3>专业版</h3>
+          <p>适合中小企业</p>
+          <ul>
+            <li>10 万次/月</li>
+            <li>限速：100 次/分钟</li>
+            <li>¥49/月</li>
+          </ul>
+        </div>
+        <div class="plan">
+          <h3>企业版</h3>
+          <p>无限使用</p>
+          <ul>
+            <li>不限调用</li>
+            <li>专属支持</li>
+            <li>¥199/月</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- 关于我们 -->
+    <section class="about">
+      <h2>关于我们</h2>
+      <p>
+        我们是一支专注于API管理与计费的技术团队，致力于提供高性能、低成本的解决方案，帮助开发者专注于业务本身。
+      </p>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="footer">
+      <p>© 2025 API计费系统. 保留所有权利。</p>
+    </footer>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
 export default {
-  name: 'HomeView'
-}
+  name: "HomeView",
+  methods: {
+    goToLogin() {
+      this.$router.push("/auth/login");
+    },
+    goToRegister() {
+      this.$router.push("/auth/register");
+    }
+  }
+};
 </script>
+
+<style scoped>
+.home-page {
+  font-family: "Helvetica Neue", sans-serif;
+  color: #333;
+  line-height: 1.6;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 40px;
+  background: #2c3e50;
+  color: #fff;
+}
+
+.logo {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.nav-buttons button {
+  margin-left: 10px;
+  padding: 8px 16px;
+  background: #3498db;
+  border: none;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.nav-buttons button:hover {
+  background: #2980b9;
+}
+
+.hero {
+  text-align: center;
+  padding: 80px 20px;
+  background: #f4f6f8;
+}
+
+.hero h1 {
+  font-size: 36px;
+  margin-bottom: 20px;
+}
+
+.plans {
+  padding: 60px 20px;
+  background: #fff;
+  text-align: center;
+}
+
+.plan-list {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 30px;
+}
+
+.plan {
+  background: #ecf0f1;
+  padding: 20px;
+  border-radius: 12px;
+  width: 250px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.plan h3 {
+  margin-bottom: 10px;
+}
+
+.plan ul {
+  list-style: none;
+  padding: 0;
+  text-align: left;
+}
+
+.about {
+  padding: 60px 20px;
+  background: #f9f9f9;
+  text-align: center;
+}
+
+.footer {
+  text-align: center;
+  padding: 20px;
+  background: #2c3e50;
+  color: white;
+}
+</style>