diff --git a/src/app/components/Preferences/PreferencesSelector.module.css b/src/app/components/Preferences/PreferencesSelector.module.css
index 221772c..5f2bb3c 100644
--- a/src/app/components/Preferences/PreferencesSelector.module.css
+++ b/src/app/components/Preferences/PreferencesSelector.module.css
@@ -11,6 +11,7 @@
   align-items: center;
   background: linear-gradient(135deg, #42475c 0%, #20222f 100%);
   z-index: 1000;
+  padding: 16px;
 }
 
 .card {
@@ -21,6 +22,8 @@
   background: rgba(255, 255, 255, 0.9);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);
+  max-height: calc(100vh - 32px);
+  overflow: auto;
 }
 
 .optionsContainer {
@@ -56,3 +59,39 @@
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2);
 }
+
+@media (max-width: 600px) {
+  .container {
+    align-items: flex-start;
+    padding: 12px;
+  }
+
+  .card {
+    width: 100%;
+    max-width: 100%;
+    padding: 1rem;
+    border-radius: 14px;
+    max-height: calc(100vh - 24px);
+  }
+
+  .optionsContainer {
+    margin: 1rem 0;
+  }
+
+  .optionCard {
+    margin-bottom: 0.75rem;
+  }
+
+  .continueButton {
+    width: 100%;
+    min-width: 0;
+    height: 44px;
+    border-radius: 14px;
+  }
+}
+
+@media (max-width: 380px) {
+  .card {
+    padding: 0.85rem;
+  }
+}