diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 6291f08..fe8c0df 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -150,7 +150,7 @@ function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick
       }}>
         {sub && <span style={{ width:1, alignSelf:'stretch', background:'rgba(255,255,255,0.08)', marginRight:3, flexShrink:0 }}/>}
         <span style={{ display:'flex', alignItems:'center', width:18, justifyContent:'center', flexShrink:0 }}>
-          {item.Icon ? <item.Icon size={15} color={ic}/> : <span style={{color:ic,fontSize:13}}>{item.icon}</span>}
+          {item.Icon ? (() => { const I = item.Icon; return <I size={15} color={ic}/>; })() : <span style={{color:ic,fontSize:13}}>{item.icon}</span>}
         </span>
         <span style={{ flex:1, color:ic }}>{item.label}</span>
       </button>
@@ -226,13 +226,18 @@ function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClic
   const [appsOpen, setAppsOpen] = useState(false);
   const NAV_H = 56;
 
-  const MI = ({icon, label, onClick, color='#fff'}) => (
-    <button onClick={onClick} style={{ width:'100%', padding:'11px 20px', background:'transparent',
-      border:'none', display:'flex', alignItems:'center', gap:10, cursor:'pointer' }}>
-      <span style={{fontSize:17, flexShrink:0, width:22, textAlign:'center', display:'inline-block', }}>{icon}</span>
-      <span style={{color, fontFamily:'monospace', fontSize:13}}>{label}</span>
-    </button>
-  );
+  const MI = ({Icon, icon, label, onClick, color='rgba(255,255,255,0.85)'}) => {
+    const Ic = Icon;
+    return (
+      <button onClick={onClick} style={{ width:'100%', padding:'11px 20px', background:'transparent',
+        border:'none', display:'flex', alignItems:'center', gap:12, cursor:'pointer' }}>
+        <span style={{flexShrink:0, width:22, display:'flex', alignItems:'center', justifyContent:'center'}}>
+          {Ic ? <Ic size={18} color={color}/> : <span style={{fontSize:17, color}}>{icon}</span>}
+        </span>
+        <span style={{color, fontFamily:'monospace', fontSize:13}}>{label}</span>
+      </button>
+    );
+  };
 
   const Sheet = ({open, onClose, children}) => !open ? null : (
     <div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)' }}
@@ -305,7 +310,7 @@ function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClic
                     width:8, height:8, borderRadius:'50%', background:'#ffe66d',
                     boxShadow:'0 0 6px #ffe66d', display:'inline-block' }} />
                 )}
-                <item.Icon size={20} color={isActive ? '#4ecdc4' : 'rgba(255,255,255,0.45)'}/>
+                {(() => { const I = item.Icon; return I ? <I size={20} color={isActive ? '#4ecdc4' : 'rgba(255,255,255,0.45)'}/> : null; })()}
                 <span style={{ fontSize:9, fontFamily:'monospace', letterSpacing:0.3,
                   color: isActive ? '#4ecdc4' : 'rgba(255,255,255,0.4)' }}>{item.label}</span>
                 {isActive && !isApps && !isMehr && (