diff --git a/web/src/App.tsx b/web/src/App.tsx
index 462f15bf..7c84ba9d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -176,9 +176,7 @@ function App() {
     return (
       <div className="min-h-screen flex items-center justify-center" style={{ background: '#0B0E11' }}>
         <div className="text-center">
-          <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-            <img src="/images/logo.png" alt="NoFx Logo" className="w-16 h-16 animate-pulse" />
-          </div>
+          <img src="/images/logo.png" alt="NoFx Logo" className="w-16 h-16 mx-auto mb-4 animate-pulse" />
           <p style={{ color: '#EAECEF' }}>加载中...</p>
         </div>
       </div>
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index c0c25065..af141d85 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -1,6 +1,5 @@
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
-import { Zap } from 'lucide-react';
 
 interface HeaderProps {
   simple?: boolean; // For login/register pages
@@ -15,9 +14,8 @@ export function Header({ simple = false }: HeaderProps) {
         <div className="flex items-center justify-between">
           {/* Left - Logo and Title */}
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-full flex items-center justify-center"
-                 style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-              <Zap className="w-5 h-5" style={{ color: '#000' }} />
+            <div className="w-8 h-8 flex items-center justify-center">
+              <img src="/images/logo.png" alt="NoFx Logo" className="w-full h-full object-contain" />
             </div>
             <div>
               <h1 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
diff --git a/web/src/components/LoginPage.tsx b/web/src/components/LoginPage.tsx
index 97fe8390..8923ebe2 100644
--- a/web/src/components/LoginPage.tsx
+++ b/web/src/components/LoginPage.tsx
@@ -3,7 +3,7 @@ import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
 import { Header } from './Header';
-import { Zap, Smartphone } from 'lucide-react';
+import { Smartphone } from 'lucide-react';
 
 export function LoginPage() {
   const { language } = useLanguage();
@@ -58,9 +58,8 @@ export function LoginPage() {
         <div className="w-full max-w-md">
           {/* Logo */}
           <div className="text-center mb-8">
-            <div className="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center"
-                 style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-              <Zap className="w-8 h-8" style={{ color: '#000' }} />
+            <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+              <img src="/images/logo.png" alt="NoFx Logo" className="w-full h-full object-contain" />
             </div>
             <h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
               {t('loginTitle', language)}
diff --git a/web/src/components/RegisterPage.tsx b/web/src/components/RegisterPage.tsx
index 033be1a0..68139e42 100644
--- a/web/src/components/RegisterPage.tsx
+++ b/web/src/components/RegisterPage.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
-import { Zap, Smartphone, Lock } from 'lucide-react';
+import { Smartphone, Lock } from 'lucide-react';
 
 export function RegisterPage() {
   const { language } = useLanguage();
@@ -76,9 +76,8 @@ export function RegisterPage() {
       <div className="w-full max-w-md">
         {/* Logo */}
         <div className="text-center mb-8">
-          <div className="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center"
-               style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-            <Zap className="w-8 h-8" style={{ color: '#000' }} />
+          <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+            <img src="/images/logo.png" alt="NoFx Logo" className="w-full h-full object-contain" />
           </div>
           <h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
             {t('appTitle', language)}