diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 1646a857..ddc7c8ba 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -184,6 +184,25 @@
   }
 }
 
+/* Heartbeat animation for buttons */
+@keyframes heartbeat {
+  0%, 100% {
+    transform: scale(1);
+  }
+  10% {
+    transform: scale(1.05);
+  }
+  20% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(1.05);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
 /* Animation utility classes */
 .animate-fade-in {
   animation: fadeIn 0.6s ease-out;
@@ -205,6 +224,11 @@
   animation: scaleUp 0.5s ease-out;
 }
 
+/* Heartbeat animation for call-to-action buttons */
+.animate-heartbeat {
+  animation: heartbeat 2s ease-in-out infinite;
+}
+
 /* Stagger delays for sequential animations */
 .animate-delay-100 {
   animation-delay: 0.1s;
@@ -257,21 +281,21 @@
    GRADIENT UTILITIES
    ======================================== */
 
-/* Gradient Backgrounds - Purple/Pink theme */
+/* Gradient Backgrounds - Blue/Pink in light, Blue/Purple in dark */
 .gradient-bg-primary {
-  background: linear-gradient(135deg, #9333EA 0%, #EC4899 100%);
+  background: linear-gradient(135deg, #3B82F6 0%, #EC4899 100%);
 }
 
 .dark .gradient-bg-primary {
-  background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
+  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
 }
 
 .gradient-bg-secondary {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  background: linear-gradient(135deg, #60A5FA 0%, #F472B6 100%);
 }
 
 .dark .gradient-bg-secondary {
-  background: linear-gradient(135deg, #c471ed 0%, #c94b4b 100%);
+  background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
 }
 
 .gradient-bg-accent {
@@ -410,16 +434,30 @@
   }
 }
 
-/* Gradient Text - Purple/Pink theme */
+/* Gradient Text - Blue/Pink in light, Blue/Purple in dark */
 .gradient-text-primary {
-  background: linear-gradient(135deg, #9333EA 0%, #EC4899 100%);
+  background: linear-gradient(135deg, #3B82F6 0%, #EC4899 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.dark .gradient-text-primary {
+  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
 .gradient-text-secondary {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  background: linear-gradient(135deg, #60A5FA 0%, #F472B6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.dark .gradient-text-secondary {
+  background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index fcff08c1..c5b34a97 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -26,7 +26,7 @@ export default function HomePage() {
           <Link href="/analysis">
             <Button
               size="lg"
-              className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg hover:shadow-xl transition-shadow"
+              className="bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 hover:from-blue-600 hover:to-pink-600 dark:hover:from-blue-700 dark:hover:to-purple-700 shadow-lg hover:shadow-xl transition-all animate-heartbeat"
             >
               開始分析
             </Button>
@@ -335,7 +335,7 @@ export default function HomePage() {
         <Link href="/analysis">
           <Button
             size="lg"
-            className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-2xl transition-all"
+            className="bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 hover:from-blue-600 hover:to-pink-600 dark:hover:from-blue-700 dark:hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-2xl transition-all animate-heartbeat"
           >
             開始分析 →
           </Button>
@@ -491,7 +491,7 @@ function WorkflowStep({
 }) {
   return (
     <div className="flex gap-4 items-start">
-      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white flex items-center justify-center font-bold">
+      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 text-white flex items-center justify-center font-bold">
         {number}
       </div>
       <div>
diff --git a/frontend/components/analysis/AnalysisForm.tsx b/frontend/components/analysis/AnalysisForm.tsx
index 3abae6ea..44cefac2 100644
--- a/frontend/components/analysis/AnalysisForm.tsx
+++ b/frontend/components/analysis/AnalysisForm.tsx
@@ -151,47 +151,36 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
                 <FormField
                   control={form.control}
                   name="analysts"
-                  render={() => (
+                  render={({ field }) => (
                     <FormItem>
                       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                         {ANALYSTS.map((analyst) => (
-                          <FormField
+                          <FormItem
                             key={analyst.value}
-                            control={form.control}
-                            name="analysts"
-                            render={({ field }) => {
-                              return (
-                                <FormItem
-                                  key={analyst.value}
-                                  className="flex flex-row items-start space-x-3 space-y-0"
-                                >
-                                  <FormControl>
-                                    <Checkbox
-                                      checked={field.value?.includes(
-                                        analyst.value
-                                      )}
-                                      onCheckedChange={(checked) => {
-                                        return checked
-                                          ? field.onChange([
-                                              ...(field.value ?? []),
-                                              analyst.value,
-                                            ])
-                                          : field.onChange(
-                                              field.value?.filter(
-                                                (value: string) =>
-                                                  value !== analyst.value
-                                              )
-                                            );
-                                      }}
-                                    />
-                                  </FormControl>
-                                  <FormLabel className="font-normal cursor-pointer">
-                                    {analyst.label}
-                                  </FormLabel>
-                                </FormItem>
-                              );
-                            }}
-                          />
+                            className="flex flex-row items-start space-x-3 space-y-0"
+                          >
+                            <FormControl>
+                              <Checkbox
+                                checked={field.value?.includes(analyst.value)}
+                                onCheckedChange={(checked) => {
+                                  return checked
+                                    ? field.onChange([
+                                        ...(field.value ?? []),
+                                        analyst.value,
+                                      ])
+                                    : field.onChange(
+                                        field.value?.filter(
+                                          (value: string) =>
+                                            value !== analyst.value
+                                        )
+                                      );
+                                }}
+                              />
+                            </FormControl>
+                            <FormLabel className="font-normal cursor-pointer">
+                              {analyst.label}
+                            </FormLabel>
+                          </FormItem>
                         ))}
                       </div>
                       <FormMessage />
@@ -798,7 +787,7 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
 
             <Button
               type="submit"
-              className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg hover:shadow-xl transition-all"
+              className="w-full bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 hover:from-blue-600 hover:to-pink-600 dark:hover:from-blue-700 dark:hover:to-purple-700 shadow-lg hover:shadow-xl transition-all animate-heartbeat"
               disabled={loading}
               size="lg"
             >
diff --git a/frontend/components/layout/Header.tsx b/frontend/components/layout/Header.tsx
index 0588d1aa..80c68733 100644
--- a/frontend/components/layout/Header.tsx
+++ b/frontend/components/layout/Header.tsx
@@ -6,7 +6,7 @@ import { ThemeToggle } from "@/components/theme/ThemeToggle";
 
 export function Header() {
   return (
-    <header className="border-b bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+    <header className="border-b bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 text-white">
       <div className="container mx-auto px-4 py-6">
         <div className="flex items-center justify-between">
           <Link href="/" className="flex items-center gap-2">