diff --git a/web/package-lock.json b/web/package-lock.json
index c7990faa..32e3c01b 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
+        "lucide-react": "^0.552.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "recharts": "^2.15.2",
@@ -2156,6 +2157,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.552.0",
+      "resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.552.0.tgz",
+      "integrity": "sha512-g9WCjmfwqbexSnZE+2cl21PCfXOcqnGeWeMTNAOGEfpPbm/ZF4YIq77Z8qWrxbu660EKuLB4nSLggoKnCb+isw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/web/package.json b/web/package.json
index a126d761..dfe57495 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,22 +8,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.552.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "zustand": "^5.0.2",
-    "swr": "^2.2.5",
     "recharts": "^2.15.2",
-    "date-fns": "^4.1.0",
-    "clsx": "^2.1.1"
+    "swr": "^2.2.5",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "^5.8.3",
-    "vite": "^6.0.7",
-    "tailwindcss": "^3.4.17",
+    "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
-    "autoprefixer": "^10.4.20"
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
+    "vite": "^6.0.7"
   }
 }
diff --git a/web/public/images/logo.png b/web/public/images/logo.png
new file mode 100644
index 00000000..28ec8c71
Binary files /dev/null and b/web/public/images/logo.png differ
diff --git a/web/src/App.tsx b/web/src/App.tsx
index ddc6d028..7c84ba9d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -11,6 +11,7 @@ import { LanguageProvider, useLanguage } from './contexts/LanguageContext';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { t, type Language } from './i18n/translations';
 import { useSystemConfig } from './hooks/useSystemConfig';
