diff --git a/public/js/resources_js_Pages_Exports_vue.js b/public/js/resources_js_Pages_Exports_vue.js
index ecef919..b4c0cfb 100644
--- a/public/js/resources_js_Pages_Exports_vue.js
+++ b/public/js/resources_js_Pages_Exports_vue.js
@@ -910,6 +910,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
 // import GoogleReCaptchaV3 from "./GoogleReCaptchaV3";
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
@@ -1643,7 +1651,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "\n.validation-error {\n  color: rgb(255, 0, 0);\n}\n", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, "\n.validation-error {\n  color: rgb(255, 0, 0);\n}\n.vue-country-select {\n  border-color: #004691 !important;\n}\n.vue-country-select .dropdown {\n  padding: 0 0.3em 0 0!important;\n}\n.vue-country-select .dropdown-list {\n  z-index: 2 !important;\n  border-color: #004691 !important;\n}\n.vue-country-select .dropdown-item.last-preferred {\n  border-bottom: 1px solid #004691 !important;\n}\n", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -2113,26 +2121,49 @@ var render = function() {
                   "a-form-item",
                   { attrs: { label: _vm.trans("Phone") } },
                   [
-                    _c("vue-country-code", {
-                      attrs: {
-                        preferredCountries: ["tm"],
-                        defaultCountry: "tm"
-                      },
-                      on: { onSelect: _vm.onSelect }
-                    }),
-                    _vm._v(" "),
-                    _c("span", [_vm._v(_vm._s(_vm.countryCode))]),
-                    _vm._v(" "),
-                    _c("a-input", {
-                      attrs: { placeholder: _vm.trans("Phone") },
-                      model: {
-                        value: _vm.form.phone,
-                        callback: function($$v) {
-                          _vm.$set(_vm.form, "phone", $$v)
-                        },
-                        expression: "form.phone"
-                      }
-                    }),
+                    _c(
+                      "a-row",
+                      { attrs: { gutter: 8, type: "flex", align: "middle" } },
+                      [
+                        _c(
+                          "a-col",
+                          { attrs: { span: 3 } },
+                          [
+                            _c("vue-country-code", {
+                              attrs: {
+                                preferredCountries: ["tm"],
+                                defaultCountry: "tm"
+                              },
+                              on: { onSelect: _vm.onSelect }
+                            })
+                          ],
+                          1
+                        ),
+                        _vm._v(" "),
+                        _c("a-col", { attrs: { span: 2 } }, [
+                          _c("span", [_vm._v(_vm._s(_vm.countryCode))])
+                        ]),
+                        _vm._v(" "),
+                        _c(
+                          "a-col",
+                          { attrs: { span: 19 } },
+                          [
+                            _c("a-input", {
+                              attrs: { placeholder: _vm.trans("Phone") },
+                              model: {
+                                value: _vm.form.phone,
+                                callback: function($$v) {
+                                  _vm.$set(_vm.form, "phone", $$v)
+                                },
+                                expression: "form.phone"
+                              }
+                            })
+                          ],
+                          1
+                        )
+                      ],
+                      1
+                    ),
                     _vm._v(" "),
                     _vm.validationErrorsObj.phone
                       ? _vm._l(_vm.validationErrorsObj.phone, function(item) {
diff --git a/public/js/resources_js_Pages_Imports_vue.js b/public/js/resources_js_Pages_Imports_vue.js
index 5f0a258..803bd9a 100644
--- a/public/js/resources_js_Pages_Imports_vue.js
+++ b/public/js/resources_js_Pages_Imports_vue.js
@@ -910,6 +910,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
 // import GoogleReCaptchaV3 from "./GoogleReCaptchaV3";
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
@@ -1528,7 +1536,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "\n.validation-error {\n  color: rgb(255, 0, 0);\n}\n", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, "\n.validation-error {\n  color: rgb(255, 0, 0);\n}\n.vue-country-select {\n  border-color: #004691 !important;\n}\n.vue-country-select .dropdown {\n  padding: 0 0.3em 0 0!important;\n}\n.vue-country-select .dropdown-list {\n  z-index: 2 !important;\n  border-color: #004691 !important;\n}\n.vue-country-select .dropdown-item.last-preferred {\n  border-bottom: 1px solid #004691 !important;\n}\n", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1998,26 +2006,49 @@ var render = function() {
                   "a-form-item",
                   { attrs: { label: _vm.trans("Phone") } },
                   [
-                    _c("vue-country-code", {
-                      attrs: {
-                        preferredCountries: ["tm"],
-                        defaultCountry: "tm"
-                      },
-                      on: { onSelect: _vm.onSelect }
-                    }),
-                    _vm._v(" "),
-                    _c("span", [_vm._v(_vm._s(_vm.countryCode))]),
-                    _vm._v(" "),
-                    _c("a-input", {
-                      attrs: { placeholder: _vm.trans("Phone") },
-                      model: {
-                        value: _vm.form.phone,
-                        callback: function($$v) {
-                          _vm.$set(_vm.form, "phone", $$v)
-                        },
-                        expression: "form.phone"
-                      }
-                    }),
+                    _c(
+                      "a-row",
+                      { attrs: { gutter: 8, type: "flex", align: "middle" } },
+                      [
+                        _c(
+                          "a-col",
+                          { attrs: { span: 3 } },
+                          [
+                            _c("vue-country-code", {
+                              attrs: {
+                                preferredCountries: ["tm"],
+                                defaultCountry: "tm"
+                              },
+                              on: { onSelect: _vm.onSelect }
+                            })
+                          ],
+                          1
+                        ),
+                        _vm._v(" "),
+                        _c("a-col", { attrs: { span: 2 } }, [
+                          _c("span", [_vm._v(_vm._s(_vm.countryCode))])
+                        ]),
+                        _vm._v(" "),
+                        _c(
+                          "a-col",
+                          { attrs: { span: 19 } },
+                          [
+                            _c("a-input", {
+                              attrs: { placeholder: _vm.trans("Phone") },
+                              model: {
+                                value: _vm.form.phone,
+                                callback: function($$v) {
+                                  _vm.$set(_vm.form, "phone", $$v)
+                                },
+                                expression: "form.phone"
+                              }
+                            })
+                          ],
+                          1
+                        )
+                      ],
+                      1
+                    ),
                     _vm._v(" "),
                     _vm.validationErrorsObj.phone
                       ? _vm._l(_vm.validationErrorsObj.phone, function(item) {
diff --git a/resources/js/Components/CreateRequestModal.vue b/resources/js/Components/CreateRequestModal.vue
index 4bf3cc2..d60f64c 100644
--- a/resources/js/Components/CreateRequestModal.vue
+++ b/resources/js/Components/CreateRequestModal.vue
@@ -25,13 +25,21 @@
           <a-form-item
             :label="trans('Phone')"
           >
-            <vue-country-code
-              @onSelect="onSelect"
-              :preferredCountries="['tm']"
-              :defaultCountry="'tm'">
-            </vue-country-code>
-            <span>{{ countryCode }}</span>
-            <a-input v-model="form.phone" :placeholder="trans('Phone')" />
+            <a-row :gutter="8" type="flex" align="middle">
+              <a-col :span="3">
+                <vue-country-code
+                  @onSelect="onSelect"
+                  :preferredCountries="['tm']"
+                  :defaultCountry="'tm'">
+                </vue-country-code>
+              </a-col>
+              <a-col :span="2">
+                <span>{{ countryCode }}</span>
+              </a-col>
+              <a-col :span="19">
+                <a-input v-model="form.phone" :placeholder="trans('Phone')" />
+              </a-col>
+            </a-row>
             <template v-if="validationErrorsObj.phone">
               <span class="validation-error" v-for="item in validationErrorsObj.phone" :key="item">{{ item }}</span>
             </template>
@@ -283,4 +291,17 @@ export default {
 .validation-error {
   color: rgb(255, 0, 0);
 }
+.vue-country-select {
+  border-color: #004691 !important;
+}
+.vue-country-select .dropdown {
+  padding: 0 0.3em 0 0!important;
+}
+.vue-country-select .dropdown-list {
+  z-index: 2 !important;
+  border-color: #004691 !important;
+}
+.vue-country-select .dropdown-item.last-preferred {
+  border-bottom: 1px solid #004691 !important;
+}
 </style>