From da82caf82c0a184a1644b7de9be038b5635e4b03 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sat, 24 Oct 2026 19:43:59 +0200
Subject: [PATCH] style: reduce padding, adopt crisp square tabs/cards, keep
 round buttons and single accent

---
 frontend/src/App.tsx                          | 147 +++++------
 .../features/capture/InstantCaptureBar.tsx    |  34 ++-
 .../src/features/lists/SharedListsView.tsx    | 106 ++++----
 .../src/features/settings/EcosystemView.tsx   |  64 ++---
 frontend/src/features/triage/TasksView.tsx    | 237 ++++++++----------
 frontend/src/features/triage/TriageDeck.tsx   |  56 ++---
 .../src/features/workspace/WorkspaceView.tsx  |  72 +++---
 7 files changed, 345 insertions(+), 371 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7647440..a661889 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -152,20 +152,20 @@ export const App: React.FC = () => {
     <div className="min-h-screen bg-[#16171a] text-white flex flex-col font-sans selection:bg-[#1d8cf8]/30">
       {/* Top Header Bar */}
       <header className="sticky top-0 z-30 bg-[#16171a]/95 backdrop-blur-md border-b border-white/[0.08]">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
+        <div className="max-w-6xl mx-auto px-3 sm:px-4 h-12 flex items-center justify-between gap-4">
           {/* Logo & Headline */}
           <div
             onClick={() => {
               setActiveTab('triage');
               handleTriggerAddButton();
             }}
-            className="flex items-center gap-3 cursor-pointer group select-none"
+            className="flex items-center gap-2.5 cursor-pointer group select-none"
           >
-            <div className="w-9 h-9 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm group-hover:scale-105 transition-transform">
-              <Brain className="w-5 h-5" />
+            <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center">
+              <Brain className="w-4 h-4" />
             </div>
             <div className="flex flex-col">
-              <span className="font-bold text-base sm:text-lg text-white tracking-tight leading-none">
+              <span className="font-bold text-sm sm:text-base text-white tracking-tight leading-none">
                 MindSift
               </span>
               <span className="text-[11px] text-zinc-400 mt-0.5 hidden sm:inline-block">
@@ -181,49 +181,38 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setShowProfileModal(true);
               }}
-              className="h-9 px-3.5 rounded-full bg-[#222428] hover:bg-[#282a2f] border border-white/[0.08] text-xs font-medium text-white flex items-center gap-2.5 transition-colors shadow-sm"
+              className="h-8 pl-1 pr-3 rounded-full bg-[#222428] hover:bg-[#282a2f] border border-white/[0.08] text-xs font-medium text-white flex items-center gap-2 transition-colors"
               title="Profil & Einstellungen"
             >
-              <div className="w-5 h-5 rounded-full bg-[#1d8cf8] text-white text-[10px] font-bold flex items-center justify-center">
+              <div className="w-6 h-6 rounded-full bg-[#1d8cf8] text-white text-[10px] font-bold flex items-center justify-center">
                 {user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
               </div>
               <span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span>
             </button>
           </div>
         </div>
-      </header>
 
-      {/* Main Container */}
-      <main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-5 pb-28">
-        {/* Instant Capture Section */}
-        <section className="mb-6">
-          <InstantCaptureBar
-            onCaptured={handleCaptured}
-            autoFocusTrigger={captureFocusCount}
-          />
-        </section>
-
-        {/* Monochromatic Segmented Tabs */}
-        <nav className="flex items-center justify-start sm:justify-center mb-8 overflow-x-auto pb-1 no-scrollbar">
-          <div className="inline-flex items-center p-1 bg-[#1c1e22] rounded-xl border border-white/[0.08] shadow-sm gap-1">
+        {/* Monochrome square tabs attached to header */}
+        <nav className="max-w-6xl mx-auto px-1 sm:px-2 overflow-x-auto no-scrollbar border-t border-white/[0.06]">
+          <div className="flex items-stretch">
             <button
               onClick={() => {
                 triggerHaptic(10);
                 setActiveTab('triage');
               }}
-              className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
+              className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
                 activeTab === 'triage'
-                  ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
-                  : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
+                  ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
+                  : 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
               }`}
             >
-              <Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-white' : 'text-zinc-400'}`} />
+              <Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
               <span>Triage</span>
               {stats.inboxCount > 0 && (
                 <span
-                  className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
+                  className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
                     activeTab === 'triage'
-                      ? 'bg-white/[0.14] text-white'
+                      ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
                       : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
                   }`}
                 >
@@ -237,19 +226,19 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setActiveTab('tasks');
               }}
-              className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
+              className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
                 activeTab === 'tasks'
-                  ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
-                  : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
+                  ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
+                  : 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
               }`}
             >
-              <CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-white' : 'text-zinc-400'}`} />
+              <CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
               <span>Aufgaben</span>
               {stats.tasksOpenCount > 0 && (
                 <span
-                  className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
+                  className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
                     activeTab === 'tasks'
-                      ? 'bg-white/[0.14] text-white'
+                      ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
                       : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
                   }`}
                 >
@@ -263,18 +252,18 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setActiveTab('workspace');
               }}
-              className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
+              className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
                 activeTab === 'workspace'
-                  ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
-                  : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
+                  ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
+                  : 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
               }`}
             >
-              <FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-white' : 'text-zinc-400'}`} />
+              <FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
               <span>Workspace</span>
               <span
-                className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
+                className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
                   activeTab === 'workspace'
-                    ? 'bg-white/[0.14] text-white'
+                    ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
                     : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
                 }`}
               >
@@ -287,13 +276,13 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setActiveTab('lists');
               }}
-              className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
+              className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
                 activeTab === 'lists'
-                  ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
-                  : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
+                  ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
+                  : 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
               }`}
             >
-              <ShoppingCart className={`w-4 h-4 transition-colors ${activeTab === 'lists' ? 'text-white' : 'text-zinc-400'}`} />
+              <ShoppingCart className={`w-4 h-4 transition-colors ${activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
               <span>Geteilte Listen</span>
             </button>
 
@@ -302,17 +291,29 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setActiveTab('ecosystem');
               }}
-              className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
+              className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
                 activeTab === 'ecosystem'
-                  ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
-                  : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
+                  ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
+                  : 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.03]'
               }`}
             >
-              <Webhook className={`w-4 h-4 transition-colors ${activeTab === 'ecosystem' ? 'text-white' : 'text-zinc-400'}`} />
+              <Webhook className={`w-4 h-4 transition-colors ${activeTab === 'ecosystem' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
               <span>Webhooks & Export</span>
             </button>
           </div>
         </nav>
+      </header>
+
+      {/* Main Container */}
+      <main className="flex-1 max-w-6xl w-full mx-auto px-3 sm:px-4 pt-3 pb-24">
+        {/* Instant Capture Section */}
+        <section className="mb-3">
+          <InstantCaptureBar
+            onCaptured={handleCaptured}
+            autoFocusTrigger={captureFocusCount}
+          />
+        </section>
+
 
         {/* Tab View Content */}
         <section>
@@ -359,7 +360,7 @@ export const App: React.FC = () => {
               triggerHaptic(10);
               setActiveTab('triage');
             }}
-            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
+            className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
               activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
             }`}
             title="Triage Deck"
@@ -374,7 +375,7 @@ export const App: React.FC = () => {
               triggerHaptic(10);
               setActiveTab('tasks');
             }}
-            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
+            className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
               activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
             }`}
             title="Aufgaben"
@@ -401,7 +402,7 @@ export const App: React.FC = () => {
               triggerHaptic(10);
               setActiveTab('lists');
             }}
-            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
+            className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
               activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
             }`}
             title="Listen"
@@ -416,7 +417,7 @@ export const App: React.FC = () => {
               triggerHaptic(10);
               setActiveTab('workspace');
             }}
