diff --git a/frontend/src/components/ThemeSwitcher.astro b/frontend/src/components/ThemeSwitcher.astro
index 5ccfb97..d714fcd 100644
--- a/frontend/src/components/ThemeSwitcher.astro
+++ b/frontend/src/components/ThemeSwitcher.astro
@@ -53,6 +53,15 @@
     font-size: 0.9rem;
     cursor: pointer;
     min-width: 200px;
+    width: 100%;
+    max-width: 320px;
+  }
+
+  @media (max-width: 480px) {
+    .theme-select {
+      min-width: 0;
+      max-width: 100%;
+    }
   }
 
   .theme-select:hover {
diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 99cae1f..7b582e6 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -1016,4 +1016,20 @@
       justify-content: flex-start;
     }
   }
+
+  @media (max-width: 420px) {
+    .ui-btn {
+      white-space: normal;
+      text-align: center;
+    }
+
+    .ui-btn-lg {
+      padding: 0.8rem 1.25rem;
+    }
+
+    .ui-btn-xl {
+      padding: 0.9rem 1.25rem;
+      font-size: 1rem;
+    }
+  }
 </style>
diff --git a/frontend/src/pages/demo.astro b/frontend/src/pages/demo.astro
index a0f7b7c..e7bfb44 100644
--- a/frontend/src/pages/demo.astro
+++ b/frontend/src/pages/demo.astro
@@ -531,6 +531,7 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
   .card-stats {
     display: flex;
     gap: 1rem;
+    flex-wrap: wrap;
     padding-top: 1rem;
     border-top: 1px solid var(--color-border);
     font-size: 0.8125rem;
@@ -708,6 +709,14 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     align-items: flex-start;
   }
 
+  @media (max-width: 480px) {
+    .journey-step {
+      flex-direction: column;
+      gap: 0.75rem;
+      align-items: stretch;
+    }
+  }
+
   .step-number {
     width: 36px;
     height: 36px;
diff --git a/frontend/src/pages/settings.astro b/frontend/src/pages/settings.astro
index 2f02fb9..977d358 100644
--- a/frontend/src/pages/settings.astro
+++ b/frontend/src/pages/settings.astro
@@ -181,6 +181,8 @@ import { API_BASE as apiBase } from '../lib/api';
   .settings-page {
     padding: 2rem 0;
     max-width: 500px;
+    width: 100%;
+    margin: 0 auto;
     --ui-form-group-mb: 1.25rem;
   }
 
@@ -189,6 +191,17 @@ import { API_BASE as apiBase } from '../lib/api';
     margin-bottom: 2rem;
   }
 
+  @media (max-width: 640px) {
+    .settings-page {
+      padding: 1.5rem 0;
+    }
+
+    h1 {
+      font-size: 1.75rem;
+      margin-bottom: 1.5rem;
+    }
+  }
+
   .settings-form {
     display: flex;
     flex-direction: column;