diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 17dcc00..98b6a9b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -153,7 +153,7 @@ function UpdateModal({ data, onClose }) {
           <pre style={{ color:'rgba(255,255,255,0.5)', fontSize:12, fontFamily:'monospace', whiteSpace:'pre-wrap', lineHeight:1.6, margin:0 }}>{r.body}</pre>
         </div>
       ))}
-      <div style={{ color:'rgba(255,255,255,0.25)', fontSize:11, fontFamily:'monospace', marginTop:8, lineHeight:1.8 }}>
+      <div style={{ color:'rgba(255,255,255,0.55)', fontSize:11, fontFamily:'monospace', marginTop:8, lineHeight:1.8 }}>
         Update: <code style={{ color:'#4ecdc4' }}>docker compose up -d --build</code>
       </div>
     </Modal>
@@ -221,16 +221,18 @@ function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick
         <NavBtn item={{ id:'dashboard', Icon:HomeIcon, label:'Dashboard' }} />
 
         {/* Apps Sektion mit Gruppenüberschriften */}
-        <button onClick={()=>setAppsOpen(v=>!v)} style={{
-          width:'100%', display:'flex', alignItems:'center', gap:9, padding:'9px 12px',
+        <button onClick={()=>setAppsOpen(v=>!v)} title={collapsed?'Apps':undefined} style={{
+          width:'100%', display:'flex', alignItems:'center', gap:9,
+          padding: collapsed ? '9px 0' : '9px 12px',
+          justifyContent: collapsed ? 'center' : 'flex-start',
           borderRadius:7, border:'none', background:'transparent',
-          color:'rgba(255,255,255,0.65)', cursor:'pointer', fontSize:12,
+          cursor:'pointer', fontSize:12,
           fontFamily:"'Space Mono',monospace", textAlign:'left', marginBottom:1,
           borderLeft:'2px solid transparent',
         }}>
-          <span style={{ fontSize:14 }}>◫</span>
-          <span style={{ flex:1 }}>Apps</span>
-          <span style={{ fontSize:10, opacity:0.5, transform:appsOpen?'rotate(90deg)':'rotate(0)', transition:'transform 0.2s', display:'inline-block' }}>▶</span>
+          <AppsIcon size={collapsed?18:15} color="rgba(255,255,255,0.6)"/>
+          {!collapsed && <span style={{ flex:1, color:'rgba(255,255,255,0.65)' }}>Apps</span>}
+          {!collapsed && <ChevronIcon size={13} color="rgba(255,255,255,0.35)" dir={appsOpen?'down':'right'}/>}
         </button>
         {appsOpen && getGroupedTools().map(([group, tools]) => (
           <div key={group}>
@@ -434,7 +436,7 @@ function QuickLinks({ toast, mobile }) {
 
       {/* Link-Grid */}
       {links.length === 0 && !editMode
-        ? <div style={{ color:'rgba(255,255,255,0.2)', fontSize:11, fontFamily:'monospace', padding:'6px 0' }}>Tippe auf "✎" um Links hinzuzufügen.</div>
+        ? <div style={{ color:'rgba(255,255,255,0.5)', fontSize:11, fontFamily:'monospace', padding:'6px 0' }}>Tippe auf "✎" um Links hinzuzufügen.</div>
         : <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
             {links.map(l => (
               <div key={l.id} style={{ position:'relative' }}>
@@ -544,7 +546,7 @@ function TodoList({ toast }) {
               border:'1.5px solid rgba(78,205,196,0.5)', background:'transparent',
             }} />
             <span style={{ color:'rgba(255,255,255,0.8)', fontSize:13, fontFamily:'monospace', flex:1, lineHeight:1.4 }}>{item.text}</span>
-            <button onClick={() => del(item.id)} style={{ background:'transparent', border:'none', color:'rgba(255,255,255,0.2)', cursor:'pointer', fontSize:18, padding:'0 2px', lineHeight:1 }}>✕</button>
+            <button onClick={() => del(item.id)} style={{ background:'transparent', border:'none', color:'rgba(255,255,255,0.5)', cursor:'pointer', fontSize:18, padding:'0 2px', lineHeight:1 }}>✕</button>
           </div>
         ))}
         {done.length > 0 && (
@@ -558,7 +560,7 @@ function TodoList({ toast }) {
                   color:'#4ecdc4', fontSize:12, lineHeight:1,
                 }}>✓</button>
                 <span style={{ color:'rgba(255,255,255,0.4)', fontSize:13, fontFamily:'monospace', flex:1, textDecoration:'line-through' }}>{item.text}</span>
-                <button onClick={() => del(item.id)} style={{ background:'transparent', border:'none', color:'rgba(255,255,255,0.2)', cursor:'pointer', fontSize:18 }}>✕</button>
+                <button onClick={() => del(item.id)} style={{ background:'transparent', border:'none', color:'rgba(255,255,255,0.5)', cursor:'pointer', fontSize:18 }}>✕</button>
               </div>
             ))}
           </>
@@ -633,7 +635,7 @@ function BestellStats() {
       {open && (
         <div style={{marginTop:12}}>
           {!stats ? (
-            <div style={{color:'rgba(255,255,255,0.25)',fontFamily:'monospace',fontSize:12}}>Lädt…</div>
+            <div style={{color:'rgba(255,255,255,0.55)',fontFamily:'monospace',fontSize:12}}>Lädt…</div>
           ) : (
             <>
               <div style={{marginBottom:12}}>