diff --git a/client/src/components/ControlPanel.jsx b/client/src/components/ControlPanel.jsx
index 6ed0763..1dd54e8 100644
--- a/client/src/components/ControlPanel.jsx
+++ b/client/src/components/ControlPanel.jsx
@@ -9,22 +9,22 @@ function TurtleCard({ turtle, isSelected, onSelect }) {
   const displayName = turtle.label || `Turtle ${turtle.turtleID}`;
 
   const modeColors = {
-    mining: '#4ade80',
-    exploring: '#60a5fa',
-    returning: '#f59e0b',
-    goHome: '#f59e0b',
-    idle: '#9ca3af',
-    manual: '#a78bfa',
-    refueling: '#ef4444',
-    farming: '#22c55e',
-    dumpInventory: '#a855f7',
-    dumping: '#a855f7',
-    moving: '#06b6d4',
-    scan: '#8b5cf6',
-    extraction: '#f97316',
-    building: '#14b8a6',
-    autocraft: '#ec4899',
-    unknown: '#6b7280'
+    mining: '#55ff55',
+    exploring: '#55ffff',
+    returning: '#ffaa00',
+    goHome: '#ffaa00',
+    idle: '#aaaaaa',
+    manual: '#ff55ff',
+    refueling: '#ff5555',
+    farming: '#55ff55',
+    dumpInventory: '#aa00aa',
+    dumping: '#aa00aa',
+    moving: '#55ffff',
+    scan: '#5555ff',
+    extraction: '#ffaa00',
+    building: '#00aaaa',
+    autocraft: '#ff55ff',
+    unknown: '#555555'
   };
 
   return (
@@ -132,7 +132,7 @@ function TurtleDetails({ turtle }) {
 
   return (
     <div className="turtle-details">
-      <h2>{displayName} <span style={{color: '#6b7280', fontSize: '0.8em'}}>#{turtle.turtleID}</span></h2>
+      <h2>{displayName} <span style={{color: '#aaaaaa', fontSize: '0.8em'}}>#{turtle.turtleID}</span></h2>
       
       {/* Rename + Config bar */}
       <div className="detail-section" style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
@@ -143,7 +143,7 @@ function TurtleDetails({ turtle }) {
           onKeyDown={(e) => e.key === 'Enter' && handleRename()}
           placeholder="Rename turtle..."
           className="rename-input"
-          style={{ flex: 1, minWidth: '120px', padding: '4px 8px', borderRadius: '4px', border: '1px solid #4b5563', background: '#1f2937', color: '#fff' }}
+          style={{ flex: 1, minWidth: '120px', padding: '4px 8px', border: '2px solid #333', background: '#1a1a1a', color: '#e0e0e0' }}
         />
         <button onClick={handleRename} className="command-btn" style={{ padding: '4px 12px' }}>📝 Rename</button>
         <button onClick={() => setShowConfig(!showConfig)} className="command-btn" style={{ padding: '4px 12px' }}>⚙️ Config</button>
@@ -153,12 +153,12 @@ function TurtleDetails({ turtle }) {
 
       {/* Config Modal */}
       {showConfig && (
-        <div className="detail-section" style={{ background: '#1e293b', padding: '12px', borderRadius: '8px', border: '1px solid #334155' }}>
+        <div className="detail-section" style={{ background: '#2c2c2c', padding: '12px', border: '3px solid #1a1a1a' }}>
           <h3>⚙️ Configuration</h3>
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '8px' }}>
             <label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
               <span>Max Distance:</span>
-              <input type="number" value={configValues.maxDistance} onChange={(e) => setConfigValues({...configValues, maxDistance: parseInt(e.target.value)})} style={{ width: '80px', padding: '2px 6px', borderRadius: '4px', border: '1px solid #4b5563', background: '#0f172a', color: '#fff' }} />
+              <input type="number" value={configValues.maxDistance} onChange={(e) => setConfigValues({...configValues, maxDistance: parseInt(e.target.value)})} style={{ width: '80px', padding: '2px 6px', border: '2px solid #333', background: '#1a1a1a', color: '#e0e0e0' }} />
             </label>
             <label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
               <span>Auto Refuel:</span>