diff --git a/resources/assets/js/components/AkauntingDocumentButton.vue b/resources/assets/js/components/AkauntingDocumentButton.vue
index a31b12c2c..8961ae918 100644
--- a/resources/assets/js/components/AkauntingDocumentButton.vue
+++ b/resources/assets/js/components/AkauntingDocumentButton.vue
@@ -14,7 +14,7 @@
                     <input 
                         type="text"
                         data-input="true"
-                        class="form-element px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
+                        class="w-full text-sm px-10 py-2.5 mt-1rounded-none border border-gray-200 border-t-0 border-l-0 border-r-0 text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
                         autocapitalize="default" 
                         autocorrect="ON" 
                         :placeholder="placeholder"
@@ -24,7 +24,7 @@
                     />
                 </div>
 
-                <ul class="form-element p-0 mt-0 border-0 cursor-pointer">
+                <ul class="w-full text-sm p-0 mt-0 rounded-lg border-0 border-light-gray text-black placeholder-light-gray bg-white cursor-pointer disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple">
                     <div 
                         class="hover:bg-gray-100 px-4" 
                         v-for="(item, index) in sortedItems" 
diff --git a/resources/assets/js/components/CreditCard/CardForm.vue b/resources/assets/js/components/CreditCard/CardForm.vue
index fc9ab38ef..c3779ae93 100644
--- a/resources/assets/js/components/CreditCard/CardForm.vue
+++ b/resources/assets/js/components/CreditCard/CardForm.vue
@@ -63,7 +63,7 @@
 
                 <div class="grid sm:grid-cols-8 gap-x-4 gap-y-6 my-3.5">
                     <div class="sm:col-span-8">
-                        <label for="cardName" class="form-control-label text-black text-sm font-medium">
+                        <label for="cardName" class="text-black text-sm font-medium">
                             {{ textCardName }}
                         </label>
 
@@ -83,7 +83,7 @@
                     </div>
 
                     <div class="sm:col-span-8">
-                        <label for="cardNumber" class="form-control-label text-black text-sm font-medium">
+                        <label for="cardNumber" class="text-black text-sm font-medium">
                             {{ textCardNumber }}
                         </label>
 
@@ -105,7 +105,7 @@
                     </div>
 
                     <div class="sm:col-span-3">
-                        <label for="cardMonth" class="form-control-label text-black text-sm font-medium">
+                        <label for="cardMonth" class="text-black text-sm font-medium">
                             {{ textExpirationDate }}
                         </label>
 
@@ -144,7 +144,7 @@
                     </div>
 
                     <div class="sm:col-span-2">
-                        <label for="cardCvv" class="form-control-label text-black text-sm font-medium">
+                        <label for="cardCvv" class="text-black text-sm font-medium">
                             {{ textCvv }}
                         </label>
 
@@ -168,7 +168,7 @@
                         <div class="flex items-center" v-if="storeCard">
                             <input @input="changeStoreCard" :id="'store_card' + _uid" name="store_card" type="checkbox" value="true" class="rounded-sm text-purple border-gray-300 cursor-pointer disabled:bg-gray-200 focus:outline-none focus:ring-transparent">
 
-                            <label :for="'store_card' + _uid" class="form-control-label ltr:ml-2 rtl:ml-2">
+                            <label :for="'store_card' + _uid" class="text-black text-sm font-medium ltr:ml-2 rtl:ml-2">
                                 <strong>{{ textStoreCard }}</strong>
                             </label>
                         </div>
@@ -200,7 +200,7 @@
 
             <div class="grid sm:grid-cols-8 gap-x-4 gap-y-6 my-3.5">
                 <div class="sm:col-span-8">
-                    <label for="cardName" class="form-control-label text-black text-sm font-medium">
+                    <label for="cardName" class="text-black text-sm font-medium">
                         {{ textCardName }}
                     </label>
 
@@ -220,7 +220,7 @@
                 </div>
 
                 <div class="sm:col-span-8">
-                    <label for="cardNumber" class="form-control-label text-black text-sm font-medium">
+                    <label for="cardNumber" class="text-black text-sm font-medium">
                         {{ textCardNumber }}
                     </label>
 
@@ -242,7 +242,7 @@
                 </div>
 
                 <div class="sm:col-span-3">
-                    <label for="cardMonth" class="form-control-label text-black text-sm font-medium">
+                    <label for="cardMonth" class="text-black text-sm font-medium">
                         {{ textExpirationDate }}
                     </label>
 
@@ -283,7 +283,7 @@
                 </div>
 
                 <div class="sm:col-span-2">
-                    <label for="cardCvv" class="form-control-label text-black text-sm font-medium">
+                    <label for="cardCvv" class="text-black text-sm font-medium">
                         {{ textCvv }}
                     </label>
 
@@ -307,7 +307,7 @@
                     <div class="flex items-center" v-if="storeCard">
                         <input @input="changeStoreCard" :id="'store_card' + _uid" name="store_card" type="checkbox" value="true" class="rounded-sm text-purple border-gray-300 cursor-pointer disabled:bg-gray-200 focus:outline-none focus:ring-transparent">
 
