diff --git a/static/css/app.css b/static/css/app.css
index 2ae770b..afac155 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -890,15 +890,36 @@ a:hover {
         grid-template-columns: 1fr;
     }
 
+    /* Header mobile optimization */
+    .app-header {
+        padding: var(--space-sm) var(--space-md);
+    }
+
+    .header-user span {
+        display: none; /* Hide email on mobile */
+    }
+
+    .app-header-actions {
+        gap: var(--space-xs);
+    }
+
+    .app-brand {
+        font-size: 1.1rem; /* Slightly smaller on mobile */
+    }
+
+    /* Sidebar drawer - improved positioning */
     .app-sidebar {
         position: fixed;
         left: 0;
         top: var(--header-height);
         bottom: 0;
-        width: 260px;
-        z-index: 50;
+        width: 280px; /* Slightly wider for touch targets */
+        z-index: 100; /* Higher z-index */
         transform: translateX(-100%);
-        transition: transform var(--anim-normal);
+        transition: transform 0.3s ease-in-out;
+        background: var(--bg-primary);
+        box-shadow: var(--shadow-lg);
+        overflow-y: auto;
     }
 
     .app-sidebar.open {
@@ -909,13 +930,129 @@ a:hover {
         display: flex;
     }
 
+    /* Detail pane mobile */
     .detail-pane {
         width: 100%;
+        max-width: 100vw;
+        padding: var(--space-md);
     }
 
+    /* Forms */
     .form-row {
         grid-template-columns: 1fr;
     }
+
+    .form-group {
+        margin-bottom: var(--space-md);
+    }
+
+    /* Task list mobile optimization */
+    .task-item {
+        padding: var(--space-sm);
+    }
+
+    .task-meta {
+        flex-wrap: wrap;
+        gap: var(--space-xs);
+        font-size: 0.75rem;
+    }
+
+    .priority-badge {
+        font-size: 0.7rem;
+        padding: 2px 6px;
+    }
+
+    .tag {
+        font-size: 0.7rem;
+        padding: 2px 6px;
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    /* Touch targets - 44px minimum */
+    .task-item-checkbox {
+        width: 24px;
+        height: 24px;
+    }
+
+    .btn {
+        min-height: 44px;
+        padding: var(--space-sm) var(--space-md);
+    }
+
+    .sidebar-toggle {
+        min-width: 44px;
+        min-height: 44px;
+        padding: var(--space-sm);
+    }
+
+    .theme-toggle {
+        min-width: 44px;
+        min-height: 44px;
+    }
+
+    /* Modal on mobile */
+    .modal {
+        width: 95%;
+        max-width: 400px;
+        max-height: 90vh;
+        overflow-y: auto;
+    }
+
+    /* Mobile utility classes */
+    .mobile-only {
+        display: block;
+    }
+
+    .desktop-only {
+        display: none !important;
+    }
+
+    .mobile-full-width {
+        width: 100% !important;
+    }
+}
+
+/* Very small phones breakpoint */
+@media (max-width: 480px) {
+    .app-header {
+        padding: var(--space-xs) var(--space-sm);
+    }
+
+    .app-brand {
+        font-size: 1rem;
+    }
+
+    .btn {
+        padding: var(--space-xs) var(--space-sm);
+        font-size: 0.875rem;
+    }
+
+    .app-sidebar {
+        width: 260px; /* Narrower on very small screens */
+    }
+
+    /* Stack Profile and Logout buttons vertically */
+    .header-user {
+        flex-direction: column;
+        gap: var(--space-xs);
+        align-items: stretch;
+    }
+
+    .header-user .btn {
+        width: 100%;
+        font-size: 0.8rem;
+    }
+}
+
+/* Mobile utility classes base definitions */
+.mobile-only {
+    display: none;
+}
+
+.desktop-only {
+    display: block;
 }
 
 /* Sidebar toggle button (visible on mobile) */