diff --git a/web/src/tabs/HistoryTab.tsx b/web/src/tabs/HistoryTab.tsx
index c51790b..1f41b40 100644
--- a/web/src/tabs/HistoryTab.tsx
+++ b/web/src/tabs/HistoryTab.tsx
@@ -395,7 +395,7 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
     if (loading) {
         return (
             <div className="flex items-center justify-center py-40">
-                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#00ff88]"></div>
+                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[var(--bl-success)]"></div>
             </div>
         );
     }
@@ -414,7 +414,7 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
                         <button
                             onClick={() => setSelectedProfileId('all')}
                             className={`px-6 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${selectedProfileId === 'all'
-                                ? 'bg-[#00ff88] text-black shadow-[0_0_20px_rgba(0,255,136,0.2)]'
+                                ? 'bg-[var(--bl-success)] text-black shadow-[0_0_20px_var(--bl-success-muted)]'
                                 : 'text-gray-400 hover:text-white hover:bg-white/5'
                                 }`}
                         >
@@ -425,7 +425,7 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
                                 key={p.id}
                                 onClick={() => setSelectedProfileId(p.id)}
                                 className={`px-6 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${selectedProfileId === p.id
-                                    ? 'bg-[#00ff88] text-black shadow-[0_0_20px_rgba(0,255,136,0.2)]'
+                                    ? 'bg-[var(--bl-success)] text-black shadow-[0_0_20px_var(--bl-success-muted)]'
                                     : 'text-gray-400 hover:text-white hover:bg-white/5'
                                     }`}
                             >
@@ -455,7 +455,7 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
                     </div>
                     <div className="bg-white/[0.02] border border-white/5 p-6 rounded-2xl flex flex-col gap-1 backdrop-blur-sm">
                         <span className="text-gray-500 text-[10px] font-black uppercase tracking-widest">Win Rate</span>
-                        <span className="text-3xl font-black text-[#00ff88]">{metrics.winRate.toFixed(1)}%</span>
+                        <span className="text-3xl font-black text-[var(--bl-success)]">{metrics.winRate.toFixed(1)}%</span>
                     </div>
                     <div className="bg-white/[0.02] border border-white/5 p-6 rounded-2xl flex flex-col gap-1 backdrop-blur-sm">
                         <span className="text-gray-500 text-[10px] font-black uppercase tracking-widest">Realized P&L</span>
@@ -507,7 +507,7 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
                                 <select
                                     value={selectedProfileId}
                                     onChange={(e) => setSelectedProfileId(e.target.value)}
-                                    className="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] font-semibold text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#00ff88]/40"
+                                    className="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] font-semibold text-gray-200 focus:outline-none focus:ring-2 focus:ring-[var(--bl-focus-ring-muted)]"
                                 >
                                     <option value="all">All Profiles</option>
                                     {profiles.map((profileOption) => (
@@ -523,13 +523,13 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
                                         type="date"
                                         value={historyDateFrom}
                                         onChange={(e) => setHistoryDateFrom(e.target.value)}
-                                        className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#00ff88]/40"
+                                        className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-[var(--bl-focus-ring-muted)]"
                                     />
                                     <input
                                         type="date"
                                         value={historyDateTo}
                                         onChange={(e) => setHistoryDateTo(e.target.value)}
-                                        className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#00ff88]/40"
+                                        className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-[var(--bl-focus-ring-muted)]"
                                     />
                                     <div className="flex items-center gap-2">
                                         <button
diff --git a/web/src/tabs/MarketplaceTab.tsx b/web/src/tabs/MarketplaceTab.tsx
index 114a0f6..ad6ecd7 100644
--- a/web/src/tabs/MarketplaceTab.tsx
+++ b/web/src/tabs/MarketplaceTab.tsx
@@ -75,8 +75,8 @@ export const MarketplaceTab: React.FC<MarketplaceTabProps> = ({ onClone, botStat
                 <Card className="hero-surface">
                   <CardContent style={{ padding: '24px 28px' }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
-                        <div style={{ width: '32px', height: '32px', borderRadius: '10px', background: 'rgba(255,170,0,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                            <TrendingUp size={16} color="#ffaa00" />
+                        <div style={{ width: '32px', height: '32px', borderRadius: '10px', background: 'var(--bl-warning-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                            <TrendingUp size={16} color="var(--bl-warning)" />
                         </div>
                         <div>
                             <div className="section-title">Top Volatile (24h)</div>
@@ -89,7 +89,7 @@ export const MarketplaceTab: React.FC<MarketplaceTabProps> = ({ onClone, botStat
                             return (
                                 <div key={s} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--card-elevated)', borderRadius: '12px', border: '1px solid var(--border)' }}>
                                     <span style={{ fontWeight: 800, fontSize: '12px', color: 'var(--foreground)' }}>{s.split('/')[0]}</span>
-                                    <span style={{ fontSize: '12px', fontWeight: 900, fontFamily: 'monospace', color: change >= 0 ? '#00ff88' : '#ff3366' }}>
+                                    <span style={{ fontSize: '12px', fontWeight: 900, fontFamily: 'monospace', color: change >= 0 ? 'var(--bl-success)' : 'var(--bl-danger)' }}>
                                         {change >= 0 ? '+' : ''}{change.toFixed(2)}%
                                     </span>
                                 </div>