diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx
index 145022d..77d332a 100644
--- a/src/components/pages/HomePage.tsx
+++ b/src/components/pages/HomePage.tsx
@@ -1,5 +1,6 @@
 import { Boxes, Plus, Sparkles, Video } from "lucide-react";
 import type { NavKey } from "@/components/layout/AppShell";
+import { Button } from "@/components/ui/button";
 
 type HomePageProps = {
   onNavigate: (key: NavKey) => void;
@@ -36,21 +37,19 @@ export function HomePage({ onNavigate }: HomePageProps) {
         </p>
 
         <div className="mt-8 flex gap-3">
-          <button
-            onClick={() => onNavigate("assistant-prompt")}
-            className="flex h-11 items-center gap-2 rounded-xl bg-blue-500 px-5 text-sm font-semibold text-white shadow-[0_8px_24px_rgba(29,123,255,.35)]"
-          >
+          <Button className="gap-2" onClick={() => onNavigate("assistant-prompt")}>
             <Plus size={17} />
             创建助手
-          </button>
+          </Button>
 
-          <button
+          <Button
+            variant="outline"
+            className="gap-2 border-[#1b2233] bg-[#0f1521] text-[#9aa6bd] hover:bg-[#1b2233] hover:text-[#e9eef7]"
             onClick={() => onNavigate("components")}
-            className="flex h-11 items-center gap-2 rounded-xl border border-[#1b2233] bg-[#0f1521] px-5 text-sm font-semibold text-[#9aa6bd]"
           >
             <Boxes size={17} />
             配置组件
-          </button>
+          </Button>
         </div>
       </section>