diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 355a116..dad2a96 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -21,6 +21,8 @@
         <button :class="{active: view === 'files'}" @click="view = 'files'">📄 Files</button>
         <button :class="{active: view === 'shared'}" @click="view = 'shared'">🤝 Shared</button>
         <button :class="{active: view === 'trash'}" @click="view = 'trash'; loadTrash()" @dragover.prevent @drop.prevent="dropToTrash($event)">🗑️ Trash</button>
+      </div>
+      <div class="sidebar-nav">
         <button :class="{active: view === 'prefs'}" @click="view = 'prefs'">⚙️</button>
         <button v-if="isAdmin" :class="{active: view === 'admin'}" @click="view = 'admin'">👤</button>
         <button @click="logout" title="Logout">🚪</button>
@@ -1023,7 +1025,7 @@ function download(filename, content, mime) {
 
 <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-primary); color: var(--text); }
 
 :root, [data-theme="dark"] {
   --bg-primary: #1e1e2e;
@@ -1058,6 +1060,8 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
 .app {
   display: flex;
   height: 100vh;
+  background: var(--bg-primary);
+  color: var(--text);
 }
 
 /* ─── Sidebar ─────────────────────────────────────────────────────────────── */