-                        <label :for="'store_card' + _uid" class="form-control-label ltr:ml-2 rtl:ml-2">
+                        <label :for="'store_card' + _uid" class="text-black text-sm font-medium ltr:ml-2 rtl:ml-2">
                             <strong>{{ textStoreCard }}</strong>
                         </label>
                     </div>
diff --git a/resources/views/banking/recurring_transactions/create.blade.php b/resources/views/banking/recurring_transactions/create.blade.php
index 3395463a7..4c2277789 100644
--- a/resources/views/banking/recurring_transactions/create.blade.php
+++ b/resources/views/banking/recurring_transactions/create.blade.php
@@ -26,7 +26,7 @@
 
                             <x-tooltip id="tooltip-paid" placement="bottom" message="{{ trans('documents.recurring.tooltip.document_date', ['type' => Str::lower(trans_choice('general.transactions', 1))]) }}">
                                 <div class="relative focused has-label">
-                                    <x-form.input.text name="disabled_transaction_paid" value="{{ trans('documents.recurring.auto_generated') }}" class="form-element" disabled />
+                                    <x-form.input.text name="disabled_transaction_paid" value="{{ trans('documents.recurring.auto_generated') }}" disabled />
                                 </div>
                             </x-tooltip>
 
@@ -81,7 +81,7 @@
 
                             <x-tooltip id="tooltip-number" placement="bottom" message="{{ trans('documents.recurring.tooltip.document_number', ['type' => Str::lower(trans_choice('general.transactions', 1))]) }}">
                                 <div class="relative focused has-label">
-                                    <x-form.input.text name="disabled_transaction_number" value="{{ trans('documents.recurring.auto_generated') }}" class="form-element" disabled />
+                                    <x-form.input.text name="disabled_transaction_number" value="{{ trans('documents.recurring.auto_generated') }}" disabled />
                                 </div>
                             </x-tooltip>
 
diff --git a/resources/views/banking/recurring_transactions/edit.blade.php b/resources/views/banking/recurring_transactions/edit.blade.php
index 28b42bb7e..19b844120 100644
--- a/resources/views/banking/recurring_transactions/edit.blade.php
+++ b/resources/views/banking/recurring_transactions/edit.blade.php
@@ -19,7 +19,7 @@
 
                             <x-tooltip id="tooltip-paid" placement="bottom" message="{{ trans('documents.recurring.tooltip.document_date', ['type' => Str::lower(trans_choice('general.transactions', 1))]) }}">
                                 <div class="relative focused has-label">
-                                    <x-form.input.text name="disabled_transaction_paid" value="{{ trans('documents.recurring.auto_generated') }}" class="form-element" disabled />
+                                    <x-form.input.text name="disabled_transaction_paid" value="{{ trans('documents.recurring.auto_generated') }}" disabled />
                                 </div>
                             </x-tooltip>
 
@@ -82,7 +82,7 @@
 
                             <x-tooltip id="tooltip-number" placement="bottom" message="{{ trans('documents.recurring.tooltip.document_number', ['type' => Str::lower(trans_choice('general.transactions', 1))]) }}">
                                 <div class="relative focused has-label">
-                                    <x-form.input.text name="disabled_transaction_number" value="{{ trans('documents.recurring.auto_generated') }}" class="form-element" disabled />
+                                    <x-form.input.text name="disabled_transaction_number" value="{{ trans('documents.recurring.auto_generated') }}" disabled />
                                 </div>
                             </x-tooltip>
 
diff --git a/resources/views/components/documents/form/recurring_metadata.blade.php b/resources/views/components/documents/form/recurring_metadata.blade.php
index 5668d72d9..2282200bb 100644
--- a/resources/views/components/documents/form/recurring_metadata.blade.php
+++ b/resources/views/components/documents/form/recurring_metadata.blade.php
@@ -32,7 +32,7 @@
 
             <x-tooltip id="tooltip-issued" placement="bottom" message="{{ trans('documents.recurring.tooltip.document_date', ['type' => config('type.document.' . $type . '.setting.prefix', 'invoice')]) }}">
                 <div class="relative focused has-label">
-                    <x-form.input.text name="disabled_document_date" value="{{ trans('documents.recurring.auto_generated') }}" class="form-element" disabled />
+                    <x-form.input.text name="disabled_document_date" value="{{ trans('documents.recurring.auto_generated') }}" disabled />
                 </div>
             </x-tooltip>
 
@@ -68,7 +68,7 @@
 
             <x-tooltip id="tooltip-number" placement="bottom" message="{{ trans('documents.recurring.tooltip.document_number', ['type' => config('type.document.' . $type . '.setting.prefix', 'invoice')]) }}">
                 <div class="relative focused has-label">
-                    <x-form.input.text name="disabled_document_number" value="{{ trans('documents.recurring.auto_generated') }}" class="form-element" disabled />
+                    <x-form.input.text name="disabled_document_number" value="{{ trans('documents.recurring.auto_generated') }}" disabled />
                 </div>
             </x-tooltip>