diff --git a/src/app/globals.css b/src/app/globals.css
index c56032b..bfd4bcb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -55,7 +55,7 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --primary: oklch(0.55 0.22 255);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -90,8 +90,8 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
+  --primary: oklch(0.6 0.22 255);
+  --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
diff --git a/src/components/pages/AssistantPage.tsx b/src/components/pages/AssistantPage.tsx
index 255b8cf..357cbfc 100644
--- a/src/components/pages/AssistantPage.tsx
+++ b/src/components/pages/AssistantPage.tsx
@@ -16,6 +16,20 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 type AssistantForm = {
   name: string;
@@ -67,7 +81,7 @@ export function AssistantPage() {
         </div>
 
         <div className="flex gap-3">
-          <Button variant="outline" className="gap-2">
+          <Button variant="outline" className="gap-2 border-[#1b2233] bg-[#0f1521] text-[#9aa6bd] hover:bg-[#1b2233] hover:text-[#e9eef7]">
             <Save size={16} />
             保存草稿
           </Button>
@@ -193,20 +207,24 @@ function SectionCard({
   children: React.ReactNode;
 }) {
   return (
-    <section className="rounded-2xl border border-[#1b2233] bg-[#0f1521] p-6">
-      <div className="mb-5 flex items-start gap-3">
-        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400">
-          {icon}
-        </div>
+    <Card className="border-[#1b2233] bg-[#0f1521] text-[#e9eef7]">
+      <CardHeader>
+        <div className="flex items-start gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400">
+            {icon}
+          </div>
 
-        <div>
-          <h2 className="font-bold">{title}</h2>
-          <p className="mt-1 text-sm text-[#5d6880]">{description}</p>
+          <div>
+            <CardTitle className="text-base">{title}</CardTitle>
+            <CardDescription className="mt-1 text-[#5d6880]">
+              {description}
+            </CardDescription>
+          </div>
         </div>
-      </div>
+      </CardHeader>
 
-      <div className="space-y-4">{children}</div>
-    </section>
+      <CardContent className="space-y-4">{children}</CardContent>
+    </Card>
   );
 }
 
@@ -271,20 +289,27 @@ function SelectField({
   onChange: (value: string) => void;
 }) {
   return (
-    <label className="block">
+    <div className="block">
       <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
-      <select
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-        className="h-11 w-full rounded-xl border border-[#1b2233] bg-[#0d121d] px-4 text-sm text-white outline-none transition focus:border-blue-500"
-      >
-        {options.map((item) => (
-          <option key={item} value={item} className="bg-[#0d121d]">
-            {item}
-          </option>
-        ))}
-      </select>
-    </label>
+
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger className="w-full border-[#1b2233] bg-[#0d121d] text-white">
+          <SelectValue placeholder={`请选择${label}`} />
+        </SelectTrigger>
+
+        <SelectContent className="border-[#1b2233] bg-[#0f1521] text-white">
+          {options.map((item) => (
+            <SelectItem
+              key={item}
+              value={item}
+              className="focus:bg-blue-500/15 focus:text-blue-300"
+            >
+              {item}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
   );
 }