diff --git a/src/App.css b/src/App.css
index 7948eee..990a347 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,8 @@
 .app-container {
   max-width: 100%;
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
 
 .loading-state {
diff --git a/src/components/mesocycles/MesocycleDashboard.css b/src/components/mesocycles/MesocycleDashboard.css
index 1c58ea4..8b1fdde 100644
--- a/src/components/mesocycles/MesocycleDashboard.css
+++ b/src/components/mesocycles/MesocycleDashboard.css
@@ -120,3 +120,15 @@
     font-size: 1.25rem;
   }
 }
+
+/* Extra small screens */
+@media (max-width: 400px) {
+  .dashboard-title {
+    font-size: 1.375rem;
+  }
+
+  .filter-tab {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+  }
+}
diff --git a/src/components/progress/ProgressTracker.css b/src/components/progress/ProgressTracker.css
index 54c8a49..7a774ab 100644
--- a/src/components/progress/ProgressTracker.css
+++ b/src/components/progress/ProgressTracker.css
@@ -103,3 +103,19 @@
     font-size: 0.85rem;
   }
 }
+
+/* Extra small screens */
+@media (max-width: 400px) {
+  .progress-header h1 {
+    font-size: 1.125rem;
+  }
+
+  .progress-subtitle {
+    font-size: 0.8125rem;
+  }
+
+  .tab-btn {
+    padding: 0.5rem 0.625rem;
+    font-size: 0.8125rem;
+  }
+}
diff --git a/src/components/workouts/SetLogger.css b/src/components/workouts/SetLogger.css
index e4b85be..9268895 100644
--- a/src/components/workouts/SetLogger.css
+++ b/src/components/workouts/SetLogger.css
@@ -322,3 +322,45 @@
     width: 60px;
   }
 }
+
+/* Extra small screens */
+@media (max-width: 400px) {
+  .set-logger {
+    grid-template-columns: 26px 1fr 48px 42px 88px;
+    gap: 0.1875rem;
+    padding: 0.375rem 0.1875rem;
+  }
+
+  .set-number {
+    width: 1.375rem;
+    height: 1.375rem;
+    font-size: 0.625rem;
+  }
+
+  .weight-input,
+  .reps-input,
+  .rir-input {
+    font-size: 0.8125rem;
+    padding: 0.25rem;
+  }
+
+  .reps-input {
+    max-width: 48px;
+  }
+
+  .rir-input {
+    max-width: 42px;
+  }
+
+  .btn-add-rir,
+  .btn-complete-set,
+  .btn-remove-set,
+  .btn-uncomplete-set {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .set-actions {
+    gap: 0.0625rem;
+  }
+}
diff --git a/src/components/workouts/WorkoutExerciseCard.css b/src/components/workouts/WorkoutExerciseCard.css
index 7de8515..13836f9 100644
--- a/src/components/workouts/WorkoutExerciseCard.css
+++ b/src/components/workouts/WorkoutExerciseCard.css
@@ -174,3 +174,36 @@
     grid-template-columns: 60px 100px 1fr 100px 80px 100px;
   }
 }
+
+/* Extra small screens */
+@media (max-width: 400px) {
+  .workout-exercise-header {
+    padding: 0.75rem;
+  }
+
+  .workout-exercise-title h3 {
+    font-size: 0.9375rem;
+  }
+
+  .exercise-number {
+    width: 1.625rem;
+    height: 1.625rem;
+    font-size: 0.75rem;
+  }
+
+  .workout-sets {
+    padding: 0.625rem;
+  }
+
+  .sets-header {
+    grid-template-columns: 26px 1fr 48px 42px 88px;
+    font-size: 0.5625rem;
+    padding: 0.3125rem 0.1875rem;
+    gap: 0.1875rem;
+  }
+
+  .btn-add-set {
+    padding: 0.5625rem;
+    font-size: 0.8125rem;
+  }
+}
diff --git a/src/index.css b/src/index.css
index 2ad2934..dbcf39e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,6 +5,13 @@
   box-sizing: border-box;
 }
 
+/* Prevent horizontal overflow globally */
+html,
+body {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
 :root {
   font-family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
diff --git a/src/layouts/Layout.css b/src/layouts/Layout.css
index 3fe06fd..fcb0740 100644
--- a/src/layouts/Layout.css
+++ b/src/layouts/Layout.css
@@ -4,6 +4,9 @@
   min-height: 100vh;
   /* Add padding for mobile bottom navigation */
   padding-bottom: env(safe-area-inset-bottom);
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+  max-width: 100%;
 }
 
 .header {
@@ -11,12 +14,18 @@
   color: white;
   padding: 1rem 0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+  max-width: 100%;
 }
 
 .container {
   max-width: var(--container-max-width, 1200px);
   margin: 0 auto;
   padding: 0 var(--container-padding, 1rem);
+  /* Ensure container doesn't cause horizontal overflow */
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .header .container {
@@ -189,3 +198,37 @@
     font-size: 1.0625rem;
   }
 }
+
+/* Extra small screens (Galaxy S24, iPhone SE, etc.) */
+@media (max-width: 400px) {
+  :root {
+    --container-padding: 0.75rem;
+  }
+
+  .header {
+    padding: 0.75rem 0;
+  }
+
+  .logo {
+    font-size: 1.25rem;
+  }
+
+  .nav-mobile {
+    padding: 0.375rem 0;
+    padding-bottom: calc(0.375rem + env(safe-area-inset-bottom));
+  }
+
+  .nav-mobile-link {
+    min-width: 40px;
+    padding: 0.125rem 0.25rem;
+    max-width: 70px;
+  }
+
+  .nav-mobile-icon {
+    font-size: 1.25rem;
+  }
+
+  .nav-mobile-label {
+    font-size: 0.5625rem;
+  }
+}