diff --git a/app/templates/base.html b/app/templates/base.html
index 2980885..03306a2 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -69,6 +69,8 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
         }
         header h1 { 
             font-size: 1.5rem;
@@ -80,6 +82,7 @@
             display: flex;
             align-items: center;
             gap: 0.5rem;
+            flex-wrap: wrap;
         }
         nav a {
             color: white;
@@ -102,6 +105,69 @@
             filter: brightness(0) invert(1);
         }
         
+        /* Mobile Responsive */
+        @media (max-width: 768px) {
+            header .container {
+                flex-direction: column;
+                align-items: stretch;
+                padding: 1rem;
+            }
+            
+            header h1 {
+                font-size: 1.25rem;
+                justify-content: center;
+                text-align: center;
+            }
+            
+            nav {
+                flex-direction: column;
+                gap: 0.5rem;
+                width: 100%;
+            }
+            
+            nav a {
+                justify-content: center;
+                width: 100%;
+                padding: 0.75rem 1rem;
+            }
+            
+            .dark-mode-toggle {
+                margin-left: 0;
+                width: 100%;
+                padding: 0.75rem;
+            }
+            
+            .container {
+                padding: 15px;
+            }
+            
+            .card {
+                padding: 1rem;
+                margin-bottom: 1rem;
+            }
+            
+            .card-header {
+                padding: 15px;
+                margin: -1rem -1rem 1rem -1rem;
+            }
+        }
+        
+        @media (max-width: 480px) {
+            header h1 {
+                font-size: 1.1rem;
+            }
+            
+            nav a {
+                font-size: 0.9rem;
+                padding: 0.6rem 0.8rem;
+            }
+            
+            nav a img {
+                width: 16px;
+                height: 16px;
+            }
+        }
+        
         .dark-mode-toggle {
             background: rgba(255,255,255,0.2);
             border: 2px solid rgba(255,255,255,0.3);