diff --git a/libs/tools/generator/components/src/password-settings.component.html b/libs/tools/generator/components/src/password-settings.component.html
index 9481a247a5c..13bf6822462 100644
--- a/libs/tools/generator/components/src/password-settings.component.html
+++ b/libs/tools/generator/components/src/password-settings.component.html
@@ -15,8 +15,9 @@
     <div>
       <bit-card>
         <div class="tw-mb-4">{{ "include" | i18n }}</div>
-        <div class="tw-flex tw-flex-wrap tw-gap-8">
+        <div class="tw-mb-4 tw-flex tw-flex-wrap tw-gap-4 sm:tw-gap-8">
           <bit-form-control
+            class="!tw-mb-0"
             attr.aria-description="{{ 'uppercaseDescription' | i18n }}"
             title="{{ 'uppercaseDescription' | i18n }}"
           >
@@ -29,6 +30,7 @@
             <bit-label>{{ "uppercaseLabel" | i18n }}</bit-label>
           </bit-form-control>
           <bit-form-control
+            class="!tw-mb-0"
             attr.aria-description="{{ 'lowercaseDescription' | i18n }}"
             title="{{ 'lowercaseDescription' | i18n }}"
           >
@@ -41,6 +43,7 @@
             <bit-label>{{ "lowercaseLabel" | i18n }}</bit-label>
           </bit-form-control>
           <bit-form-control
+            class="!tw-mb-0"
             attr.aria-description="{{ 'numbersDescription' | i18n }}"
             title="{{ 'numbersDescription' | i18n }}"
           >
@@ -48,6 +51,7 @@
             <bit-label>{{ "numbersLabel" | i18n }}</bit-label>
           </bit-form-control>
           <bit-form-control
+            class="!tw-mb-0"
             attr.aria-description="{{ 'specialCharactersDescription' | i18n }}"
             title="{{ 'specialCharactersDescription' | i18n }}"
           >