-            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
+            className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
               activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
             }`}
             title="Workspace"
@@ -430,9 +431,9 @@ export const App: React.FC = () => {
       {/* Profile & Settings Modal styled identically to Template Screen 2 */}
       {showProfileModal && (
         <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
-          <div className="w-full max-w-sm rounded-3xl bg-[#222428] border border-white/[0.08] shadow-2xl p-6 overflow-hidden">
+          <div className="w-full max-w-sm bg-[#222428] border border-white/[0.08] shadow-2xl p-4 overflow-hidden">
             {/* Screen 2: Top Profile Card */}
-            <div className="flex flex-col items-center text-center mb-6">
+            <div className="flex flex-col items-center text-center mb-4">
               <div className="w-20 h-20 rounded-full bg-[#1d8cf8] text-white text-2xl font-bold flex items-center justify-center shadow-lg mb-3 ring-4 ring-white/[0.05]">
                 {user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
               </div>
@@ -452,36 +453,36 @@ export const App: React.FC = () => {
               </button>
             </div>
 
-            {/* Template Screen 2: Capsule Settings Sections */}
-            <div className="space-y-3 mb-6">
-              {/* Notification toggle capsule */}
-              <div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 rounded-lg bg-[#22c55e]/20 text-[#22c55e] flex items-center justify-center">
-                    <Bell className="w-4 h-4" />
+            {/* Settings Sections */}
+            <div className="space-y-2 mb-3">
+              {/* Notification toggle */}
+              <div className="p-2.5 bg-[#16171a] border border-white/[0.06] flex items-center justify-between">
+                <div className="flex items-center gap-2.5">
+                  <div className="w-7 h-7 bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
+                    <Bell className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-xs font-medium text-white">Benachrichtigungen</span>
                 </div>
                 <button
                   type="button"
                   onClick={() => setNotificationsEnabled(!notificationsEnabled)}
-                  className={`w-11 h-6 rounded-full transition-colors relative p-0.5 ${
+                  className={`w-10 h-5 rounded-full transition-colors relative p-0.5 ${
                     notificationsEnabled ? 'bg-[#1d8cf8]' : 'bg-zinc-600'
                   }`}
                 >
                   <div
-                    className={`w-5 h-5 rounded-full bg-white transition-transform ${
+                    className={`w-4 h-4 rounded-full bg-white transition-transform ${
                       notificationsEnabled ? 'translate-x-5' : 'translate-x-0'
                     }`}
                   />
                 </button>
               </div>
 
-              {/* Security info capsule */}
-              <div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 rounded-lg bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
-                    <Shield className="w-4 h-4" />
+              {/* Security info */}
+              <div className="p-2.5 bg-[#16171a] border border-white/[0.06] flex items-center justify-between">
+                <div className="flex items-center gap-2.5">
+                  <div className="w-7 h-7 bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
+                    <Shield className="w-3.5 h-3.5" />
                   </div>
                   <div>
                     <span className="text-xs font-medium text-white block">Sicherheit</span>
@@ -493,14 +494,14 @@ export const App: React.FC = () => {
             </div>
 
             {/* Auth Switcher Form if switching accounts */}
-            <form onSubmit={handleAuthSubmit} className="space-y-2.5 mb-4">
+            <form onSubmit={handleAuthSubmit} className="space-y-2 mb-3">
               {authMode === 'register' && (
                 <input
                   type="text"
                   value={displayName}
                   onChange={(e) => setDisplayName(e.target.value)}
                   placeholder="Anzeigename"
-                  className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
+                  className="w-full h-8 px-2.5 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
                   required
                 />
               )}
@@ -509,7 +510,7 @@ export const App: React.FC = () => {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 placeholder="E-Mail"
-                className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
+                className="w-full h-8 px-2.5 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
                 required
               />
               <input
@@ -517,15 +518,15 @@ export const App: React.FC = () => {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Passwort"
-                className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
+                className="w-full h-8 px-2.5 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
                 required
               />
 
-              {authError && <p className="text-xs text-[#ef4444] px-1">{authError}</p>}
+              {authError && <p className="text-xs text-red-400 px-1">{authError}</p>}
 
               <button
                 type="submit"
-                className="w-full h-10 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white font-semibold text-xs transition-colors shadow-sm"
+                className="w-full h-8 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white font-medium text-xs transition-colors shadow-sm"
               >
                 {authMode === 'login' ? 'Anmelden' : 'Registrieren'}
               </button>
diff --git a/frontend/src/features/capture/InstantCaptureBar.tsx b/frontend/src/features/capture/InstantCaptureBar.tsx
index 30dde31..16fde40 100644
--- a/frontend/src/features/capture/InstantCaptureBar.tsx
+++ b/frontend/src/features/capture/InstantCaptureBar.tsx
@@ -131,18 +131,18 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
   };
 
   return (
-    <div className="w-full max-w-3xl mx-auto">
+    <div className="w-full">
       <form onSubmit={handleSubmit} className="relative">
-        {/* Capsule Input Bar */}
+        {/* Capture Input Bar */}
         <div
-          className={`flex items-center h-14 px-3.5 sm:px-4 rounded-2xl bg-[#222428] border transition-colors duration-150 ${
+          className={`flex items-center h-11 pl-2 pr-1.5 bg-[#222428] border rounded-full transition-colors duration-150 ${
             isListening
               ? 'border-[#1d8cf8] bg-[#222428]'
-              : 'border-white/[0.08] focus-within:border-[#1d8cf8]/80'
+              : 'border-white/[0.08] focus-within:border-[#1d8cf8]'
           }`}
         >
-          <div className="w-8 h-8 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center mr-3 flex-shrink-0">
-            <Sparkles className="w-4 h-4" />
+          <div className="w-7 h-7 rounded-full bg-[#1d8cf8] text-white flex items-center justify-center mr-2 flex-shrink-0">
+            <Sparkles className="w-3.5 h-3.5" />
           </div>
 
           <input
@@ -155,7 +155,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
                 ? 'Ich höre zu…'
                 : 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
             }
-            className="w-full bg-transparent text-white placeholder-zinc-500 text-sm sm:text-base focus:outline-none"
+            className="w-full bg-transparent text-white placeholder-zinc-500 text-xs sm:text-sm focus:outline-none"
             autoComplete="off"
           />
 
@@ -165,7 +165,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               type="button"
               onClick={() => setShowOptions((prev) => !prev)}
               title="Priorität & Fälligkeit"
-              className={`h-8 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
+              className={`h-7 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
                 showOptions || priority !== 'normal' || dueDate
                   ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
                   : 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
@@ -182,20 +182,20 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               type="button"
               onClick={toggleVoiceDictation}
               title="Spracheingabe"
-              className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
+              className={`w-7 h-7 rounded-full flex items-center justify-center transition-colors ${
                 isListening
                   ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
                   : 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
               }`}
             >
-              {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
+              {isListening ? <MicOff className="w-3.5 h-3.5" /> : <Mic className="w-3.5 h-3.5" />}
             </button>
 
             {/* Instant Send Button */}
             <button
               type="submit"
               disabled={!content.trim() || isSubmitting}
-              className={`h-9 px-4 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
+              className={`h-7 px-3 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
                 content.trim()
                   ? 'bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white cursor-pointer shadow-sm'
                   : 'bg-[#2b2d33] text-zinc-500 cursor-not-allowed'
@@ -216,9 +216,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
           </div>
         </div>
 
-        {/* Expandable Quick Metadata Pills */}
+        {/* Expandable Quick Metadata */}
         {showOptions && (
-          <div className="mt-2.5 px-4 py-3 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-2 text-xs">
+          <div className="mt-1 px-3 py-2 bg-[#1c1e22] border border-white/[0.08] flex flex-wrap items-center justify-between gap-2 text-xs">
             <div className="flex items-center gap-1.5">
               <span className="text-zinc-400 mr-1">Priorität:</span>
               {(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
@@ -234,11 +234,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
                     key={p}
                     type="button"
                     onClick={() => setPriority(p)}
-                    className={`px-3 py-1 rounded-full transition-colors ${
+                    className={`px-2.5 py-0.5 rounded-full transition-colors text-xs ${
                       active
-                        ? p === 'urgent'
-                          ? 'bg-[#ef4444] text-white font-medium'
-                          : 'bg-[#1d8cf8] text-white font-medium'
+                        ? 'bg-[#1d8cf8] text-white font-medium'
                         : 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
                     }`}
                   >
@@ -254,7 +252,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
                 type="date"
                 value={dueDate}
                 onChange={(e) => setDueDate(e.target.value)}
-                className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
+                className="bg-[#16171a] text-white px-2 py-0.5 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
               />
             </div>
           </div>
diff --git a/frontend/src/features/lists/SharedListsView.tsx b/frontend/src/features/lists/SharedListsView.tsx
index 324a15d..a2f9b59 100644
--- a/frontend/src/features/lists/SharedListsView.tsx
+++ b/frontend/src/features/lists/SharedListsView.tsx
@@ -264,18 +264,18 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
   const completedItems = activeList?.items.filter((i) => i.isCompleted) || [];
 
   return (
-    <div className="max-w-4xl mx-auto space-y-6">
+    <div className="w-full space-y-3">
       {/* Top Space Bar & Realtime Indicator */}
-      <div className="p-4 sm:p-5 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
-        <div className="flex flex-wrap items-center gap-2">
+      <div className="px-3 py-2 bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-1.5">
           {spaces.map((sp) => (
             <button
               key={sp.id}
               onClick={() => setActiveSpace(sp)}
-              className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors ${
+              className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-colors border ${
                 activeSpace?.id === sp.id
-                  ? 'bg-[#1d8cf8] text-white shadow-sm'
-                  : 'bg-[#16171a] text-zinc-300 hover:text-white border border-white/[0.06]'
+                  ? 'bg-[#1d8cf8] text-white border-[#1d8cf8]'
+                  : 'bg-[#16171a] text-zinc-300 hover:text-white border-white/[0.08]'
               }`}
             >
               <span>{sp.icon}</span>
@@ -285,14 +285,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
           <button
             onClick={() => setShowNewSpaceModal((prev) => !prev)}
-            className="h-9 px-3.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+            className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
           >
             <Plus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Space
           </button>
 
           <button
             onClick={() => setShowJoinModal((prev) => !prev)}
-            className="h-9 px-3.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+            className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
           >
             <UserPlus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Code einlösen
           </button>
@@ -302,7 +302,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
         {activeSpace && (
           <div className="flex items-center gap-2">
             <div
-              className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 ${
+              className={`h-8 px-3 text-xs flex items-center gap-1.5 ${
                 wsConnected
                   ? 'bg-[#22c55e]/15 text-[#22c55e] border border-[#22c55e]/30'
                   : 'bg-[#2b2d33] text-zinc-400 border border-white/[0.06]'
@@ -333,19 +333,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       {showNewSpaceModal && (
         <form
           onSubmit={handleCreateSpace}
-          className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex items-center gap-3"
+          className="p-2 bg-[#222428] border border-white/[0.08] flex items-center gap-2"
         >
           <input
             type="text"
             value={newSpaceName}
             onChange={(e) => setNewSpaceName(e.target.value)}
             placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…"
-            className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
             autoFocus
           />
           <button
             type="submit"
-            className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
+            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
           >
             Space anlegen
           </button>
@@ -355,19 +355,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       {showJoinModal && (
         <form
           onSubmit={handleJoinSpace}
-          className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex items-center gap-3"
+          className="p-2 bg-[#222428] border border-white/[0.08] flex items-center gap-2"
         >
           <input
             type="text"
             value={joinCode}
             onChange={(e) => setJoinCode(e.target.value)}
             placeholder="Invite-Code des Partners eingeben…"
-            className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] uppercase transition-colors"
+            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] uppercase transition-colors"
             autoFocus
           />
           <button
             type="submit"
-            className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
+            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
           >
             Beitreten
           </button>
@@ -375,7 +375,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       )}
 
       {/* List Tabs within Active Space */}
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex flex-wrap items-center gap-1.5">
         {lists.map((lst) => {
           const openCount = lst.items.filter((i) => !i.isCompleted).length;
           const isSelected = activeList?.id === lst.id;
@@ -383,15 +383,15 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             <button
               key={lst.id}
               onClick={() => setActiveListId(lst.id)}
-              className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-all ${
+              className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-all border ${
                 isSelected
-                  ? 'bg-[#1d8cf8] text-white shadow-sm'
-                  : 'bg-[#222428] text-zinc-300 hover:text-white border border-white/[0.06]'
+                  ? 'bg-[#1d8cf8] text-white border-[#1d8cf8]'
+                  : 'bg-[#222428] text-zinc-300 hover:text-white border-white/[0.08]'
               }`}
             >
               <span>{lst.icon}</span>
               <span>{lst.title}</span>
-              <span className={`px-2 py-0.2 rounded-full text-xs ${
+              <span className={`px-1.5 py-0.2 text-[10px] font-semibold ${
                 isSelected ? 'bg-white/20 text-white' : 'bg-[#16171a] text-zinc-400'
               }`}>
                 {openCount}
@@ -402,9 +402,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
         <button
           onClick={() => setShowNewListModal((prev) => !prev)}
-          className="h-10 px-4 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.06] text-xs sm:text-sm text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+          className="h-8 px-3 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
         >
-          <Plus className="w-4 h-4 text-[#1d8cf8]" />
+          <Plus className="w-3.5 h-3.5 text-[#1d8cf8]" />
           <span>Neue Liste</span>
         </button>
       </div>
@@ -412,7 +412,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       {showNewListModal && (
         <form
           onSubmit={handleCreateList}
-          className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center gap-3"
+          className="p-2 bg-[#222428] border border-white/[0.08] flex flex-wrap items-center gap-2"
         >
           <div className="flex items-center gap-1.5">
             {['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
@@ -435,12 +435,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             value={newListTitle}
             onChange={(e) => setNewListTitle(e.target.value)}
             placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
-            className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
             autoFocus
           />
           <button
             type="submit"
-            className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
+            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
           >
             Liste erstellen
           </button>
@@ -449,16 +449,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
       {/* Active Shared List Card */}
       {activeList ? (
-        <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
+        <div className="p-3 bg-[#222428] border border-white/[0.08]">
           {/* Quick-Add Pill Form */}
-          <form onSubmit={handleAddItem} className="space-y-3 mb-6">
-            <div className="flex flex-col sm:flex-row gap-2.5">
+          <form onSubmit={handleAddItem} className="space-y-2 mb-3">
+            <div className="flex flex-col sm:flex-row gap-2">
               <input
                 type="text"
                 value={newItemText}
                 onChange={(e) => setNewItemText(e.target.value)}
                 placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`}
-                className="flex-1 h-11 px-5 rounded-full bg-[#16171a] text-sm sm:text-base text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+                className="flex-1 h-10 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
               />
               <div className="flex gap-2">
                 <input
@@ -466,12 +466,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                   value={newItemQty}
                   onChange={(e) => setNewItemQty(e.target.value)}
                   placeholder="Menge (z.B. 2x)"
-                  className="w-32 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+                  className="w-32 h-10 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
                 />
                 <button
                   type="submit"
                   disabled={!newItemText.trim()}
-                  className="h-11 px-5 rounded-full bg-[#1d8cf8] disabled:bg-[#2b2d33] text-white disabled:text-zinc-500 font-medium text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
+                  className="h-10 px-5 rounded-full bg-[#1d8cf8] disabled:bg-[#2b2d33] text-white disabled:text-zinc-500 font-medium text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
                 >
                   <Plus className="w-4 h-4" />
                   <span>Hinzufügen</span>
@@ -487,10 +487,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                   key={cat}
                   type="button"
                   onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
-                  className={`px-3 py-1 rounded-full text-xs transition-colors ${
+                  className={`px-2.5 py-0.5 text-xs transition-colors border ${
                     newItemCategory === cat
-                      ? 'bg-[#1d8cf8] text-white font-medium'
-                      : 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
+                      ? 'bg-[#1d8cf8] text-white border-[#1d8cf8] font-medium'
+                      : 'bg-[#16171a] text-zinc-400 hover:text-white border-white/[0.08]'
                   }`}
                 >
                   {cat}
@@ -500,10 +500,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
           </form>
 
           {/* Open Items */}
-          <div className="space-y-2">
+          <div className="border border-white/[0.08] divide-y divide-white/[0.06]">
             {openItems.length === 0 ? (
-              <div className="py-8 text-center text-zinc-400 text-sm flex flex-col items-center gap-2">
-                <Sparkles className="w-5 h-5 text-[#22c55e]" />
+              <div className="py-6 text-center text-zinc-400 text-sm flex flex-col items-center gap-1.5">
+                <Sparkles className="w-4 h-4 text-[#1d8cf8]" />
                 <span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span>
               </div>
             ) : (
@@ -511,20 +511,20 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 <div
                   key={item.id}
                   onClick={() => handleToggleItem(item)}
-                  className="p-3.5 sm:p-4 rounded-2xl bg-[#16171a] hover:bg-[#282a2f] border border-white/[0.06] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
+                  className="px-3 py-2 bg-[#16171a] hover:bg-[#282a2f] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
                 >
-                  <div className="flex items-center gap-3.5 min-w-0">
-                    <Circle className="w-5 h-5 text-zinc-500 group-hover:text-[#1d8cf8] flex-shrink-0 transition-colors" />
-                    <span className="text-sm sm:text-base font-normal text-white truncate">
+                  <div className="flex items-center gap-2.5 min-w-0">
+                    <Circle className="w-4 h-4 text-zinc-500 group-hover:text-[#1d8cf8] flex-shrink-0 transition-colors" />
+                    <span className="text-sm font-normal text-white truncate">
                       {item.content}
                     </span>
                     {item.quantity && (
-                      <span className="px-2.5 py-0.5 rounded-full bg-[#222428] text-[#1d8cf8] border border-white/[0.06] text-xs font-semibold">
+                      <span className="px-2 py-0.2 bg-[#222428] text-[#1d8cf8] border border-white/[0.06] text-xs font-semibold">
                         {item.quantity}
                       </span>
                     )}
                     {item.category && (
-                      <span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#222428] text-zinc-400 text-xs">
+                      <span className="hidden sm:inline px-2 py-0.2 bg-[#222428] text-zinc-400 text-xs">
                         {item.category}
                       </span>
                     )}
@@ -536,9 +536,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                       e.stopPropagation();
                       handleDeleteItem(item.id);
                     }}
-                    className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors"
+                    className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
                   >
-                    <Trash2 className="w-3.5 h-3.5" />
+                    <Trash2 className="w-3 h-3" />
                   </button>
                 </div>
               ))
@@ -547,28 +547,28 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
           {/* Completed Items Section */}
           {completedItems.length > 0 && (
-            <div className="mt-8 pt-6 border-t border-white/[0.06]">
-              <div className="flex items-center justify-between mb-3">
+            <div className="mt-3 pt-2.5 border-t border-white/[0.06]">
+              <div className="flex items-center justify-between mb-2">
                 <span className="text-xs font-medium uppercase tracking-wider text-zinc-400">
-                  Bereits im Einkaufswagen / Erledigt ({completedItems.length})
+                  Erledigt ({completedItems.length})
                 </span>
                 <button
                   onClick={handleClearCompleted}
-                  className="px-3.5 py-1 rounded-full bg-[#16171a] hover:bg-[#ef4444]/15 border border-white/[0.06] text-xs text-zinc-400 hover:text-[#ef4444] transition-colors"
+                  className="px-3 py-0.5 rounded-full bg-[#16171a] hover:bg-white/[0.08] border border-white/[0.06] text-xs text-zinc-400 hover:text-white transition-colors"
                 >
                   Erledigte aufräumen
                 </button>
               </div>
 
-              <div className="space-y-1.5 opacity-75">
+              <div className="border border-white/[0.06] divide-y divide-white/[0.04] opacity-75">
                 {completedItems.map((item) => (
                   <div
                     key={item.id}
                     onClick={() => handleToggleItem(item)}
-                    className="p-3 rounded-2xl bg-[#16171a]/50 border border-white/[0.04] hover:bg-[#16171a]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
+                    className="px-3 py-1.5 bg-[#16171a]/50 hover:bg-[#16171a]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
                   >
-                    <div className="flex items-center gap-3 min-w-0">
-                      <CheckCircle2 className="w-5 h-5 text-[#22c55e] flex-shrink-0" />
+                    <div className="flex items-center gap-2.5 min-w-0">
+                      <CheckCircle2 className="w-4 h-4 text-[#1d8cf8] flex-shrink-0" />
                       <span className="text-sm text-zinc-400 line-through truncate">
                         {item.content}
                       </span>
diff --git a/frontend/src/features/settings/EcosystemView.tsx b/frontend/src/features/settings/EcosystemView.tsx
index 985203d..8287bca 100644
--- a/frontend/src/features/settings/EcosystemView.tsx
+++ b/frontend/src/features/settings/EcosystemView.tsx
@@ -92,15 +92,15 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
   const baseUrl = window.location.origin;
 
   return (
-    <div className="max-w-4xl mx-auto space-y-6">
+    <div className="w-full bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.08]">
       {/* Section 1: API Keys for Smarthome & Automation */}
-      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
+      <div className="p-4">
         <div className="flex items-center gap-3 mb-2">
-          <div className="w-10 h-10 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm">
-            <Key className="w-5 h-5" />
+          <div className="w-8 h-8 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
+            <Key className="w-4 h-4" />
           </div>
           <div>
-            <h3 className="text-lg font-bold text-white">
+            <h3 className="text-base font-bold text-white">
               Webhooks & Ingestion API-Schlüssel
             </h3>
             <p className="text-xs sm:text-sm text-zinc-400">
@@ -109,17 +109,17 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
           </div>
         </div>
 
-        <form onSubmit={handleCreateKey} className="mt-5 flex flex-col sm:flex-row gap-2.5">
+        <form onSubmit={handleCreateKey} className="mt-3 flex flex-col sm:flex-row gap-2">
           <input
             type="text"
             value={newKeyName}
             onChange={(e) => setNewKeyName(e.target.value)}
             placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
-            className="flex-1 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
           />
           <button
             type="submit"
-            className="h-11 px-6 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
+            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
           >
             <Plus className="w-4 h-4" />
             <span>API-Key erzeugen</span>
@@ -127,9 +127,9 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         </form>
 
         {newlyCreatedKey && (
-          <div className="mt-4 p-4 rounded-2xl bg-[#22c55e]/15 border border-[#22c55e]/30 flex flex-wrap items-center justify-between gap-3">
+          <div className="mt-3 p-3 bg-[#1d8cf8]/15 border border-[#1d8cf8]/30 flex flex-wrap items-center justify-between gap-3">
             <div className="min-w-0">
-              <p className="text-xs font-semibold text-[#22c55e] mb-1">
+              <p className="text-xs font-semibold text-[#1d8cf8] mb-1">
                 Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
               </p>
               <code className="text-xs sm:text-sm font-mono text-white break-all">
@@ -138,7 +138,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
             </div>
             <button
               onClick={() => handleCopy(newlyCreatedKey)}
-              className="h-9 px-4 rounded-full bg-[#22c55e] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#16a34a] transition-colors shadow-sm"
+              className="h-8 px-3 rounded-full bg-[#1d8cf8] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
             >
               {copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
               <span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
@@ -147,16 +147,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         )}
 
         {/* Active Keys List */}
-        <div className="mt-5 space-y-2">
+        <div className="mt-3 border border-white/[0.06] divide-y divide-white/[0.06]">
           {keys.length === 0 ? (
-            <p className="text-xs text-zinc-500 py-2">
+            <p className="text-xs text-zinc-500 px-3 py-2">
               Noch keine dedizierten API-Schlüssel hinterlegt.
             </p>
           ) : (
             keys.map((k) => (
               <div
                 key={k.id}
-                className="p-3.5 rounded-2xl bg-[#16171a] border border-white/[0.06] flex items-center justify-between gap-3"
+                className="px-3 py-1.5 bg-[#16171a] flex items-center justify-between gap-3"
               >
                 <div>
                   <span className="text-sm font-medium text-white">{k.name}</span>
@@ -169,7 +169,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
                 </div>
                 <button
                   onClick={() => handleDeleteKey(k.id)}
-                  className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors"
+                  className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
                 </button>
@@ -180,13 +180,13 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
       </div>
 
       {/* Section 2: Interactive Smarthome Webhook Simulator */}
-      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="w-10 h-10 rounded-xl bg-[#a855f7] text-white flex items-center justify-center shadow-sm">
-            <Webhook className="w-5 h-5" />
+      <div className="p-4">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
+            <Webhook className="w-4 h-4" />
           </div>
           <div>
-            <h3 className="text-lg font-bold text-white">
+            <h3 className="text-base font-bold text-white">
               Live Smarthome Webhook-Simulator
             </h3>
             <p className="text-xs sm:text-sm text-zinc-400">
@@ -195,7 +195,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
           </div>
         </div>
 
-        <div className="flex flex-wrap gap-2 mb-4">
+        <div className="flex flex-wrap gap-1.5 mb-3">
           {[
             { label: '🧺 Waschmaschine fertig', text: 'Waschmaschine im Keller ist fertig – Wäsche aufhängen!', prio: 'high' as PriorityLevel },
             { label: '🚨 Rauchmelder Batterie', text: 'Rauchmelder Dachgeschoss meldet niedrige Batterie (12%)', prio: 'urgent' as PriorityLevel },
@@ -208,24 +208,24 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
                 setSimTitle(preset.text);
                 setSimPriority(preset.prio);
               }}
-              className="px-3.5 py-1.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors"
+              className="px-3 py-1 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors"
             >
               {preset.label}
             </button>
           ))}
         </div>
 
-        <div className="flex flex-col sm:flex-row gap-2.5">
+        <div className="flex flex-col sm:flex-row gap-2">
           <input
             type="text"
             value={simTitle}
             onChange={(e) => setSimTitle(e.target.value)}
-            className="flex-1 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
           />
           <button
             type="button"
             onClick={handleSimulateWebhook}
-            className="h-11 px-6 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
+            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
           >
             <Zap className="w-4 h-4" />
             <span>Webhook jetzt abfeuern</span>
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         </div>
 
         {simStatus && (
-          <p className="mt-3 text-xs font-medium text-[#22c55e]">{simStatus}</p>
+          <p className="mt-3 text-xs font-medium text-[#1d8cf8]">{simStatus}</p>
         )}
 
         {/* Code Example Snippets */}
-        <div className="mt-6 space-y-3">
+        <div className="mt-4 space-y-2">
           <div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
             <Terminal className="w-3.5 h-3.5 text-[#1d8cf8]" />
             <span>cURL / Home Assistant REST Command:</span>
           </div>
-          <pre className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.06] font-mono text-xs text-[#22c55e] overflow-x-auto">
+          <pre className="p-3 bg-[#16171a] border border-white/[0.06] font-mono text-xs text-zinc-300 overflow-x-auto">
 {`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
   -H "Content-Type: application/json" \\
   -d '{
@@ -255,10 +255,10 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
       </div>
 
       {/* Section 3: Data Sovereignty & Export */}
-      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+      <div className="p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-xl bg-[#22c55e] text-white flex items-center justify-center flex-shrink-0 shadow-sm">
-            <ShieldCheck className="w-5 h-5" />
+          <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
+            <ShieldCheck className="w-4 h-4" />
           </div>
           <div>
             <h3 className="text-base font-bold text-white">
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
 
         <button
           onClick={handleFullExport}
-          className="h-11 px-6 rounded-full bg-[#22c55e] hover:bg-[#16a34a] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm"
+          className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm"
         >
           <Download className="w-4 h-4" />
           <span>Komplett-Backup (.json)</span>
diff --git a/frontend/src/features/triage/TasksView.tsx b/frontend/src/features/triage/TasksView.tsx
index 06b994f..38eb6cb 100644
--- a/frontend/src/features/triage/TasksView.tsx
+++ b/frontend/src/features/triage/TasksView.tsx
@@ -92,27 +92,27 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
   const doneTasks = tasks.filter((t) => t.isCompleted);
 
   return (
-    <div className="max-w-3xl mx-auto space-y-4">
-      {/* Filter Pills */}
-      <div className="flex flex-wrap items-center justify-between gap-3 mb-2">
-        <div className="flex items-center gap-1.5">
+    <div className="w-full space-y-2">
+      {/* Filter Tabs */}
+      <div className="flex flex-wrap items-center justify-between gap-2 mb-1">
+        <div className="flex items-center border border-white/[0.08] bg-[#16171a]">
           <button
             onClick={() => setFilter('open')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
+            className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
               filter === 'open'
-                ? 'bg-[#1d8cf8] text-white shadow-sm'
-                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
+                ? 'bg-[#222428] text-white'
+                : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
             }`}
           >
-            Alle Offenen ({openTasks.length})
+            Offen ({openTasks.length})
           </button>
 
           <button
             onClick={() => setFilter('done')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
+            className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
               filter === 'done'
-                ? 'bg-[#1d8cf8] text-white shadow-sm'
-                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
+                ? 'bg-[#222428] text-white'
+                : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
             }`}
           >
             Erledigt ({doneTasks.length})
@@ -120,20 +120,20 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
 
           <button
             onClick={() => setFilter('discarded')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
+            className={`h-8 px-3.5 text-xs font-medium transition-colors ${
               filter === 'discarded'
-                ? 'bg-[#1d8cf8] text-white shadow-sm'
-                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
+                ? 'bg-[#222428] text-white'
+                : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
             }`}
           >
-            Verworfen ({discarded.length})
+            Papierkorb ({discarded.length})
           </button>
         </div>
 
         {filter === 'discarded' && discarded.length > 0 && (
           <button
             onClick={handlePurgeAllDiscarded}
-            className="h-8 px-3.5 rounded-full bg-[#ef4444]/15 hover:bg-[#ef4444]/25 text-[#ef4444] text-xs font-medium flex items-center gap-1.5 transition-colors"
+            className="h-7 px-3 rounded-full bg-white/[0.06] hover:bg-white/[0.12] text-zinc-300 hover:text-white text-xs font-medium flex items-center gap-1.5 transition-colors"
           >
             <Trash2 className="w-3.5 h-3.5" />
             Papierkorb leeren
@@ -142,37 +142,35 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
       </div>
 
       {loading ? (
-        <div className="p-8 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
+        <div className="p-6 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
       ) : filter === 'discarded' ? (
-        <div className="space-y-2.5">
+        <div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
           {discarded.length === 0 ? (
-            <div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
+            <div className="px-4 py-6 text-center text-zinc-400 text-sm">
               Keine verworfenen Gedanken im Papierkorb.
             </div>
           ) : (
             discarded.map((item) => (
               <div
                 key={item.id}
-                className="p-3.5 sm:p-4 rounded-2xl bg-[#222428] border border-white/[0.06] flex items-center justify-between gap-4"
+                className="px-3 py-2 flex items-center justify-between gap-3 hover:bg-white/[0.02]"
               >
-                <div className="flex items-center gap-3 min-w-0 flex-1">
-                  <div className="w-9 h-9 rounded-xl bg-zinc-700 text-zinc-300 flex items-center justify-center flex-shrink-0">
-                    <Trash2 className="w-4 h-4" />
-                  </div>
+                <div className="flex items-center gap-2.5 min-w-0 flex-1">
+                  <Trash2 className="w-4 h-4 text-zinc-500 flex-shrink-0" />
                   <p className="text-sm text-zinc-400 line-through truncate">{item.content}</p>
                 </div>
                 <div className="flex items-center gap-2 flex-shrink-0">
                   <button
                     onClick={() => handleRestore(item)}
-                    className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
+                    className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
                   >
-                    <RotateCcw className="w-3.5 h-3.5" /> Zurück
+                    <RotateCcw className="w-3 h-3" /> Zurück
                   </button>
                   <button
                     onClick={() => handleDeletePermanent(item.id)}
-                    className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
+                    className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
                   >
-                    <Trash2 className="w-3.5 h-3.5" />
+                    <Trash2 className="w-3 h-3" />
                   </button>
                 </div>
               </div>
@@ -180,121 +178,98 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
           )}
         </div>
       ) : (
-        <div className="space-y-2.5">
+        <div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
           {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
-            <div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
+            <div className="px-4 py-6 text-center text-zinc-400 text-sm">
               {filter === 'open'
                 ? 'Keine offenen Aufgaben vorhanden.'
                 : 'Noch keine erledigten Aufgaben.'}
             </div>
           ) : (
-            (filter === 'open' ? openTasks : doneTasks).map((task, idx) => {
-              // Alternate squircle colors matching template: blue, green, purple, orange, violet
-              const squircleColors = [
-                'bg-[#1d8cf8]', // electric blue
-                'bg-[#22c55e]', // vibrant green
-                'bg-[#a855f7]', // purple
-                'bg-[#f97316]', // orange
-                'bg-[#8b5cf6]', // violet
-              ];
-              const squircleBg = task.priority === 'urgent'
-                ? 'bg-[#ef4444]'
-                : task.isCompleted
-                ? 'bg-[#a855f7]'
-                : squircleColors[idx % squircleColors.length];
+            (filter === 'open' ? openTasks : doneTasks).map((task) => (
+              <div
+                key={task.id}
+                className={`px-3 py-2 flex flex-col sm:flex-row sm:items-center justify-between gap-2 transition-colors hover:bg-white/[0.02] ${
+                  task.isCompleted ? 'opacity-65' : ''
+                }`}
+              >
+                <div className="flex items-center gap-3 min-w-0 flex-1">
+                  {/* Square minimalist checkbox */}
+                  <button
+                    onClick={() => handleToggleDone(task)}
+                    className={`w-4 h-4 flex items-center justify-center flex-shrink-0 transition-colors border ${
+                      task.isCompleted
+                        ? 'bg-[#1d8cf8] border-[#1d8cf8] text-white'
+                        : 'border-zinc-500 hover:border-[#1d8cf8] text-transparent'
+                    }`}
+                    title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
+                  >
+                    <Check className="w-3 h-3 stroke-[3]" />
+                  </button>
 
-              // In template: active/top items have a thin bright green outline
-              const isHighlightGreen = !task.isCompleted && idx < 3;
-
-              return (
-                <div
-                  key={task.id}
-                  className={`p-3.5 sm:p-4 rounded-2xl bg-[#222428] flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors ${
-                    isHighlightGreen
-                      ? 'border border-[#22c55e]/80 shadow-[0_0_12px_-4px_rgba(34,197,94,0.3)]'
-                      : 'border border-white/[0.06]'
-                  } ${task.isCompleted ? 'opacity-75' : ''}`}
-                >
-                  <div className="flex items-center gap-3.5 min-w-0 flex-1">
-                    {/* Template Squircle Icon */}
-                    <button
-                      onClick={() => handleToggleDone(task)}
-                      className={`w-10 h-10 rounded-xl ${squircleBg} text-white flex items-center justify-center flex-shrink-0 shadow-sm transition-transform active:scale-95`}
-                      title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
+                  <div className="min-w-0 flex-1">
+                    <p
+                      className={`text-sm break-words leading-tight ${
+                        task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
+                      }`}
                     >
-                      {task.isCompleted ? (
-                        <Check className="w-5 h-5 stroke-[2.5]" />
-                      ) : task.priority === 'urgent' ? (
-                        <AlertCircle className="w-5 h-5" />
-                      ) : (
-                        <CheckCircle2 className="w-5 h-5" />
+                      {task.content}
+                    </p>
+
+                    <div className="flex flex-wrap items-center gap-1.5 mt-0.5 empty:hidden">
+                      {task.priority === 'urgent' && (
+                        <span className="px-1.5 py-0.2 border border-[#1d8cf8] text-[#1d8cf8] text-[10px] font-semibold">
+                          Dringend
+                        </span>
                       )}
-                    </button>
-
-                    <div className="min-w-0 flex-1">
-                      <p
-                        className={`text-sm sm:text-base font-medium break-words leading-snug ${
-                          task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
-                        }`}
-                      >
-                        {task.content}
-                      </p>
-
-                      <div className="flex flex-wrap items-center gap-2 mt-1">
-                        {task.priority === 'urgent' && (
-                          <span className="px-2 py-0.5 rounded-full bg-[#ef4444]/20 text-[#ef4444] text-[11px] font-semibold">
-                            Dringend
-                          </span>
-                        )}
-                        {task.priority === 'high' && (
-                          <span className="px-2 py-0.5 rounded-full bg-[#f97316]/20 text-[#f97316] text-[11px] font-semibold">
-                            Wichtig
-                          </span>
-                        )}
-                        {task.tags?.map((tag) => (
-                          <span
-                            key={tag}
-                            className="px-2 py-0.5 rounded-full bg-[#16171a] text-zinc-400 text-[11px] flex items-center gap-1"
-                          >
-                            #{tag}
-                          </span>
-                        ))}
-                      </div>
+                      {task.priority === 'high' && (
+                        <span className="px-1.5 py-0.2 border border-white/20 text-zinc-300 text-[10px] font-medium">
+                          Wichtig
+                        </span>
+                      )}
+                      {task.tags?.map((tag) => (
+                        <span
+                          key={tag}
+                          className="px-1.5 py-0.2 bg-[#16171a] text-zinc-400 text-[10px]"
+                        >
+                          #{tag}
+                        </span>
+                      ))}
                     </div>
                   </div>
-
-                  {/* Action Controls */}
-                  <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
-                    <div className="relative flex items-center">
-                      <Calendar className="w-3.5 h-3.5 text-zinc-400 absolute left-3 pointer-events-none" />
-                      <input
-                        type="date"
-                        value={task.dueDate || ''}
-                        onChange={(e) => handleDueDateChange(task, e.target.value)}
-                        className="pl-8 pr-3 py-1 rounded-full bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
-                      />
-                    </div>
-
-                    <button
-                      onClick={() => handleConvertToDoc(task)}
-                      title="Als Notiz / Projekt vertiefen"
-                      className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
-                    >
-                      <FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
-                      <span className="hidden md:inline">Vertiefen</span>
-                    </button>
-
-                    <button
-                      onClick={() => handleDeletePermanent(task.id)}
-                      title="Löschen"
-                      className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
-                    >
-                      <Trash2 className="w-3.5 h-3.5" />
-                    </button>
-                  </div>
                 </div>
-              );
-            })
+
+                {/* Action Controls */}
+                <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
+                  <div className="relative flex items-center">
+                    <Calendar className="w-3 h-3 text-zinc-400 absolute left-2 pointer-events-none" />
+                    <input
+                      type="date"
+                      value={task.dueDate || ''}
+                      onChange={(e) => handleDueDateChange(task, e.target.value)}
+                      className="h-7 pl-6 pr-2 bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+                    />
+                  </div>
+
+                  <button
+                    onClick={() => handleConvertToDoc(task)}
+                    title="Als Notiz / Projekt vertiefen"
+                    className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                  >
+                    <FileText className="w-3 h-3 text-[#1d8cf8]" />
+                    <span className="hidden md:inline">Vertiefen</span>
+                  </button>
+
+                  <button
+                    onClick={() => handleDeletePermanent(task.id)}
+                    title="Löschen"
+                    className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </button>
+                </div>
+              </div>
+            ))
           )}
         </div>
       )}
diff --git a/frontend/src/features/triage/TriageDeck.tsx b/frontend/src/features/triage/TriageDeck.tsx
index 45fa269..5f7197b 100644
--- a/frontend/src/features/triage/TriageDeck.tsx
+++ b/frontend/src/features/triage/TriageDeck.tsx
@@ -134,19 +134,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
     switch (priority) {
       case 'urgent':
         return (
-          <span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#ef4444] text-white">
+          <span className="px-2 py-0.2 text-xs font-semibold border border-[#1d8cf8] text-[#1d8cf8]">
             Dringend
           </span>
         );
       case 'high':
         return (
-          <span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#f97316] text-white">
+          <span className="px-2 py-0.2 text-xs font-medium border border-white/20 text-zinc-300">
             Wichtig
           </span>
         );
       default:
         return (
-          <span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#2b2d33] text-zinc-400">
+          <span className="px-2 py-0.2 text-xs font-medium bg-[#2b2d33] text-zinc-400">
             Gedanke
           </span>
         );
@@ -156,15 +156,15 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   const sourceBadge = (source: string) => {
     if (source === 'voice') {
       return (
-        <span className="px-2.5 py-0.5 rounded-full text-xs bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1">
+        <span className="px-2 py-0.2 text-xs bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1">
           <Mic className="w-3 h-3" /> Diktat
         </span>
       );
     }
     if (source === 'webhook') {
       return (
-        <span className="px-2.5 py-0.5 rounded-full text-xs bg-[#16171a] text-[#22c55e] border border-white/[0.06] flex items-center gap-1">
-          <Webhook className="w-3 h-3" /> Webhook
+        <span className="px-2 py-0.2 text-xs bg-[#16171a] text-zinc-300 border border-white/[0.06] flex items-center gap-1">
+          <Webhook className="w-3 h-3 text-[#1d8cf8]" /> Webhook
         </span>
       );
     }
@@ -173,12 +173,12 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
   if (!activeCard) {
     return (
-      <div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#222428] border border-white/[0.08] text-center shadow-card">
-        <div className="w-12 h-12 rounded-2xl bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm">
+      <div className="max-w-xl mx-auto mt-2 p-6 bg-[#222428] border border-white/[0.08] text-center">
+        <div className="w-12 h-12 bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm">
           <Sparkles className="w-6 h-6" />
         </div>
         <h2 className="text-xl font-bold text-white mb-1.5">Inbox Zero</h2>
-        <p className="text-zinc-400 text-sm max-w-sm mx-auto mb-6">
+        <p className="text-zinc-400 text-sm max-w-sm mx-auto mb-4">
           Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
         </p>
 
@@ -235,7 +235,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         {nextCard && (
           <div
             key={nextCard.id + '-preview'}
-            className="absolute inset-x-3 top-4 bottom-0 rounded-3xl bg-[#222428]/60 border border-white/[0.06] p-6 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
+            className="absolute inset-x-3 top-4 bottom-0 bg-[#222428]/60 border border-white/[0.06] p-4 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
           >
             <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
             <p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p>
@@ -262,19 +262,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             initial={{ scale: 0.96, opacity: 0, y: 12 }}
             animate={{ scale: 1, opacity: 1, y: 0 }}
             exit={{ scale: 0.92, opacity: 0 }}
-            className="relative w-full h-full rounded-3xl bg-[#222428] border p-6 sm:p-7 shadow-card cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
+            className="relative w-full h-full bg-[#222428] border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
           >
             {/* Dynamic Swipe Overlays */}
             <motion.div
               style={{ opacity: keepOpacity }}
-              className="pointer-events-none absolute top-5 right-5 px-3 py-1 rounded-full bg-[#22c55e]/20 border border-[#22c55e] text-[#22c55e] font-semibold text-xs tracking-wide uppercase"
+              className="pointer-events-none absolute top-4 right-4 px-2.5 py-1 bg-[#1d8cf8]/20 border border-[#1d8cf8] text-[#1d8cf8] font-semibold text-xs tracking-wide uppercase"
             >
               Behalten 👉
             </motion.div>
 
             <motion.div
               style={{ opacity: discardOpacity }}
-              className="pointer-events-none absolute top-5 left-5 px-3 py-1 rounded-full bg-[#ef4444]/20 border border-[#ef4444] text-[#ef4444] font-semibold text-xs tracking-wide uppercase"
+              className="pointer-events-none absolute top-4 left-4 px-2.5 py-1 bg-white/10 border border-white/30 text-zinc-300 font-semibold text-xs tracking-wide uppercase"
             >
               👈 Weg damit
             </motion.div>
@@ -310,7 +310,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                   activeCard.tags.map((tag) => (
                     <span
                       key={tag}
-                      className="px-2.5 py-0.5 rounded-full bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] text-xs flex items-center gap-1 font-medium"
+                      className="px-2.5 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] text-xs flex items-center gap-1 font-medium"
                     >
                       <Tag className="w-2.5 h-2.5" />#{tag}
                     </span>
@@ -321,7 +321,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
               </div>
 
               {activeCard.dueDate && (
-                <span className="px-2.5 py-0.5 rounded-full bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
+                <span className="px-2.5 py-0.5 bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
                   📅 {activeCard.dueDate}
                 </span>
               )}
@@ -332,7 +332,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
       {/* Convert to Task Date Picker Popover */}
       {showDateModal && (
-        <div className="mt-3 p-3.5 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
+        <div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
           <div className="flex items-center gap-2 text-xs text-zinc-300">
             <Calendar className="w-4 h-4 text-[#1d8cf8]" />
             <span>Fälligkeitsdatum für Aufgabe:</span>
@@ -342,7 +342,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
               type="date"
               value={taskDueDate}
               onChange={(e) => setTaskDueDate(e.target.value)}
-              className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
+              className="bg-[#16171a] text-white px-3 py-1 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
             />
             <button
               onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
@@ -356,7 +356,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
       {/* Convert to Shopping List Item Popover */}
       {showListSelector && (
-        <div className="mt-3 p-3.5 rounded-2xl bg-[#222428] border border-white/[0.08]">
+        <div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08]">
           <p className="text-xs text-zinc-400 mb-2">
             In welche Liste verschieben?
           </p>
@@ -382,12 +382,12 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
       )}
 
       {/* Primary Triage Action Pills */}
-      <div className="mt-5 flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
+      <div className="mt-3 flex flex-wrap items-center justify-center gap-2">
         {/* Swipe Left: Discard */}
         <button
           onClick={() => handleAction('discard')}
           title="Verwerfen (Taste H oder Pfeil links)"
-          className="h-10 px-4 rounded-full border border-[#ef4444]/40 text-[#ef4444] hover:bg-[#ef4444]/15 font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
+          className="h-9 px-3.5 rounded-full border border-white/20 text-zinc-300 hover:text-white hover:bg-white/[0.06] font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
         >
           <X className="w-4 h-4" />
           <span>Weg damit</span>
@@ -400,10 +400,10 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             setShowDateModal((prev) => !prev);
           }}
           title="Als Aufgabe mit Datum (Taste T)"
-          className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
+          className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
             showDateModal
               ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
-              : 'bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border-white/[0.06]'
+              : 'bg-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
           }`}
         >
           <Calendar className="w-3.5 h-3.5 text-[#1d8cf8]" />
@@ -414,7 +414,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         <button
           onClick={() => handleAction('keep', { convertTo: 'document' })}
           title="In Notiz / Projekt umwandeln (Taste D)"
-          className="h-10 px-3.5 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-zinc-300 hover:text-white text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
+          className="h-9 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-zinc-300 hover:text-white text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
         >
           <FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
           <span>Als Notiz</span>
@@ -427,13 +427,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             setShowListSelector((prev) => !prev);
           }}
           title="Auf eine geteilte Liste setzen"
-          className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
+          className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
             showListSelector
-              ? 'bg-[#22c55e]/20 text-[#22c55e] border-[#22c55e]/40 font-medium'
-              : 'bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border-white/[0.06]'
+              ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
+              : 'bg-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
           }`}
         >
-          <ShoppingCart className="w-3.5 h-3.5 text-[#22c55e]" />
+          <ShoppingCart className="w-3.5 h-3.5 text-[#1d8cf8]" />
           <span>Auf Liste</span>
         </button>
 
@@ -441,7 +441,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         <button
           onClick={() => handleAction('keep')}
           title="Behalten & sichern (Taste L oder Pfeil rechts)"
-          className="h-10 px-5 rounded-full bg-[#22c55e] hover:bg-[#16a34a] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 shadow-sm transition-colors active:scale-95"
+          className="h-9 px-4 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 shadow-sm transition-colors active:scale-95"
         >
           <Check className="w-4 h-4" />
           <span>Behalten</span>
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 97cefb3..6dfb1a0 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -204,10 +204,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   );
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 max-w-6xl mx-auto">
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
       {/* Left Document List Sidebar */}
-      <div className="lg:col-span-4 space-y-3">
-        <div className="flex items-center gap-2">
+      <div className="lg:col-span-4 bg-[#222428] border border-white/[0.08] flex flex-col self-start">
+        <div className="flex items-center gap-2 p-2 border-b border-white/[0.06]">
           <div className="relative flex-1">
             <Search className="w-4 h-4 text-zinc-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
             <input
@@ -215,34 +215,34 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder="Notizen durchsuchen…"
-              className="w-full h-11 pl-9 pr-4 rounded-2xl bg-[#222428] text-xs sm:text-sm text-white placeholder-zinc-500 border border-white/[0.06] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+              className="w-full h-9 pl-9 pr-3 bg-[#16171a] text-xs sm:text-sm text-white placeholder-zinc-500 border border-white/[0.06] focus:outline-none focus:border-[#1d8cf8] transition-colors"
             />
           </div>
 
           <button
             onClick={handleCreateDoc}
-            className="h-11 px-4 rounded-full bg-[#1d8cf8] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors flex-shrink-0 shadow-sm"
+            className="h-9 px-4 rounded-full bg-[#1d8cf8] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors flex-shrink-0"
           >
             <Plus className="w-4 h-4" />
             <span>Neu</span>
           </button>
         </div>
 
-        <div className="space-y-2 max-h-[540px] overflow-y-auto pr-1">
+        <div className="divide-y divide-white/[0.06] max-h-[calc(100vh-240px)] overflow-y-auto">
           {filteredDocs.map((doc) => {
             const active = selectedDoc?.id === doc.id;
             return (
               <button
                 key={doc.id}
                 onClick={() => setSelectedDoc(doc)}
-                className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-all flex items-start justify-between gap-3 ${
+                className={`w-full text-left pl-2.5 pr-3 py-2 transition-colors flex items-start justify-between gap-3 border-l-2 ${
                   active
-                    ? 'bg-[#282a2f] border border-[#1d8cf8]/70 shadow-sm'
-                    : 'bg-[#222428] hover:bg-[#282a2f] border border-white/[0.06]'
+                    ? 'bg-[#282a2f] border-l-[#1d8cf8]'
+                    : 'border-l-transparent hover:bg-[#282a2f]'
                 }`}
               >
-                <div className="flex items-start gap-3 min-w-0">
-                  <span className="text-2xl flex-shrink-0">{doc.icon}</span>
+                <div className="flex items-start gap-2.5 min-w-0">
+                  <span className="text-lg leading-6 flex-shrink-0">{doc.icon}</span>
                   <div className="min-w-0">
                     <h4 className="font-medium text-sm text-white truncate">{doc.title}</h4>
                     <p className="text-xs text-zinc-400 truncate mt-0.5">
@@ -260,13 +260,13 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       {/* Right Block Editor */}
       <div className="lg:col-span-8">
         {selectedDoc ? (
-          <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
+          <div className="p-4 bg-[#222428] border border-white/[0.08]">
             {/* Document Top Action Bar */}
-            <div className="flex flex-wrap items-center justify-between gap-3 pb-4 mb-6 border-b border-white/[0.06]">
+            <div className="flex flex-wrap items-center justify-between gap-3 pb-3 mb-3 border-b border-white/[0.06]">
               <div className="flex items-center gap-2 text-xs text-zinc-400">
-                <span className="px-3 py-1 rounded-full bg-[#16171a] text-[#22c55e] border border-white/[0.06] flex items-center gap-1 font-medium">
+                <span className="px-2 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1 font-medium">
                   <Check className="w-3 h-3" />
-                  {saveState === 'saving' ? 'Speichert…' : 'Automatisch gespeichert'}
+                  {saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
                 </span>
                 <span>• {selectedDoc.blocks.length} Blöcke</span>
               </div>
@@ -304,18 +304,18 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             </div>
 
             {/* Document Icon & Title */}
-            <div className="flex items-center gap-3 mb-6 relative">
+            <div className="flex items-center gap-3 mb-4 relative">
               <button
                 type="button"
                 onClick={() => setShowIconPicker((prev) => !prev)}
-                className="w-12 h-12 rounded-2xl bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
+                className="w-12 h-12 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
                 title="Icon ändern"
               >
                 {selectedDoc.icon}
               </button>
 
               {showIconPicker && (
-                <div className="absolute top-14 left-0 z-20 p-2.5 rounded-2xl bg-[#222428] border border-white/[0.12] shadow-card flex flex-wrap gap-1.5 w-64">
+                <div className="absolute top-14 left-0 z-20 p-2.5 bg-[#222428] border border-white/[0.12] flex flex-wrap gap-1 w-64">
                   {ICONS.map((ic) => (
                     <button
                       key={ic}
@@ -383,7 +383,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           type="checkbox"
                           checked={!!block.checked}
                           onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
-                          className="w-4 h-4 rounded accent-[#22c55e] cursor-pointer"
+                          className="w-4 h-4 accent-[#1d8cf8] cursor-pointer"
                         />
                         <input
                           type="text"
@@ -399,7 +399,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
                     {block.type === 'bullet' && (
                       <div className="flex items-center gap-3 py-0.5">
-                        <span className="w-1.5 h-1.5 rounded-full bg-[#1d8cf8] flex-shrink-0" />
+                        <span className="w-1.5 h-1.5 bg-[#1d8cf8] flex-shrink-0" />
                         <input
                           type="text"
                           value={block.content}
@@ -411,8 +411,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     )}
 
                     {block.type === 'callout' && (
-                      <div className="p-4 rounded-2xl bg-[#16171a] border border-[#1d8cf8]/30 flex items-start gap-3">
-                        <Sparkles className="w-4 h-4 text-[#1d8cf8] flex-shrink-0 mt-1" />
+                      <div className="p-3 bg-[#16171a] border border-[#1d8cf8]/40 flex items-start gap-2.5">
+                        <Sparkles className="w-4 h-4 text-[#1d8cf8] flex-shrink-0 mt-0.5" />
                         <textarea
                           rows={2}
                           value={block.content}
@@ -424,7 +424,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     )}
 
                     {block.type === 'code' && (
-                      <div className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#22c55e]">
+                      <div className="p-3 bg-[#16171a] border border-white/[0.08] font-mono text-xs sm:text-sm text-zinc-200">
                         <textarea
                           rows={Math.max(2, block.content.split('\n').length)}
                           value={block.content}
@@ -467,14 +467,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               ))}
             </div>
 
-            {/* Add Block Pill Toolbar */}
-            <div className="mt-8 pt-4 border-t border-white/[0.06] flex flex-wrap items-center gap-2">
+            {/* Add Block Toolbar */}
+            <div className="mt-4 pt-3 border-t border-white/[0.06] flex flex-wrap items-center gap-1.5">
               <span className="text-xs text-zinc-400 mr-1">+ Block einfügen:</span>
 
               <button
                 type="button"
                 onClick={() => addBlock('paragraph')}
-                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
                 <AlignLeft className="w-3.5 h-3.5 text-[#1d8cf8]" /> Text
               </button>
@@ -482,7 +482,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 type="button"
                 onClick={() => addBlock('h2')}
-                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
                 <Heading2 className="w-3.5 h-3.5 text-[#1d8cf8]" /> Überschrift
               </button>
@@ -490,15 +490,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 type="button"
                 onClick={() => addBlock('todo')}
-                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
-                <CheckSquare className="w-3.5 h-3.5 text-[#22c55e]" /> Checkliste
+                <CheckSquare className="w-3.5 h-3.5 text-[#1d8cf8]" /> Checkliste
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('bullet')}
-                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
                 <List className="w-3.5 h-3.5 text-[#1d8cf8]" /> Aufzählung
               </button>
@@ -506,30 +506,30 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 type="button"
                 onClick={() => addBlock('callout')}
-                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
-                <Sparkles className="w-3.5 h-3.5 text-[#a855f7]" /> Callout
+                <Sparkles className="w-3.5 h-3.5 text-[#1d8cf8]" /> Callout
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('code')}
-                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
-                <Code className="w-3.5 h-3.5 text-[#22c55e]" /> Codeblock
+                <Code className="w-3.5 h-3.5 text-[#1d8cf8]" /> Codeblock
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('h1')}
-                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
               >
                 <Heading1 className="w-3.5 h-3.5 text-[#1d8cf8]" /> H1
               </button>
             </div>
           </div>
         ) : (
-          <div className="p-12 rounded-3xl bg-[#222428] border border-white/[0.08] text-center text-zinc-400">
+          <div className="p-8 bg-[#222428] border border-white/[0.08] text-center text-zinc-400">
             Wähle links ein Dokument aus oder erstelle ein neues Projekt.
           </div>
         )}