diff --git a/resources/assets/js/components/CreditCard/CardForm.vue b/resources/assets/js/components/CreditCard/CardForm.vue
index 367d0ae93..a0e01a8c5 100644
--- a/resources/assets/js/components/CreditCard/CardForm.vue
+++ b/resources/assets/js/components/CreditCard/CardForm.vue
@@ -3,6 +3,28 @@
     <div class="card" v-if="card">
         <div class="row align-items-center">
             <div class="col-md-6 p-5">
+                <div class="form-group">
+                    <label for="cardName" class="form-control-label">{{ textCardName }}</label>
+                    <div class="input-group input-group-merge">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text">
+                                <i class="fas fa-font"></i>
+                            </span>
+                        </div>
+                        <input
+                            type="text"
+                            :id="fields.cardName"
+                            v-letter-only
+                            @input="changeName"
+                            class="form-control"
+                            :placeholder="placeholderCardName"
+                            :value="formData.cardName"
+                            data-card-field
+                            autocomplete="off"
+                        />
+                    </div>
+                </div>
+
                 <div class="form-group">
                     <label for="cardNumber" class="form-control-label">{{ textCardNumber }}</label>
                     <div class="input-group input-group-merge">
@@ -27,28 +49,6 @@
                     </div>
                 </div>
 
-                <div class="form-group">
-                    <label for="cardName" class="form-control-label">{{ textCardName }}</label>
-                    <div class="input-group input-group-merge">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text">
-                                <i class="fas fa-font"></i>
-                            </span>
-                        </div>
-                        <input
-                            type="text"
-                            :id="fields.cardName"
-                            v-letter-only
-                            @input="changeName"
-                            class="form-control"
-                            :placeholder="placeholderCardName"
-                            :value="formData.cardName"
-                            data-card-field
-                            autocomplete="off"
-                        />
-                    </div>
-                </div>
-
                 <div class="row">
                     <div class="col-md-7">
                         <label for="cardMonth" class="form-control-label">{{ textExpirationDate }}</label>