+import { Bot, RefreshCw, TrendingUp, BarChart3, Brain, Download, Upload, Check, X, AlertCircle, Zap, TrendingUp as ArrowUp, TrendingDown as ArrowDown } from 'lucide-react';
 import type {
   SystemStatus,
   AccountInfo,
@@ -175,10 +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 rounded-full mx-auto mb-4 flex items-center justify-center text-3xl animate-spin"
-               style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-            ⚡
-          </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>
@@ -201,9 +199,7 @@ function App() {
           <div className="relative flex items-center">
             {/* Left - Logo and Title */}
             <div className="flex items-center gap-3">
-              <div className="w-8 h-8 rounded-full flex items-center justify-center text-xl" style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-                ⚡
-              </div>
+              <img src="/images/logo.png" alt="NoFx Logo" className="w-8 h-8" />
               <div>
                 <h1 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
                   {t('appTitle', language)}
@@ -264,7 +260,8 @@ function App() {
               {/* Admin Mode Indicator */}
               {systemConfig?.admin_mode && (
                 <div className="flex items-center gap-2 px-3 py-2 rounded" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
-                  <span className="text-sm font-semibold" style={{ color: '#F0B90B' }}>⚡ 管理员模式</span>
+                  <Zap className="w-4 h-4" style={{ color: '#F0B90B' }} />
+                  <span className="text-sm font-semibold" style={{ color: '#F0B90B' }}>管理员模式</span>
                 </div>
               )}
 
@@ -429,9 +426,9 @@ function TraderDetailsPage({
       <div className="mb-6 rounded p-6 animate-scale-in" style={{ background: 'linear-gradient(135deg, rgba(240, 185, 11, 0.15) 0%, rgba(252, 213, 53, 0.05) 100%)', border: '1px solid rgba(240, 185, 11, 0.2)', boxShadow: '0 0 30px rgba(240, 185, 11, 0.15)' }}>
         <div className="flex items-start justify-between mb-3">
           <h2 className="text-2xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
-            <span className="w-10 h-10 rounded-full flex items-center justify-center text-xl" style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-              🤖
-            </span>
+            <div className="w-10 h-10 rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
+              <Bot className="w-6 h-6" style={{ color: '#000' }} />
+            </div>
             {selectedTrader.trader_name}
           </h2>
           
@@ -470,8 +467,9 @@ function TraderDetailsPage({
       {/* Debug Info */}
       {account && (
         <div className="mb-4 p-3 rounded text-xs font-mono" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
-          <div style={{ color: '#848E9C' }}>
-            🔄 Last Update: {lastUpdate} | Total Equity: {account?.total_equity?.toFixed(2) || '0.00'} |
+          <div className="flex items-center gap-2" style={{ color: '#848E9C' }}>
+            <RefreshCw className="w-3 h-3" />
+            Last Update: {lastUpdate} | Total Equity: {account?.total_equity?.toFixed(2) || '0.00'} |
             Available: {account?.available_balance?.toFixed(2) || '0.00'} | P&L: {account?.total_pnl?.toFixed(2) || '0.00'}{' '}
             ({account?.total_pnl_pct?.toFixed(2) || '0.00'}%)
           </div>
@@ -517,7 +515,8 @@ function TraderDetailsPage({
           <div className="binance-card p-6 animate-slide-in" style={{ animationDelay: '0.15s' }}>
         <div className="flex items-center justify-between mb-5">
           <h2 className="text-xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
-            📈 {t('currentPositions', language)}
+            <TrendingUp className="w-5 h-5" style={{ color: '#0ECB81' }} />
+            {t('currentPositions', language)}
           </h2>
           {positions && positions.length > 0 && (
             <div className="text-xs px-3 py-1 rounded" style={{ background: 'rgba(240, 185, 11, 0.1)', color: '#F0B90B', border: '1px solid rgba(240, 185, 11, 0.2)' }}>
@@ -581,7 +580,9 @@ function TraderDetailsPage({
           </div>
         ) : (
           <div className="text-center py-16" style={{ color: '#848E9C' }}>
-            <div className="text-6xl mb-4 opacity-50">📊</div>
+            <div className="mb-4 flex justify-center opacity-50">
+              <BarChart3 className="w-16 h-16" />
+            </div>
             <div className="text-lg font-semibold mb-2">{t('noPositions', language)}</div>
             <div className="text-sm">{t('noActivePositions', language)}</div>
           </div>
@@ -594,11 +595,11 @@ function TraderDetailsPage({
         <div className="binance-card p-6 animate-slide-in h-fit lg:sticky lg:top-24 lg:max-h-[calc(100vh-120px)]" style={{ animationDelay: '0.2s' }}>
           {/* 标题 */}
           <div className="flex items-center gap-3 mb-5 pb-4 border-b" style={{ borderColor: '#2B3139' }}>
-            <div className="w-10 h-10 rounded-xl flex items-center justify-center text-xl" style={{
+            <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{
               background: 'linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)',
               boxShadow: '0 4px 14px rgba(99, 102, 241, 0.4)'
             }}>
-              🧠
+              <Brain className="w-6 h-6" style={{ color: '#FFF' }} />
             </div>
             <div>
               <h2 className="text-xl font-bold" style={{ color: '#EAECEF' }}>{t('recentDecisions', language)}</h2>
@@ -618,7 +619,9 @@ function TraderDetailsPage({
               ))
             ) : (
               <div className="py-16 text-center">
-                <div className="text-6xl mb-4 opacity-30">🧠</div>
+                <div className="mb-4 flex justify-center opacity-30">
+                  <Brain className="w-16 h-16" style={{ color: '#8B5CF6' }} />
+                </div>
                 <div className="text-lg font-semibold mb-2" style={{ color: '#EAECEF' }}>{t('noDecisionsYet', language)}</div>
                 <div className="text-sm" style={{ color: '#848E9C' }}>{t('aiDecisionsWillAppear', language)}</div>
               </div>
@@ -657,10 +660,11 @@ function StatCard({
       {change !== undefined && (
         <div className="flex items-center gap-1">
           <div
-            className="text-sm mono font-bold"
+            className="text-sm mono font-bold flex items-center gap-1"
             style={{ color: positive ? '#0ECB81' : '#F6465D' }}
           >
-            {positive ? '▲' : '▼'} {positive ? '+' : ''}
+            {positive ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />}
+            {positive ? '+' : ''}
             {change.toFixed(2)}%
           </div>
         </div>
@@ -704,7 +708,8 @@ function DecisionCard({ decision, language }: { decision: DecisionRecord; langua
             className="flex items-center gap-2 text-sm transition-colors"
             style={{ color: '#60a5fa' }}
           >
-            <span className="font-semibold">📥 {t('inputPrompt', language)}</span>
+            <Download className="w-4 h-4" />
+            <span className="font-semibold">{t('inputPrompt', language)}</span>
             <span className="text-xs">{showInputPrompt ? t('collapse', language) : t('expand', language)}</span>
           </button>
           {showInputPrompt && (
@@ -723,7 +728,8 @@ function DecisionCard({ decision, language }: { decision: DecisionRecord; langua
             className="flex items-center gap-2 text-sm transition-colors"
             style={{ color: '#F0B90B' }}
           >
-            <span className="font-semibold">📤 {t('aiThinking', language)}</span>
+            <Upload className="w-4 h-4" />
+            <span className="font-semibold">{t('aiThinking', language)}</span>
             <span className="text-xs">{showCoT ? t('collapse', language) : t('expand', language)}</span>
           </button>
           {showCoT && (
@@ -753,9 +759,11 @@ function DecisionCard({ decision, language }: { decision: DecisionRecord; langua
               {action.price > 0 && (
                 <span className="font-mono text-xs" style={{ color: '#848E9C' }}>@{action.price.toFixed(4)}</span>
               )}
-              <span style={{ color: action.success ? '#0ECB81' : '#F6465D' }}>
-                {action.success ? '✓' : '✗'}
-              </span>
+              {action.success ? (
+                <Check className="w-4 h-4" style={{ color: '#0ECB81' }} />
+              ) : (
+                <X className="w-4 h-4" style={{ color: '#F6465D' }} />
+              )}
               {action.error && <span className="text-xs ml-2" style={{ color: '#F6465D' }}>{action.error}</span>}
             </div>
           ))}
@@ -789,8 +797,9 @@ function DecisionCard({ decision, language }: { decision: DecisionRecord; langua
 
       {/* Error Message */}
       {decision.error_message && (
-        <div className="text-sm rounded px-3 py-2 mt-3" style={{ color: '#F6465D', background: 'rgba(246, 70, 93, 0.1)' }}>
-          ❌ {decision.error_message}
+        <div className="text-sm rounded px-3 py-2 mt-3 flex items-center gap-2" style={{ color: '#F6465D', background: 'rgba(246, 70, 93, 0.1)' }}>
+          <AlertCircle className="w-4 h-4" />
+          {decision.error_message}
         </div>
       )}
     </div>
diff --git a/web/src/components/AILearning.tsx b/web/src/components/AILearning.tsx
index 20da61d2..f44baf27 100644
--- a/web/src/components/AILearning.tsx
+++ b/web/src/components/AILearning.tsx
@@ -2,6 +2,7 @@ import useSWR from 'swr';
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
 import { api } from '../lib/api';
+import { Brain, BarChart3, TrendingUp, TrendingDown, Sparkles, Coins, Trophy, ScrollText, Lightbulb } from 'lucide-react';
 
 interface TradeOutcome {
   symbol: string;
@@ -72,7 +73,9 @@ export default function AILearning({ traderId }: AILearningProps) {
   if (!performance) {
     return (
       <div className="rounded p-6" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
-        <div style={{ color: '#848E9C' }}>📊 {t('loading', language)}</div>
+        <div className="flex items-center gap-2" style={{ color: '#848E9C' }}>
+          <BarChart3 className="w-4 h-4" /> {t('loading', language)}
+        </div>
       </div>
     );
   }
@@ -81,7 +84,7 @@ export default function AILearning({ traderId }: AILearningProps) {
     return (
       <div className="rounded p-6" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
         <div className="flex items-center gap-2 mb-2">
-          <span className="text-xl">🧠</span>
+          <Brain className="w-5 h-5" style={{ color: '#8B5CF6' }} />
           <h2 className="text-lg font-bold" style={{ color: '#EAECEF' }}>{t('aiLearning', language)}</h2>
         </div>
         <div style={{ color: '#848E9C' }}>
@@ -109,12 +112,12 @@ export default function AILearning({ traderId }: AILearningProps) {
           filter: 'blur(60px)'
         }} />
         <div className="relative flex items-center gap-4">
-          <div className="w-16 h-16 rounded-2xl flex items-center justify-center text-3xl" style={{
+          <div className="w-16 h-16 rounded-2xl flex items-center justify-center" style={{
             background: 'linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%)',
             boxShadow: '0 8px 24px rgba(139, 92, 246, 0.5)',
             border: '2px solid rgba(255, 255, 255, 0.1)'
           }}>
-            🧠
+            <Brain className="w-8 h-8" style={{ color: '#FFF' }} />
           </div>
           <div>
             <h2 className="text-3xl font-bold mb-1" style={{
@@ -149,7 +152,9 @@ export default function AILearning({ traderId }: AILearningProps) {
             <div className="text-4xl font-bold mono mb-1" style={{ color: '#E0E7FF' }}>
               {performance.total_trades}
             </div>
-            <div className="text-xs" style={{ color: '#6366F1' }}>📊 Trades</div>
+            <div className="text-xs flex items-center gap-1" style={{ color: '#6366F1' }}>
+              <BarChart3 className="w-3 h-3" /> Trades
+            </div>
           </div>
         </div>
 
@@ -199,7 +204,9 @@ export default function AILearning({ traderId }: AILearningProps) {
             <div className="text-4xl font-bold mono mb-1" style={{ color: '#10B981' }}>
               +{(performance.avg_win || 0).toFixed(2)}
             </div>
-            <div className="text-xs" style={{ color: '#6EE7B7' }}>📈 USDT Average</div>
+            <div className="text-xs flex items-center gap-1" style={{ color: '#6EE7B7' }}>
+              <TrendingUp className="w-3 h-3" /> USDT Average
+            </div>
           </div>
         </div>
 
@@ -220,7 +227,9 @@ export default function AILearning({ traderId }: AILearningProps) {
             <div className="text-4xl font-bold mono mb-1" style={{ color: '#F87171' }}>
               {(performance.avg_loss || 0).toFixed(2)}
             </div>
-            <div className="text-xs" style={{ color: '#FCA5A5' }}>📉 USDT Average</div>
+            <div className="text-xs flex items-center gap-1" style={{ color: '#FCA5A5' }}>
+              <TrendingDown className="w-3 h-3" /> USDT Average
+            </div>
           </div>
         </div>
       </div>
@@ -239,11 +248,11 @@ export default function AILearning({ traderId }: AILearningProps) {
           }} />
           <div className="relative">
             <div className="flex items-center gap-3 mb-4">
-              <div className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl" style={{
+              <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{
                 background: 'rgba(139, 92, 246, 0.3)',
                 border: '1px solid rgba(139, 92, 246, 0.5)'
               }}>
-                🧬
+                <Sparkles className="w-6 h-6" style={{ color: '#A78BFA' }} />
               </div>
               <div>
                 <div className="text-lg font-bold" style={{ color: '#C4B5FD' }}>夏普比率</div>
@@ -307,11 +316,11 @@ export default function AILearning({ traderId }: AILearningProps) {
           }} />
           <div className="relative">
             <div className="flex items-center gap-3 mb-4">
-              <div className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl" style={{
+              <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{
                 background: 'rgba(240, 185, 11, 0.3)',
                 border: '1px solid rgba(240, 185, 11, 0.5)'
               }}>
-                💰
+                <Coins className="w-6 h-6" style={{ color: '#FCD34D' }} />
               </div>
               <div>
                 <div className="text-lg font-bold" style={{ color: '#FCD34D' }}>
@@ -373,7 +382,7 @@ export default function AILearning({ traderId }: AILearningProps) {
               boxShadow: '0 4px 16px rgba(16, 185, 129, 0.1)'
             }}>
               <div className="flex items-center gap-2 mb-3">
-                <span className="text-2xl">🏆</span>
+                <Trophy className="w-6 h-6" style={{ color: '#10B981' }} />
                 <span className="text-sm font-semibold" style={{ color: '#6EE7B7' }}>{t('bestPerformer', language)}</span>
               </div>
               <div className="text-3xl font-bold mono mb-1" style={{ color: '#10B981' }}>
@@ -395,7 +404,7 @@ export default function AILearning({ traderId }: AILearningProps) {
               boxShadow: '0 4px 16px rgba(248, 113, 113, 0.1)'
             }}>
               <div className="flex items-center gap-2 mb-3">
-                <span className="text-2xl">📉</span>
+                <TrendingDown className="w-6 h-6" style={{ color: '#F87171' }} />
                 <span className="text-sm font-semibold" style={{ color: '#FCA5A5' }}>{t('worstPerformer', language)}</span>
               </div>
               <div className="text-3xl font-bold mono mb-1" style={{ color: '#F87171' }}>
@@ -428,7 +437,7 @@ export default function AILearning({ traderId }: AILearningProps) {
               backdropFilter: 'blur(10px)'
             }}>
               <h3 className="font-bold flex items-center gap-2 text-lg" style={{ color: '#E0E7FF' }}>
-                📊 {t('symbolPerformance', language)}
+                <BarChart3 className="w-5 h-5" /> {t('symbolPerformance', language)}
               </h3>
             </div>
             <div className="overflow-y-auto" style={{ maxHeight: 'calc(100vh - 280px)' }}>
@@ -488,7 +497,7 @@ export default function AILearning({ traderId }: AILearningProps) {
             backdropFilter: 'blur(10px)'
           }}>
             <div className="flex items-center gap-2">
-              <span className="text-2xl">📜</span>
+              <ScrollText className="w-6 h-6" style={{ color: '#FCD34D' }} />
               <div>
                 <h3 className="font-bold text-lg" style={{ color: '#FCD34D' }}>{t('tradeHistory', language)}</h3>
                 <p className="text-xs" style={{ color: '#94A3B8' }}>
@@ -631,7 +640,9 @@ export default function AILearning({ traderId }: AILearningProps) {
               })
             ) : (
               <div className="p-6 text-center">
-                <div className="text-4xl mb-2 opacity-50">📜</div>
+                <div className="mb-2 flex justify-center opacity-50">
+                  <ScrollText className="w-10 h-10" style={{ color: '#94A3B8' }} />
+                </div>
                 <div style={{ color: '#94A3B8' }}>{t('noCompletedTrades', language)}</div>
               </div>
             )}
@@ -646,11 +657,11 @@ export default function AILearning({ traderId }: AILearningProps) {
         boxShadow: '0 4px 16px rgba(240, 185, 11, 0.1)'
       }}>
         <div className="flex items-start gap-4">
-          <div className="w-10 h-10 rounded-lg flex items-center justify-center text-xl flex-shrink-0" style={{
+          <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style={{
             background: 'rgba(240, 185, 11, 0.2)',
             border: '1px solid rgba(240, 185, 11, 0.3)'
           }}>
-            💡
+            <Lightbulb className="w-5 h-5" style={{ color: '#FCD34D' }} />
           </div>
           <div>
             <h3 className="font-bold mb-3 text-base" style={{ color: '#FCD34D' }}>{t('howAILearns', language)}</h3>
diff --git a/web/src/components/AITradersPage.tsx b/web/src/components/AITradersPage.tsx
index d76d45f7..25763608 100644
--- a/web/src/components/AITradersPage.tsx
+++ b/web/src/components/AITradersPage.tsx
@@ -6,6 +6,7 @@ import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
 import { getExchangeIcon } from './ExchangeIcons';
 import { getModelIcon } from './ModelIcons';
+import { Bot, Brain, Landmark, BarChart3, Trash2, Plus, Users, AlertTriangle } from 'lucide-react';
 
 // 获取友好的AI模型名称
 function getModelDisplayName(modelId: string): string {
@@ -360,11 +361,11 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
-          <div className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl" style={{
+          <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{
             background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
             boxShadow: '0 4px 14px rgba(240, 185, 11, 0.4)'
           }}>
-            🤖
+            <Bot className="w-6 h-6" style={{ color: '#000' }} />
           </div>
           <div>
             <h1 className="text-2xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
@@ -385,38 +386,41 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
         <div className="flex gap-3">
           <button
             onClick={handleAddModel}
-            className="px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
-            style={{ 
-              background: '#2B3139', 
-              color: '#EAECEF', 
-              border: '1px solid #474D57' 
+            className="px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 flex items-center gap-2"
+            style={{
+              background: '#2B3139',
+              color: '#EAECEF',
+              border: '1px solid #474D57'
             }}
           >
-            ➕ {t('aiModels', language)}
+            <Plus className="w-4 h-4" />
+            {t('aiModels', language)}
           </button>
-          
+
           <button
             onClick={handleAddExchange}
-            className="px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
-            style={{ 
-              background: '#2B3139', 
-              color: '#EAECEF', 
-              border: '1px solid #474D57' 
+            className="px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 flex items-center gap-2"
+            style={{
+              background: '#2B3139',
+              color: '#EAECEF',
+              border: '1px solid #474D57'
             }}
           >
-            ➕ {t('exchanges', language)}
+            <Plus className="w-4 h-4" />
+            {t('exchanges', language)}
           </button>
-          
+
           <button
             onClick={() => setShowCreateModal(true)}
             disabled={configuredModels.length === 0 || configuredExchanges.length === 0}
-            className="px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
-            style={{ 
-              background: (configuredModels.length > 0 && configuredExchanges.length > 0) ? '#F0B90B' : '#2B3139', 
-              color: (configuredModels.length > 0 && configuredExchanges.length > 0) ? '#000' : '#848E9C' 
+            className="px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+            style={{
+              background: (configuredModels.length > 0 && configuredExchanges.length > 0) ? '#F0B90B' : '#2B3139',
+              color: (configuredModels.length > 0 && configuredExchanges.length > 0) ? '#000' : '#848E9C'
             }}
           >
-            ➕ {t('createTrader', language)}
+            <Plus className="w-4 h-4" />
+            {t('createTrader', language)}
           </button>
         </div>
       </div>
@@ -425,8 +429,9 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* AI Models */}
         <div className="binance-card p-4">
-          <h3 className="text-lg font-semibold mb-3" style={{ color: '#EAECEF' }}>
-            🧠 {t('aiModels', language)}
+          <h3 className="text-lg font-semibold mb-3 flex items-center gap-2" style={{ color: '#EAECEF' }}>
+            <Brain className="w-5 h-5" style={{ color: '#60a5fa' }} />
+            {t('aiModels', language)}
           </h3>
           <div className="space-y-3">
             {configuredModels.map(model => {
@@ -465,7 +470,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
             })}
             {configuredModels.length === 0 && (
               <div className="text-center py-8" style={{ color: '#848E9C' }}>
-                <div className="text-2xl mb-2">🧠</div>
+                <Brain className="w-12 h-12 mx-auto mb-2 opacity-50" />
                 <div className="text-sm">暂无已配置的AI模型</div>
               </div>
             )}
@@ -474,8 +479,9 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
 
         {/* Exchanges */}
         <div className="binance-card p-4">
-          <h3 className="text-lg font-semibold mb-3" style={{ color: '#EAECEF' }}>
-            🏦 {t('exchanges', language)}
+          <h3 className="text-lg font-semibold mb-3 flex items-center gap-2" style={{ color: '#EAECEF' }}>
+            <Landmark className="w-5 h-5" style={{ color: '#F0B90B' }} />
+            {t('exchanges', language)}
           </h3>
           <div className="space-y-3">
             {configuredExchanges.map(exchange => {
@@ -506,7 +512,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
             })}
             {configuredExchanges.length === 0 && (
               <div className="text-center py-8" style={{ color: '#848E9C' }}>
-                <div className="text-2xl mb-2">🏦</div>
+                <Landmark className="w-12 h-12 mx-auto mb-2 opacity-50" />
                 <div className="text-sm">暂无已配置的交易所</div>
               </div>
             )}
@@ -518,23 +524,24 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
       <div className="binance-card p-6">
         <div className="flex items-center justify-between mb-5">
           <h2 className="text-xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
-            👥 {t('currentTraders', language)}
+            <Users className="w-6 h-6" style={{ color: '#F0B90B' }} />
+            {t('currentTraders', language)}
           </h2>
         </div>
 
         {traders && traders.length > 0 ? (
           <div className="space-y-4">
             {traders.map(trader => (
-              <div key={trader.trader_id} 
+              <div key={trader.trader_id}
                    className="flex items-center justify-between p-4 rounded transition-all hover:translate-y-[-1px]"
                    style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
                 <div className="flex items-center gap-4">
-                  <div className="w-12 h-12 rounded-full flex items-center justify-center text-xl"
-                       style={{ 
+                  <div className="w-12 h-12 rounded-full flex items-center justify-center"
+                       style={{
                          background: trader.ai_model.includes('deepseek') ? '#60a5fa' : '#c084fc',
                          color: '#fff'
                        }}>
-                    🤖
+                    <Bot className="w-6 h-6" />
                   </div>
                   <div>
                     <div className="font-bold text-lg" style={{ color: '#EAECEF' }}>
@@ -566,29 +573,30 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
                   <div className="flex gap-2">
                     <button
                       onClick={() => onTraderSelect?.(trader.trader_id)}
-                      className="px-3 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
+                      className="px-3 py-2 rounded text-sm font-semibold transition-all hover:scale-105 flex items-center gap-1"
                       style={{ background: 'rgba(99, 102, 241, 0.1)', color: '#6366F1' }}
                     >
-                      📊 查看
+                      <BarChart3 className="w-4 h-4" />
+                      查看
                     </button>
-                    
+
                     <button
                       onClick={() => handleToggleTrader(trader.trader_id, trader.is_running || false)}
                       className="px-3 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
-                      style={trader.is_running 
+                      style={trader.is_running
                         ? { background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }
                         : { background: 'rgba(14, 203, 129, 0.1)', color: '#0ECB81' }
                       }
                     >
                       {trader.is_running ? t('stop', language) : t('start', language)}
                     </button>
-                    
+
                     <button
                       onClick={() => handleDeleteTrader(trader.trader_id)}
                       className="px-3 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
                       style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}
                     >
-                      🗑️
+                      <Trash2 className="w-4 h-4" />
                     </button>
                   </div>
                 </div>
@@ -597,7 +605,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
           </div>
         ) : (
           <div className="text-center py-16" style={{ color: '#848E9C' }}>
-            <div className="text-6xl mb-4 opacity-50">🤖</div>
+            <Bot className="w-24 h-24 mx-auto mb-4 opacity-50" />
             <div className="text-lg font-semibold mb-2">{t('noTraders', language)}</div>
             <div className="text-sm mb-4">{t('createFirstTrader', language)}</div>
             {(configuredModels.length === 0 || configuredExchanges.length === 0) && (
@@ -855,11 +863,12 @@ function CreateTraderModal({
                       style={{ accentColor: '#F6465D' }}
                     />
                     <div>
-                      <div className="text-sm font-semibold" style={{ color: '#F6465D' }}>
+                      <div className="text-sm font-semibold flex items-center gap-2" style={{ color: '#F6465D' }}>
+                        <AlertTriangle className="w-4 h-4" />
                         覆盖基础交易策略
                       </div>
                       <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
-                        ⚠️ 警告：勾选后将完全使用您的自定义策略，不再使用系统默认的风控和交易逻辑。
+                        警告：勾选后将完全使用您的自定义策略，不再使用系统默认的风控和交易逻辑。
                         这可能导致交易风险增加。仅在您完全理解交易逻辑时使用此选项。
                       </div>
                     </div>
@@ -950,7 +959,7 @@ function ModelConfigModal({
               style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}
               title="删除配置"
             >
-              🗑️
+              <Trash2 className="w-4 h-4" />
             </button>
           )}
         </div>
@@ -1122,7 +1131,7 @@ function ExchangeConfigModal({
               style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}
               title="删除配置"
             >
-              🗑️
+              <Trash2 className="w-4 h-4" />
             </button>
           )}
         </div>
diff --git a/web/src/components/ComparisonChart.tsx b/web/src/components/ComparisonChart.tsx
index b333c04f..b0dec3f0 100644
--- a/web/src/components/ComparisonChart.tsx
+++ b/web/src/components/ComparisonChart.tsx
@@ -14,6 +14,7 @@ import useSWR from 'swr';
 import { api } from '../lib/api';
 import type { CompetitionTraderData } from '../types';
 import { getTraderColor } from '../utils/traderColors';
+import { BarChart3 } from 'lucide-react';
 
 interface ComparisonChartProps {
   traders: CompetitionTraderData[];
@@ -133,7 +134,9 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
   if (combinedData.length === 0) {
     return (
       <div className="text-center py-16" style={{ color: '#848E9C' }}>
-        <div className="text-6xl mb-4 opacity-50">📊</div>
+        <div className="mb-4 flex justify-center opacity-50">
+          <BarChart3 className="w-16 h-16" />
+        </div>
         <div className="text-lg font-semibold mb-2">暂无历史数据</div>
         <div className="text-sm">运行几个周期后将显示对比曲线</div>
       </div>
diff --git a/web/src/components/CompetitionPage.tsx b/web/src/components/CompetitionPage.tsx
index 2a638b83..59e9be88 100644
--- a/web/src/components/CompetitionPage.tsx
+++ b/web/src/components/CompetitionPage.tsx
@@ -3,6 +3,7 @@ import { api } from '../lib/api';
 import type { CompetitionData } from '../types';
 import { ComparisonChart } from './ComparisonChart';
 import { getTraderColor } from '../utils/traderColors';
+import { Trophy, Medal, Circle, CircleDot } from 'lucide-react';
 
 export function CompetitionPage() {
   const { data: competition } = useSWR<CompetitionData>(
@@ -51,11 +52,11 @@ export function CompetitionPage() {
       {/* Competition Header - 精简版 */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
-          <div className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl" style={{
+          <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{
             background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
             boxShadow: '0 4px 14px rgba(240, 185, 11, 0.4)'
           }}>
-            🏆
+            <Trophy className="w-7 h-7" style={{ color: '#000' }} />
           </div>
           <div>
             <h1 className="text-2xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
@@ -121,8 +122,12 @@ export function CompetitionPage() {
                   <div className="flex items-center justify-between">
                     {/* Rank & Name */}
                     <div className="flex items-center gap-3">
-                      <div className="text-2xl w-6">
-                        {index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉'}
+                      <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{
+                        background: index === 0 ? 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)' :
+                                   index === 1 ? 'linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%)' :
+                                   'linear-gradient(135deg, #CD7F32 0%, #8B4513 100%)'
+                      }}>
+                        <Medal className="w-5 h-5" style={{ color: '#000' }} />
                       </div>
                       <div>
                         <div className="font-bold text-sm" style={{ color: '#EAECEF' }}>{trader.trader_name}</div>
@@ -171,13 +176,17 @@ export function CompetitionPage() {
                       {/* Status */}
                       <div>
                         <div
-                          className="px-2 py-1 rounded text-xs font-bold"
+                          className="px-2 py-1 rounded text-xs font-bold flex items-center justify-center"
                           style={trader.is_running
                             ? { background: 'rgba(14, 203, 129, 0.1)', color: '#0ECB81' }
                             : { background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }
                           }
                         >
-                          {trader.is_running ? '●' : '○'}
+                          {trader.is_running ? (
+                            <CircleDot className="w-3 h-3" />
+                          ) : (
+                            <Circle className="w-3 h-3" />
+                          )}
                         </div>
                       </div>
                     </div>
diff --git a/web/src/components/EquityChart.tsx b/web/src/components/EquityChart.tsx
index b8b846cf..bfa89617 100644
--- a/web/src/components/EquityChart.tsx
+++ b/web/src/components/EquityChart.tsx
@@ -13,6 +13,7 @@ import useSWR from 'swr';
 import { api } from '../lib/api';
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
+import { AlertTriangle, BarChart3, DollarSign, Percent, TrendingUp as ArrowUp, TrendingDown as ArrowDown } from 'lucide-react'
 
 interface EquityPoint {
   timestamp: string;
@@ -52,16 +53,26 @@ export function EquityChart({ traderId }: EquityChartProps) {
 
   if (error) {
     return (
-      <div className="binance-card p-6">
-        <div className="flex items-center gap-3 p-4 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', border: '1px solid rgba(246, 70, 93, 0.2)' }}>
-          <div className="text-2xl">⚠️</div>
+      <div className='binance-card p-6'>
+        <div
+          className='flex items-center gap-3 p-4 rounded'
+          style={{
+            background: 'rgba(246, 70, 93, 0.1)',
+            border: '1px solid rgba(246, 70, 93, 0.2)',
+          }}
+        >
+          <AlertTriangle className='w-6 h-6' style={{ color: '#F6465D' }} />
           <div>
-            <div className="font-semibold" style={{ color: '#F6465D' }}>{t('loadingError', language)}</div>
-            <div className="text-sm" style={{ color: '#848E9C' }}>{error.message}</div>
+            <div className='font-semibold' style={{ color: '#F6465D' }}>
+              {t('loadingError', language)}
+            </div>
+            <div className='text-sm' style={{ color: '#848E9C' }}>
+              {error.message}
+            </div>
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   // 过滤掉无效数据：total_equity为0或小于1的数据点（API失败导致）
@@ -69,15 +80,21 @@ export function EquityChart({ traderId }: EquityChartProps) {
 
   if (!validHistory || validHistory.length === 0) {
     return (
-      <div className="binance-card p-6">
-        <h3 className="text-lg font-semibold mb-6" style={{ color: '#EAECEF' }}>{t('accountEquityCurve', language)}</h3>
-        <div className="text-center py-16" style={{ color: '#848E9C' }}>
-          <div className="text-6xl mb-4 opacity-50">📊</div>
-          <div className="text-lg font-semibold mb-2">{t('noHistoricalData', language)}</div>
-          <div className="text-sm">{t('dataWillAppear', language)}</div>
+      <div className='binance-card p-6'>
+        <h3 className='text-lg font-semibold mb-6' style={{ color: '#EAECEF' }}>
+          {t('accountEquityCurve', language)}
+        </h3>
+        <div className='text-center py-16' style={{ color: '#848E9C' }}>
+          <div className='mb-4 flex justify-center opacity-50'>
+            <BarChart3 className='w-16 h-16' />
+          </div>
+          <div className='text-lg font-semibold mb-2'>
+            {t('noHistoricalData', language)}
+          </div>
+          <div className='text-sm'>{t('dataWillAppear', language)}</div>
         </div>
       </div>
-    );
+    )
   }
 
   // 限制显示最近的数据点（性能优化）
@@ -161,142 +178,238 @@ export function EquityChart({ traderId }: EquityChartProps) {
   };
 
   return (
-    <div className="binance-card p-3 sm:p-5 animate-fade-in">
+    <div className='binance-card p-3 sm:p-5 animate-fade-in'>
       {/* Header */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
-        <div className="flex-1">
-          <h3 className="text-base sm:text-lg font-bold mb-2" style={{ color: '#EAECEF' }}>{t('accountEquityCurve', language)}</h3>
-          <div className="flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4">
-            <span className="text-2xl sm:text-3xl font-bold mono" style={{ color: '#EAECEF' }}>
+      <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4'>
+        <div className='flex-1'>
+          <h3
+            className='text-base sm:text-lg font-bold mb-2'
+            style={{ color: '#EAECEF' }}
+          >
+            {t('accountEquityCurve', language)}
+          </h3>
+          <div className='flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4'>
+            <span
+              className='text-2xl sm:text-3xl font-bold mono'
+              style={{ color: '#EAECEF' }}
+            >
               {account?.total_equity.toFixed(2) || '0.00'}
-              <span className="text-base sm:text-lg ml-1" style={{ color: '#848E9C' }}>USDT</span>
-            </span>
-            <div className="flex items-center gap-2 flex-wrap">
               <span
-                className="text-sm sm:text-lg font-bold mono px-2 sm:px-3 py-1 rounded"
+                className='text-base sm:text-lg ml-1'
+                style={{ color: '#848E9C' }}
+              >
+                USDT
+              </span>
+            </span>
+            <div className='flex items-center gap-2 flex-wrap'>
+              <span
+                className='text-sm sm:text-lg font-bold mono px-2 sm:px-3 py-1 rounded flex items-center gap-1'
                 style={{
                   color: isProfit ? '#0ECB81' : '#F6465D',
-                  background: isProfit ? 'rgba(14, 203, 129, 0.1)' : 'rgba(246, 70, 93, 0.1)',
-                  border: `1px solid ${isProfit ? 'rgba(14, 203, 129, 0.2)' : 'rgba(246, 70, 93, 0.2)'}`
+                  background: isProfit
+                    ? 'rgba(14, 203, 129, 0.1)'
+                    : 'rgba(246, 70, 93, 0.1)',
+                  border: `1px solid ${
+                    isProfit
+                      ? 'rgba(14, 203, 129, 0.2)'
+                      : 'rgba(246, 70, 93, 0.2)'
+                  }`,
                 }}
               >
-                {isProfit ? '▲' : '▼'} {isProfit ? '+' : ''}
+                {isProfit ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
+                {isProfit ? '+' : ''}
                 {currentValue.raw_pnl_pct}%
               </span>
-              <span className="text-xs sm:text-sm mono" style={{ color: '#848E9C' }}>
-                ({isProfit ? '+' : ''}{currentValue.raw_pnl.toFixed(2)} USDT)
+              <span
+                className='text-xs sm:text-sm mono'
+                style={{ color: '#848E9C' }}
+              >
+                ({isProfit ? '+' : ''}
+                {currentValue.raw_pnl.toFixed(2)} USDT)
               </span>
             </div>
           </div>
         </div>
 
         {/* Display Mode Toggle */}
-        <div className="flex gap-0.5 sm:gap-1 rounded p-0.5 sm:p-1 self-start sm:self-auto" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
+        <div
+          className='flex gap-0.5 sm:gap-1 rounded p-0.5 sm:p-1 self-start sm:self-auto'
+          style={{ background: '#0B0E11', border: '1px solid #2B3139' }}
+        >
           <button
             onClick={() => setDisplayMode('dollar')}
-            className="px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all"
-            style={displayMode === 'dollar'
-              ? { background: '#F0B90B', color: '#000', boxShadow: '0 2px 8px rgba(240, 185, 11, 0.4)' }
-              : { background: 'transparent', color: '#848E9C' }
+            className='px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all flex items-center gap-1'
+            style={
+              displayMode === 'dollar'
+                ? {
+                    background: '#F0B90B',
+                    color: '#000',
+                    boxShadow: '0 2px 8px rgba(240, 185, 11, 0.4)',
+                  }
+                : { background: 'transparent', color: '#848E9C' }
             }
           >
-            💵 USDT
+            <DollarSign className='w-4 h-4' /> USDT
           </button>
           <button
             onClick={() => setDisplayMode('percent')}
-            className="px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all"
-            style={displayMode === 'percent'
-              ? { background: '#F0B90B', color: '#000', boxShadow: '0 2px 8px rgba(240, 185, 11, 0.4)' }
-              : { background: 'transparent', color: '#848E9C' }
+            className='px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all flex items-center gap-1'
+            style={
+              displayMode === 'percent'
+                ? {
+                    background: '#F0B90B',
+                    color: '#000',
+                    boxShadow: '0 2px 8px rgba(240, 185, 11, 0.4)',
+                  }
+                : { background: 'transparent', color: '#848E9C' }
             }
           >
-            📊 %
+            <Percent className='w-4 h-4' />
           </button>
         </div>
       </div>
 
       {/* Chart */}
-      <div className="my-2" style={{ borderRadius: '8px', overflow: 'hidden' }}>
-        <ResponsiveContainer width="100%" height={280}>
-        <LineChart data={chartData} margin={{ top: 10, right: 20, left: 5, bottom: 30 }}>
-          <defs>
-            <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor="#F0B90B" stopOpacity={0.8} />
-              <stop offset="95%" stopColor="#FCD535" stopOpacity={0.2} />
-            </linearGradient>
-          </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="#2B3139" />
-          <XAxis
-            dataKey="time"
-            stroke="#5E6673"
-            tick={{ fill: '#848E9C', fontSize: 11 }}
-            tickLine={{ stroke: '#2B3139' }}
-            interval={Math.floor(chartData.length / 10)}
-            angle={-15}
-            textAnchor="end"
-            height={60}
-          />
-          <YAxis
-            stroke="#5E6673"
-            tick={{ fill: '#848E9C', fontSize: 12 }}
-            tickLine={{ stroke: '#2B3139' }}
-            domain={calculateYDomain()}
-            tickFormatter={(value) =>
-              displayMode === 'dollar' ? `$${value.toFixed(0)}` : `${value}%`
-            }
-          />
-          <Tooltip content={<CustomTooltip />} />
-          <ReferenceLine
-            y={displayMode === 'dollar' ? initialBalance : 0}
-            stroke="#474D57"
-            strokeDasharray="3 3"
-            label={{
-              value: displayMode === 'dollar' ? t('initialBalance', language).split(' ')[0] : '0%',
-              fill: '#848E9C',
-              fontSize: 12,
-            }}
-          />
-          <Line
-            type="natural"
-            dataKey="value"
-            stroke="url(#colorGradient)"
-            strokeWidth={3}
-            dot={chartData.length > 50 ? false : { fill: '#F0B90B', r: 3 }}
-            activeDot={{ r: 6, fill: '#FCD535', stroke: '#F0B90B', strokeWidth: 2 }}
-            connectNulls={true}
-          />
-        </LineChart>
-      </ResponsiveContainer>
+      <div className='my-2' style={{ borderRadius: '8px', overflow: 'hidden' }}>
+        <ResponsiveContainer width='100%' height={280}>
+          <LineChart
+            data={chartData}
+            margin={{ top: 10, right: 20, left: 5, bottom: 30 }}
+          >
+            <defs>
+              <linearGradient id='colorGradient' x1='0' y1='0' x2='0' y2='1'>
+                <stop offset='5%' stopColor='#F0B90B' stopOpacity={0.8} />
+                <stop offset='95%' stopColor='#FCD535' stopOpacity={0.2} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray='3 3' stroke='#2B3139' />
+            <XAxis
+              dataKey='time'
+              stroke='#5E6673'
+              tick={{ fill: '#848E9C', fontSize: 11 }}
+              tickLine={{ stroke: '#2B3139' }}
+              interval={Math.floor(chartData.length / 10)}
+              angle={-15}
+              textAnchor='end'
+              height={60}
+            />
+            <YAxis
+              stroke='#5E6673'
+              tick={{ fill: '#848E9C', fontSize: 12 }}
+              tickLine={{ stroke: '#2B3139' }}
+              domain={calculateYDomain()}
+              tickFormatter={(value) =>
+                displayMode === 'dollar' ? `$${value.toFixed(0)}` : `${value}%`
+              }
+            />
+            <Tooltip content={<CustomTooltip />} />
+            <ReferenceLine
+              y={displayMode === 'dollar' ? initialBalance : 0}
+              stroke='#474D57'
+              strokeDasharray='3 3'
+              label={{
+                value:
+                  displayMode === 'dollar'
+                    ? t('initialBalance', language).split(' ')[0]
+                    : '0%',
+                fill: '#848E9C',
+                fontSize: 12,
+              }}
+            />
+            <Line
+              type='natural'
+              dataKey='value'
+              stroke='url(#colorGradient)'
+              strokeWidth={3}
+              dot={chartData.length > 50 ? false : { fill: '#F0B90B', r: 3 }}
+              activeDot={{
+                r: 6,
+                fill: '#FCD535',
+                stroke: '#F0B90B',
+                strokeWidth: 2,
+              }}
+              connectNulls={true}
+            />
+          </LineChart>
+        </ResponsiveContainer>
       </div>
 
       {/* Footer Stats */}
-      <div className="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 pt-3" style={{ borderTop: '1px solid #2B3139' }}>
-        <div className="p-2 rounded transition-all hover:bg-opacity-50" style={{ background: 'rgba(240, 185, 11, 0.05)' }}>
-          <div className="text-xs mb-1 uppercase tracking-wider" style={{ color: '#848E9C' }}>{t('initialBalance', language)}</div>
-          <div className="text-xs sm:text-sm font-bold mono" style={{ color: '#EAECEF' }}>
+      <div
+        className='mt-3 grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 pt-3'
+        style={{ borderTop: '1px solid #2B3139' }}
+      >
+        <div
+          className='p-2 rounded transition-all hover:bg-opacity-50'
+          style={{ background: 'rgba(240, 185, 11, 0.05)' }}
+        >
+          <div
+            className='text-xs mb-1 uppercase tracking-wider'
+            style={{ color: '#848E9C' }}
+          >
+            {t('initialBalance', language)}
+          </div>
+          <div
+            className='text-xs sm:text-sm font-bold mono'
+            style={{ color: '#EAECEF' }}
+          >
             {initialBalance.toFixed(2)} USDT
           </div>
         </div>
-        <div className="p-2 rounded transition-all hover:bg-opacity-50" style={{ background: 'rgba(240, 185, 11, 0.05)' }}>
-          <div className="text-xs mb-1 uppercase tracking-wider" style={{ color: '#848E9C' }}>{t('currentEquity', language)}</div>
-          <div className="text-xs sm:text-sm font-bold mono" style={{ color: '#EAECEF' }}>
+        <div
+          className='p-2 rounded transition-all hover:bg-opacity-50'
+          style={{ background: 'rgba(240, 185, 11, 0.05)' }}
+        >
+          <div
+            className='text-xs mb-1 uppercase tracking-wider'
+            style={{ color: '#848E9C' }}
+          >
+            {t('currentEquity', language)}
+          </div>
+          <div
+            className='text-xs sm:text-sm font-bold mono'
+            style={{ color: '#EAECEF' }}
+          >
             {currentValue.raw_equity.toFixed(2)} USDT
           </div>
         </div>
-        <div className="p-2 rounded transition-all hover:bg-opacity-50" style={{ background: 'rgba(240, 185, 11, 0.05)' }}>
-          <div className="text-xs mb-1 uppercase tracking-wider" style={{ color: '#848E9C' }}>{t('historicalCycles', language)}</div>
-          <div className="text-xs sm:text-sm font-bold mono" style={{ color: '#EAECEF' }}>{validHistory.length} {t('cycles', language)}</div>
+        <div
+          className='p-2 rounded transition-all hover:bg-opacity-50'
+          style={{ background: 'rgba(240, 185, 11, 0.05)' }}
+        >
+          <div
+            className='text-xs mb-1 uppercase tracking-wider'
+            style={{ color: '#848E9C' }}
+          >
+            {t('historicalCycles', language)}
+          </div>
+          <div
+            className='text-xs sm:text-sm font-bold mono'
+            style={{ color: '#EAECEF' }}
+          >
+            {validHistory.length} {t('cycles', language)}
+          </div>
         </div>
-        <div className="p-2 rounded transition-all hover:bg-opacity-50" style={{ background: 'rgba(240, 185, 11, 0.05)' }}>
-          <div className="text-xs mb-1 uppercase tracking-wider" style={{ color: '#848E9C' }}>{t('displayRange', language)}</div>
-          <div className="text-xs sm:text-sm font-bold mono" style={{ color: '#EAECEF' }}>
+        <div
+          className='p-2 rounded transition-all hover:bg-opacity-50'
+          style={{ background: 'rgba(240, 185, 11, 0.05)' }}
+        >
+          <div
+            className='text-xs mb-1 uppercase tracking-wider'
+            style={{ color: '#848E9C' }}
+          >
+            {t('displayRange', language)}
+          </div>
+          <div
+            className='text-xs sm:text-sm font-bold mono'
+            style={{ color: '#EAECEF' }}
+          >
             {validHistory.length > MAX_DISPLAY_POINTS
               ? `${t('recent', language)} ${MAX_DISPLAY_POINTS}`
-              : t('allData', language)
-            }
+              : t('allData', language)}
           </div>
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 3fb1c693..af141d85 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -14,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 text-xl" 
-                 style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-              ⚡
+            <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 bf4dd9e3..8923ebe2 100644
--- a/web/src/components/LoginPage.tsx
+++ b/web/src/components/LoginPage.tsx
@@ -3,6 +3,7 @@ import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
 import { Header } from './Header';
+import { Smartphone } from 'lucide-react';
 
 export function LoginPage() {
   const { language } = useLanguage();
@@ -57,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 text-3xl"
-                 style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-              ⚡
+            <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)}
@@ -121,7 +121,9 @@ export function LoginPage() {
           ) : (
             <form onSubmit={handleOTPVerify} className="space-y-4">
               <div className="text-center mb-4">
-                <div className="text-4xl mb-2">📱</div>
+                <div className="mb-2 flex justify-center">
+                  <Smartphone className="w-10 h-10" style={{ color: '#F0B90B' }} />
+                </div>
                 <p className="text-sm" style={{ color: '#848E9C' }}>
                   {t('scanQRCodeInstructions', language)}<br />
                   {t('enterOTPCode', language)}
diff --git a/web/src/components/RegisterPage.tsx b/web/src/components/RegisterPage.tsx
index 7d3d2284..68139e42 100644
--- a/web/src/components/RegisterPage.tsx
+++ b/web/src/components/RegisterPage.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
+import { Smartphone, Lock } from 'lucide-react';
 
 export function RegisterPage() {
   const { language } = useLanguage();
@@ -75,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 text-3xl"
-               style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-            ⚡
+          <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)}
@@ -158,7 +158,9 @@ export function RegisterPage() {
           {step === 'setup-otp' && (
             <div className="space-y-4">
               <div className="text-center">
-                <div className="text-4xl mb-2">📱</div>
+                <div className="mb-2 flex justify-center">
+                  <Smartphone className="w-10 h-10" style={{ color: '#F0B90B' }} />
+                </div>
                 <h3 className="text-lg font-semibold mb-2" style={{ color: '#EAECEF' }}>
                   {t('setupTwoFactor', language)}
                 </h3>
@@ -236,7 +238,9 @@ export function RegisterPage() {
           {step === 'verify-otp' && (
             <form onSubmit={handleOTPVerify} className="space-y-4">
               <div className="text-center mb-4">
-                <div className="text-4xl mb-2">🔐</div>
+                <div className="mb-2 flex justify-center">
+                  <Lock className="w-10 h-10" style={{ color: '#F0B90B' }} />
+                </div>
                 <p className="text-sm" style={{ color: '#848E9C' }}>
                   {t('enterOTPCode', language)}<br />
                   {t('completeRegistrationSubtitle', language)}