diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
index dc5337e1..92187a14 100644
--- a/client/components/forms/PhoneInput.vue
+++ b/client/components/forms/PhoneInput.vue
@@ -12,7 +12,7 @@
     >
       <v-select
         v-model="selectedCountryCode"
-        class="w-[130px]"
+        :class="theme.PhoneInput.countrySelectWidth"
         dropdown-class="max-w-[300px]"
         input-class="rounded-r-none"
         :data="countries"
diff --git a/client/lib/forms/themes/form-themes.js b/client/lib/forms/themes/form-themes.js
index 3301a875..2edde5fe 100644
--- a/client/lib/forms/themes/form-themes.js
+++ b/client/lib/forms/themes/form-themes.js
@@ -74,6 +74,11 @@ export const themes = {
       }
     },
     PhoneInput: {
+      countrySelectWidth: {
+        sm: 'w-[100px]',
+        md: 'w-[120px]',
+        lg: 'w-[120px]'
+      },
       flag: {
         sm: '!-mt-[14px]',
         md: '!-mt-[9px] rounded',
@@ -220,6 +225,11 @@ export const themes = {
       }
     },
     PhoneInput: {
+      countrySelectWidth: {
+        sm: 'w-[100px]',
+        md: 'w-[120px]',
+        lg: 'w-[120px]'
+      },
       flag: {
         sm: '!-mt-[14px]',
         md: '!-mt-[9px] rounded',
@@ -360,6 +370,11 @@ export const themes = {
       }
     },
     PhoneInput: {
+      countrySelectWidth: {
+        sm: 'w-[100px]',
+        md: 'w-[120px]',
+        lg: 'w-[120px]'
+      },
       flag: {
         sm: '!-mt-[14px]',
         md: '!-mt-[9px] rounded',