diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1d30dd3..5b95156 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "axios": "^1.6.0",
+        "lucide-react": "^0.562.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.20.0",
@@ -1903,6 +1904,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.562.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2c89ecc..f08366f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,11 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.0",
+    "lucide-react": "^0.562.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "axios": "^1.6.0",
-    "recharts": "^2.10.0",
-    "react-router-dom": "^6.20.0"
+    "react-router-dom": "^6.20.0",
+    "recharts": "^2.10.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.0",
diff --git a/frontend/src/components/Recommendations.css b/frontend/src/components/Recommendations.css
index 4edf196..357bf69 100644
--- a/frontend/src/components/Recommendations.css
+++ b/frontend/src/components/Recommendations.css
@@ -362,6 +362,42 @@
   line-height: 1.2;
 }
 
+.ug-direction-icon {
+  flex: 0 0 auto;
+  margin-right: 2px;
+  opacity: 0.95;
+}
+
+.ug-direction-icon.buy {
+  color: rgba(255, 255, 255, 0.95);
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
+}
+
+.ug-direction-icon.sell {
+  color: rgba(255, 255, 255, 0.95);
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
+}
+
+.ug-pill.entry {
+  background: rgba(46, 204, 113, 0.22);
+  border-color: rgba(46, 204, 113, 0.35);
+}
+
+.ug-pill.stop {
+  background: rgba(231, 76, 60, 0.22);
+  border-color: rgba(231, 76, 60, 0.35);
+}
+
+.ug-pill.tp1 {
+  background: rgba(241, 196, 15, 0.22);
+  border-color: rgba(241, 196, 15, 0.35);
+}
+
+.ug-pill.tp2 {
+  background: rgba(52, 152, 219, 0.22);
+  border-color: rgba(52, 152, 219, 0.35);
+}
+
 .collapsible-user-guide .cug-body {
   position: relative;
 }
diff --git a/frontend/src/components/Recommendations.jsx b/frontend/src/components/Recommendations.jsx
index c9e99ee..57b53f5 100644
--- a/frontend/src/components/Recommendations.jsx
+++ b/frontend/src/components/Recommendations.jsx
@@ -2,6 +2,10 @@ import React, { useState, useEffect } from 'react'
 import { api } from '../services/api'
 import './Recommendations.css'
 import CollapsibleUserGuide from './CollapsibleUserGuide'
+import { TrendingDown, TrendingUp } from 'lucide-react'
+
+
+
 
 function Recommendations() {
   const [recommendations, setRecommendations] = useState([])
@@ -403,17 +407,21 @@ function Recommendations() {
                     <div className="user-guide-head">
                       <strong>📋 操作计划</strong>
                       <div className="user-guide-prices">
-                        <Icon upArrow={rec.direction === 'BUY'} downArrow={rec.direction === 'SELL'} />
-                        <span className="ug-pill bg-green-500">
+                        {rec.direction === 'BUY' ? (
+                          <TrendingUp className="ug-direction-icon buy" aria-label="做多" size={18} />
+                        ) : (
+                          <TrendingDown className="ug-direction-icon sell" aria-label="做空" size={18} />
+                        )}
+                        <span className="ug-pill entry">
                           入场 {fmtPrice(rec.suggested_limit_price ?? rec.planned_entry_price)} USDT
                         </span>
-                        <span className="ug-pill bg-red-500">
+                        <span className="ug-pill stop">
                           止损 {fmtPrice(rec.suggested_stop_loss)} USDT
                         </span>
-                        <span className="ug-pill bg-yellow-500">
+                        <span className="ug-pill tp1">
                           目标1 {fmtPrice(rec.suggested_take_profit_1)} USDT
                         </span>
-                        <span className="ug-pill bg-blue-500">
+                        <span className="ug-pill tp2">
                           目标2 {fmtPrice(rec.suggested_take_profit_2)} USDT
                         </span>
                       </div>