diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index 101269c..896036d 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { Menu, X } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 import { ThemeToggle } from '@/components/ui/theme-toggle';
 import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
@@ -63,7 +64,7 @@ export function Header() {
           fixed top-0 left-0 right-0 z-50
           transition-all duration-300 ease-out
           ${isScrolled 
-            ? 'bg-white/95 dark:bg-[#171717]/95 backdrop-blur-sm border-b border-[#E5E5E5] dark:border-[#333333]' 
+            ? 'bg-[var(--color-bg-primary)]/95 backdrop-blur-md border-b border-gray-800 shadow-lg shadow-black/20' 
             : 'bg-transparent'
           }
         `}
@@ -90,16 +91,20 @@ export function Header() {
                   onClick={(e) => handleNavClick(e, item.href)}
                   className={`
                     relative px-3 py-1.5 text-sm font-medium
-                    transition-colors duration-200
+                    transition-all duration-300
                     ${activeSection === item.id.replace('#', '')
-                      ? 'text-[#C41E3A]'
-                      : 'text-[#525252] dark:text-[#D4D4D4] hover:text-[#C41E3A]'
+                      ? 'text-[var(--color-tech-blue)]'
+                      : 'text-gray-400 hover:text-[var(--color-tech-blue)]'
                     }
                   `}
                 >
                   {item.label}
                   {activeSection === item.id.replace('#', '') && (
-                    <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 bg-[#C41E3A] rounded-full" />
+                    <motion.span 
+                      layoutId="activeNav"
+                      className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-gradient-to-r from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] rounded-full"
+                      transition={{ type: "spring", stiffness: 380, damping: 30 }}
+                    />
                   )}
                 </a>
               ))}
@@ -133,7 +138,7 @@ export function Header() {
             </div>
 
             <button
-              className="md:hidden p-2 -mr-2 text-[#525252] dark:text-[#D4D4D4] hover:text-[#C41E3A] transition-colors"
+              className="md:hidden p-2 -mr-2 text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
               onClick={() => setIsOpen(!isOpen)}
             >
               {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
@@ -142,54 +147,70 @@ export function Header() {
         </div>
       </header>
 
-      {isOpen && (
-        <div className="fixed inset-0 z-40 md:hidden">
-          <div 
-            className="absolute inset-0 bg-black/10 backdrop-blur-sm"
-            onClick={() => setIsOpen(false)}
-          />
-          <div className="absolute top-16 left-0 right-0 bg-white dark:bg-[#171717] border-b border-[#E5E5E5] dark:border-[#333333] animate-fade-in">
-            <nav className="container-wide py-4">
-              {NAVIGATION.map((item) => (
-                <a
-                  key={item.id}
-                  href={item.href}
-                  onClick={(e) => handleNavClick(e, item.href)}
-                  className={`
-                    block px-4 py-3 text-base font-medium
-                    transition-colors duration-200
-                    border-l-2
-                    ${activeSection === item.id.replace('#', '')
-                      ? 'text-[#C41E3A] border-[#C41E3A] bg-[#FEF2F4] dark:bg-[#1A0F11]'
-                      : 'text-[#525252] dark:text-[#D4D4D4] border-transparent hover:text-[#C41E3A] hover:bg-[#FAFAFA] dark:hover:bg-[#262626]'
-                    }
-                  `}
-                >
-                  {item.label}
-                </a>
-              ))}
-              <div className="mt-4 px-4 pt-4 border-t border-[#E5E5E5] space-y-3">
-                <div className="flex items-center justify-between">
-                  <span className="text-sm text-[#737373]">主题模式</span>
-                  <ThemeToggle />
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-40 md:hidden"
+          >
+            <div 
+              className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+              onClick={() => setIsOpen(false)}
+            />
+            <motion.div 
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: -20, opacity: 0 }}
+              transition={{ type: "spring", stiffness: 300, damping: 30 }}
+              className="absolute top-16 left-0 right-0 bg-[var(--color-bg-secondary)] border-b border-gray-800 shadow-xl"
+            >
+              <nav className="container-wide py-4">
+                {NAVIGATION.map((item, index) => (
+                  <motion.a
+                    key={item.id}
+                    href={item.href}
+                    onClick={(e) => handleNavClick(e, item.href)}
+                    initial={{ x: -20, opacity: 0 }}
+                    animate={{ x: 0, opacity: 1 }}
+                    transition={{ delay: index * 0.05 }}
+                    className={`
+                      block px-4 py-3 text-base font-medium
+                      transition-all duration-300
+                      border-l-2
+                      ${activeSection === item.id.replace('#', '')
+                        ? 'text-[var(--color-tech-blue)] border-[var(--color-tech-blue)] bg-[var(--color-tech-blue)]/10'
+                        : 'text-gray-400 border-transparent hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]'
+                      }
+                    `}
+                  >
+                    {item.label}
+                  </motion.a>
+                ))}
+                <div className="mt-4 px-4 pt-4 border-t border-gray-800 space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-gray-500">主题模式</span>
+                    <ThemeToggle />
+                  </div>
+                  <Button 
+                    className="w-full"
+                    onClick={() => {
+                      const element = document.getElementById('contact');
+                      if (element) {
+                        element.scrollIntoView({ behavior: 'smooth' });
+                      }
+                      setIsOpen(false);
+                    }}
+                  >
+                    联系我们
+                  </Button>
                 </div>
-                <Button 
-                  className="w-full"
-                  onClick={() => {
-                    const element = document.getElementById('contact');
-                    if (element) {
-                      element.scrollIntoView({ behavior: 'smooth' });
-                    }
-                    setIsOpen(false);
-                  }}
-                >
-                  联系我们
-                </Button>
-              </div>
-            </nav>
-          </div>
-        </div>
-      )}
+              </nav>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </>
   );
 }