diff --git a/public/css/app.css b/public/css/app.css
index a2a36893c..899901d4f 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1276,7 +1276,11 @@ input[type=file]::file-selector-button:hover{
 
 /* form */
 
-.form-element{
+.has-error input, .has-error select, .has-error textarea {
+        border: 1px solid #cc0000 !important;
+    }
+
+.input-money{
   margin-top: 0.25rem;
   width: 100%;
   border-radius: 0.5rem;
@@ -1295,32 +1299,32 @@ input[type=file]::file-selector-button:hover{
   color: rgb(66 66 66 / var(--tw-text-opacity));
 }
 
-.form-element::-webkit-input-placeholder{
+.input-money::-webkit-input-placeholder{
   --tw-placeholder-opacity: 1;
   color: rgb(199 201 217 / var(--tw-placeholder-opacity));
 }
 
-.form-element::-moz-placeholder{
+.input-money::-moz-placeholder{
   --tw-placeholder-opacity: 1;
   color: rgb(199 201 217 / var(--tw-placeholder-opacity));
 }
 
-.form-element:-ms-input-placeholder{
+.input-money:-ms-input-placeholder{
   --tw-placeholder-opacity: 1;
   color: rgb(199 201 217 / var(--tw-placeholder-opacity));
 }
 
-.form-element::-ms-input-placeholder{
+.input-money::-ms-input-placeholder{
   --tw-placeholder-opacity: 1;
   color: rgb(199 201 217 / var(--tw-placeholder-opacity));
 }
 
-.form-element::placeholder{
+.input-money::placeholder{
   --tw-placeholder-opacity: 1;
   color: rgb(199 201 217 / var(--tw-placeholder-opacity));
 }
 
-.form-element:focus{
+.input-money:focus{
   --tw-border-opacity: 1;
   border-color: rgb(85 88 139 / var(--tw-border-opacity));
   outline: 2px solid transparent;
@@ -1328,7 +1332,7 @@ input[type=file]::file-selector-button:hover{
   --tw-ring-color: transparent;
 }
 
-.form-element:disabled{
+.input-money:disabled{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
@@ -1338,31 +1342,6 @@ input[type=file]::file-selector-button:hover{
         border: none;
     }
 
-.has-error .form-element{
-  --tw-border-opacity: 1;
-  border-color: rgb(204 0 0 / var(--tw-border-opacity));
-}
-
-.prepend-input-icon .form-element{
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
-.form-control-label{
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  --tw-text-opacity: 1;
-  color: rgb(66 66 66 / var(--tw-text-opacity));
-}
-
-div.required > .form-control-label::after {
-        content: '*';
-        margin-left: 0.25rem;
-        --tw-text-opacity: 1;
-        color: rgb(204 0 0 / var(--tw-text-opacity));
-    }
-
 [type="radio"]{
   --tw-text-opacity: 1;
   color: rgb(85 88 139 / var(--tw-text-opacity));
@@ -46751,6 +46730,7 @@ input[type="date"]::-webkit-inner-spin-button,
 
 .el-select .el-input .el-input__inner{
   margin-top: 0.25rem;
+  height: auto;
   width: 100%;
   border-radius: 0.5rem;
   border-width: 1px;
@@ -46806,18 +46786,7 @@ input[type="date"]::-webkit-inner-spin-button,
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.has-error .el-select .el-input .el-input__inner{
-  --tw-border-opacity: 1;
-  border-color: rgb(204 0 0 / var(--tw-border-opacity));
-}
-
-.prepend-input-icon .el-select .el-input .el-input__inner{
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
-.el-select .el-input .el-input__inner{
-  height: auto;
+.el-select .el-input .el-input__inner {
     color:#595959 !important;
 }
 
@@ -47030,16 +46999,6 @@ input[type="date"]::-webkit-inner-spin-button,
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.has-error .el-date-editor input{
-  --tw-border-opacity: 1;
-  border-color: rgb(204 0 0 / var(--tw-border-opacity));
-}
-
-.prepend-input-icon .el-date-editor input{
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
 .el-date-editor input {
     color: #595959 !important;
 }
@@ -47693,16 +47652,16 @@ body{
   background-color: rgb(238 238 243 / var(--tw-bg-opacity));
 }
 
-.disabled\:bg-gray-50:disabled{
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
 .disabled\:bg-gray-200:disabled{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.disabled\:bg-gray-50:disabled{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
 .disabled\:bg-green-300:disabled{
   --tw-bg-opacity: 1;
   background-color: rgb(197 217 186 / var(--tw-bg-opacity));
@@ -47842,14 +47801,14 @@ body{
   margin-right: 0.75rem;
 }
 
-[dir="ltr"] .ltr\:mr-1{
-  margin-right: 0.25rem;
-}
-
 [dir="ltr"] .ltr\:ml-1{
   margin-left: 0.25rem;
 }
 
+[dir="ltr"] .ltr\:mr-1{
+  margin-right: 0.25rem;
+}
+
 [dir="ltr"] .ltr\:ml-4{
   margin-left: 1rem;
 }
@@ -48016,14 +47975,14 @@ body{
   margin-right: 1rem;
 }
 
-[dir="rtl"] .rtl\:ml-1{
-  margin-left: 0.25rem;
-}
-
 [dir="rtl"] .rtl\:mr-1{
   margin-right: 0.25rem;
 }
 
+[dir="rtl"] .rtl\:ml-1{
+  margin-left: 0.25rem;
+}
+
 [dir="rtl"] .rtl\:-mr-7{
   margin-right: -1.75rem;
 }
diff --git a/resources/assets/js/components/AkauntingColor.vue b/resources/assets/js/components/AkauntingColor.vue
index 7d710b10b..17a0ffb5d 100644
--- a/resources/assets/js/components/AkauntingColor.vue
+++ b/resources/assets/js/components/AkauntingColor.vue
@@ -2,6 +2,7 @@
     <base-input :label="title" :name="name"
         :readonly="readonly"
         :disabled="disabled"
+        :not-required="notRequired"
         :class="[
             {'readonly': readonly},
             {'disabled': disabled},
@@ -9,7 +10,7 @@
         ]"
         :error="formError">
         <div class="flex justify-between relative mt-1">
-            <input type="text" @change="change" :name="name" :id="name" v-model="color" @keyup="addColor" class="form-element">
+            <input type="text" @change="change" :name="name" :id="name" v-model="color" @keyup="addColor" class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple">
 
             <div class="absolute w-7 h-7 flex rounded-full my-auto bottom-2 right-2 cursor-pointer"
                 ref="dropdownMenu"
@@ -105,6 +106,11 @@ export default {
             description: "Selectbox disabled status"
         },
 
+        notRequired: {
+            type: Boolean,
+            default: false
+        },
+
         small: {
             type: [Boolean, String],
             default: false,
diff --git a/resources/assets/js/components/AkauntingContactCard.vue b/resources/assets/js/components/AkauntingContactCard.vue
index 5ee7d4d1e..47f484baf 100644
--- a/resources/assets/js/components/AkauntingContactCard.vue
+++ b/resources/assets/js/components/AkauntingContactCard.vue
@@ -22,7 +22,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 py-2.5 mt-1 border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
                                 autocapitalize="default" autocorrect="ON"
                                 :placeholder="placeholder"
                                 :ref="'input-contact-field-' + _uid"
@@ -32,7 +32,7 @@
                             />
                         </div>
 
-                        <ul class="form-element p-0 border-0 mt-0 cursor-pointer">
+                        <ul class="w-full text-sm rounded-lg border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple p-0 border-0 mt-0 cursor-pointer">
                             <div class="hover:bg-gray-100 px-4 py-2" v-for="(contact, index) in sortContacts" :key="index" @click="onContactSeleted(index, contact.id)">
                                 <span>{{ contact.name }}</span>
                             </div>
diff --git a/resources/assets/js/components/AkauntingCurrencyConversion.vue b/resources/assets/js/components/AkauntingCurrencyConversion.vue
index 1a60f0323..691c54767 100644
--- a/resources/assets/js/components/AkauntingCurrencyConversion.vue
+++ b/resources/assets/js/components/AkauntingCurrencyConversion.vue
@@ -10,7 +10,7 @@
             masked: true
         }" :value="price" disabled size="5" masked class="disabled-money text-right mr-1 js-conversion-input text-xs px-1"></money>
         <span class="mr-2">{{ texts[1] }}</span>
-        <input name="currency_rate" v-model="rate" @input="onChange" class="form-element w-16 h-10 text-right js-conversion-input" />
+        <input name="currency_rate" v-model="rate" @input="onChange" class="text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple w-16 h-10 text-right js-conversion-input" />
     </div>
 </template>
 
diff --git a/resources/assets/js/components/AkauntingDate.vue b/resources/assets/js/components/AkauntingDate.vue
index 1e577f504..7e5665406 100644
--- a/resources/assets/js/components/AkauntingDate.vue
+++ b/resources/assets/js/components/AkauntingDate.vue
@@ -12,6 +12,7 @@
         :appendIcon="icon"
         :readonly="readonly"
         :disabled="disabled"
+        :not-required="notRequired"
         @focus="focus"
         >
         <flat-picker slot-scope="{focus, blur}"
@@ -19,7 +20,7 @@
             @on-open="focus"
             @on-close="blur"
             :config="dateConfig"
-            class="form-element datepicker"
+            class="datepicker w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
             v-model="real_model"
             @input="change"
             :readonly="readonly"
@@ -64,6 +65,11 @@ export default {
             description: "Input readonly status"
         },
 
+        notRequired: {
+            type: Boolean,
+            default: false
+        },
+
         period: {
             type: [Number, String],
             default: "0",
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/AkauntingItemButton.vue b/resources/assets/js/components/AkauntingItemButton.vue
index c00572fd1..f0d73cccc 100644
--- a/resources/assets/js/components/AkauntingItemButton.vue
+++ b/resources/assets/js/components/AkauntingItemButton.vue
@@ -12,7 +12,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 py-2.5 mt-1 border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
                        autocapitalize="default" 
                        autocorrect="ON" 
                        :placeholder="placeholder"
@@ -23,7 +23,7 @@
                    />
                </div>
 
-                <ul class="form-element p-0 mt-0 border-0 cursor-pointer">
+                <ul class="w-full text-sm rounded-lg border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple p-0 mt-0 border-0 cursor-pointer">
                     <div 
                         class="hover:bg-gray-100 px-4" 
                         v-for="(item, index) in sortedItems" 
diff --git a/resources/assets/js/components/AkauntingMoney.vue b/resources/assets/js/components/AkauntingMoney.vue
index 2b8f906a9..42c03c837 100644
--- a/resources/assets/js/components/AkauntingMoney.vue
+++ b/resources/assets/js/components/AkauntingMoney.vue
@@ -1,7 +1,11 @@
 <template>
     <div v-if="! rowInput"
         :class="[{'has-error': error}, {'required': required}, {'readonly': readonly}, {'disabled': disabled}, col]">
-        <label v-if="title" :for="name" class="form-control-label">{{ title }}</label>
+
+        <label v-if="title" :for="name" class="text-black text-sm font-medium">
+            {{ title }}
+            <span v-if="!notRequired" class="text-red ltr:ml-1 rtl:mr-1">*</span>
+        </label>
 
         <div class="relative" :class="group_class">
             <!-- <div class="input-group-prepend absolute left-2 bottom-3 text-light-gray">
@@ -10,7 +14,7 @@
                 </span>
             </div> -->
 
-            <money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
+            <money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="input-money" :class="moneyClass"></money>
         </div>
 
         <div class="text-red text-sm mt-1 block" v-if="error" v-html="error"></div>
@@ -18,7 +22,10 @@
 
     <div v-else
         :class="[{'has-error': error}, {'required': required}, {'readonly': readonly}, {'disabled': disabled}, col]">
-        <label v-if="title" :for="name" class="form-control-label">{{ title }}</label>
+
+        <label v-if="title" :for="name" class="text-black text-sm font-medium">
+            {{ title }}
+        </label>
 
         <div v-if="icon" :class="group_class">
             <div v-if="icon" class="input-group-prepend">
@@ -27,10 +34,10 @@
                 </span>
             </div>
 
-            <money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
+            <money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="input-money" :class="moneyClass"></money>
         </div>
 
-        <money v-else :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
+        <money v-else :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="input-money" :class="moneyClass"></money>
 
         <div class="text-red text-sm mt-1 block" v-if="error" v-html="error"></div>
     </div>
@@ -138,6 +145,10 @@ export default {
             default: false,
             description: "Money result value"
         },
+        notRequired: {
+            type: Boolean,
+            default: false
+        }
     },
 
     data() {
diff --git a/resources/assets/js/components/AkauntingRadioGroup.vue b/resources/assets/js/components/AkauntingRadioGroup.vue
index 9236e2387..8d0b38cce 100644
--- a/resources/assets/js/components/AkauntingRadioGroup.vue
+++ b/resources/assets/js/components/AkauntingRadioGroup.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="col">
-        <label :for="name" class="form-control-label">{{ text }}</label>
+    <div:class="col">
+        <label :for="name" class="text-black text-sm font-medium">{{ text }}</label>
 
         <div class="tab-pane tab-example-result fade show active" role="tabpanel" aria-labelledby="-component-tab">
             <div class="btn-group btn-group-toggle radio-yes-no" data-toggle="buttons" v-on:click="onClick">
diff --git a/resources/assets/js/components/AkauntingRecurring.vue b/resources/assets/js/components/AkauntingRecurring.vue
index 7ca4b9a3c..b8eda5e24 100644
--- a/resources/assets/js/components/AkauntingRecurring.vue
+++ b/resources/assets/js/components/AkauntingRecurring.vue
@@ -18,7 +18,7 @@
                 {{ frequencyEveryText }}
             </div>
 
-            <input type="text" class="w-20 form-element" v-model="interval" @input="change" v-if="frequency == 'custom'">
+            <input type="text" class="w-20 text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" v-model="interval" @input="change" v-if="frequency == 'custom'">
 
             <el-select class="w-36 ml-2" v-model="customFrequency" @input="change" v-if="frequency == 'custom'">
                 <el-option
@@ -89,7 +89,7 @@
                 </el-option>
             </el-select>
 
-            <input type="text" class="w-20 form-element ml-2" v-model="limitCount" v-if="limit == 'after'" @input="change">
+            <input type="text" class="w-20 text-sm px-3 py-2.5 mt-1 ml-2 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" v-model="limitCount" v-if="limit == 'after'" @input="change">
 
             <div class="pl-2 text-sm" v-if="limit == 'after'">
                 {{ endText }}
diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue
index daa3b503d..5e0befea7 100644
--- a/resources/assets/js/components/AkauntingSelect.vue
+++ b/resources/assets/js/components/AkauntingSelect.vue
@@ -2,6 +2,7 @@
     <base-input :label="title" :name="name"
         :readonly="readonly"
         :disabled="disabled"
+        :not-required="notRequired"
         :class="[
             {'readonly': readonly},
             {'disabled': disabled},
@@ -254,6 +255,11 @@ export default {
             description: "Selectbox clearable status"
         },
 
+        notRequired: {
+            type: Boolean,
+            default: false
+        },
+
         disabled: {
             type: Boolean,
             default: false,
diff --git a/resources/assets/js/components/AkauntingSelectRemote.vue b/resources/assets/js/components/AkauntingSelectRemote.vue
index f738c8ad3..5f53754fa 100644
--- a/resources/assets/js/components/AkauntingSelectRemote.vue
+++ b/resources/assets/js/components/AkauntingSelectRemote.vue
@@ -2,6 +2,7 @@
     <base-input v-if="title" :label="title" :name="name"
         :readonly="readonly"
         :disabled="disabled"
+        :not-required="notRequired"
         :class="[
             {'readonly': readonly},
             {'disabled': disabled},
@@ -359,6 +360,11 @@ export default {
             description: "Selectbox clearable status"
         },
 
+        notRequired: {
+            type: Boolean,
+            default: false
+        },
+
         disabled: {
             type: Boolean,
             default: false,
diff --git a/resources/assets/js/components/AkauntingWidget.vue b/resources/assets/js/components/AkauntingWidget.vue
index 832a4e31f..baa02eba9 100644
--- a/resources/assets/js/components/AkauntingWidget.vue
+++ b/resources/assets/js/components/AkauntingWidget.vue
@@ -9,8 +9,6 @@
                 <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
                     <div class="sm:col-span-3">
                         <base-input
-                            required
-                            class="required"
                             v-model="form.name"
                             :label="text.name"
                             :placeholder="placeholder.name"
@@ -22,8 +20,6 @@
 
                     <div class="sm:col-span-3">
                         <base-input
-                            required
-                            class="required"
                             :error="form.errors.class[0]"
                             :label="text.type">
                             
@@ -41,7 +37,7 @@
                     </div>
 
                     <div class="sm:col-span-3">
-                        <base-input :label="text.width">
+                        <base-input :label="text.width" not-required>
                             <el-select
                                 v-model="form.width" filterable
                                 :placeholder="placeholder.width">
@@ -56,6 +52,7 @@
 
                     <div class="sm:col-span-3">
                         <base-input
+                            not-required
                             v-model="form.sort"
                             :label="text.sort"
                             :placeholder="placeholder.sort"
diff --git a/resources/assets/js/components/CreditCard/CardForm.vue b/resources/assets/js/components/CreditCard/CardForm.vue
index ca079669e..dbcfb19fb 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/assets/js/components/Inputs/BaseInput.vue b/resources/assets/js/components/Inputs/BaseInput.vue
index 0eeaa54ea..6b8a897ae 100644
--- a/resources/assets/js/components/Inputs/BaseInput.vue
+++ b/resources/assets/js/components/Inputs/BaseInput.vue
@@ -6,6 +6,7 @@
     <slot name="label">
       <label v-if="label" :class="labelClasses">
         {{label}}
+        <span v-if="!notRequired" class="text-red ltr:ml-1 rtl:mr-1">*</span>
       </label>
     </slot>
     <div class="relative" :class="[
@@ -31,7 +32,7 @@
           v-bind="$attrs"
           :valid="!error"
           :required="required"
-          class="form-element"
+          class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
           :class="[{'is-valid': valid === true}, {'is-invalid': error}, inputClasses]">
       </slot>
       <div v-if="appendIcon || $slots.append" class="input-group-append absolute ltr:right-2 rtl:left-2 bottom-2 text-light-gray">
@@ -106,7 +107,7 @@
       labelClasses: {
         type: String,
         description: "Input label css classes",
-        default: "form-control-label"
+        default: "text-black text-sm font-medium"
       },
       inputClasses: {
         type: String,
@@ -132,6 +133,10 @@
       prependIcon: {
         type: String,
         description: "Prepend icon (left)"
+      },
+      notRequired: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
diff --git a/resources/assets/js/views/install/Database.vue b/resources/assets/js/views/install/Database.vue
index 6b2e4d5fd..460f40657 100644
--- a/resources/assets/js/views/install/Database.vue
+++ b/resources/assets/js/views/install/Database.vue
@@ -2,39 +2,68 @@
     <div>
         <InstallSteps :active_state="active"></InstallSteps>
 
-        <div>
+        <div class="card-body">
             <div class="w-full bg-red-100 text-red-600 p-3 rounded-sm font-semibold text-xs" :class="(form.response.error) ? 'block' : 'hidden'" v-if="form.response.error" v-html="form.response.message"></div>
 
             <form>
-                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 mt-0">
                     <div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('hostname')}]">
-                        <label for="hostname" class="form-control-label">Hostname</label>
+                        <label for="hostname" class="text-black text-sm font-medium">Hostname</label>
+                        <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
-                        <input class="form-element" data-name="hostname" data-value="localhost" @keydown="form.errors.clear('hostname')" v-model="form.hostname" required="required" name="hostname" type="text" value="localhost" id="hostname" />
+                        <div class="input-group input-group-merge">
+                            <input
+                                class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
+                                :class="[{'border-red': form.errors.get('hostname')}, {'border-light-gray': !form.errors.get('hostname')}]"
+                                data-name="hostname"
+                                data-value="localhost"
+                                @keydown="form.errors.clear('hostname')"
+                                v-model="form.hostname"
+                                required="required"
+                                name="hostname"
+                                type="text"
+                                value="localhost"
+                                id="hostname"
+                            />
+                        </div>
 
                         <div class="text-red text-sm mt-1 block" v-if="form.errors.has('hostname')" v-html="form.errors.get('hostname')"></div>
                     </div>
 
-                    <div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('username')}]">
-                        <label for="username" class="form-control-label">Username</label>
+                    <div class="sm:col-span-6 required">
+                        <label for="username" class="text-black text-sm font-medium">Username</label>
+                        <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
-                        <input class="form-element" data-name="username" @keydown="form.errors.clear('username')" v-model="form.username" required="required" name="username" type="text" id="username" />
+                        <div class="input-group input-group-merge">
+                            <input 
+                            :class="[{'border-red': form.errors.get('username')}, {'border-light-gray': !form.errors.get('username')}]"
+                            class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="username" @keydown="form.errors.clear('username')" v-model="form.username" required="required" name="username" type="text" id="username" />
+                        </div>
 
                         <div class="text-red text-sm mt-1 block" v-if="form.errors.has('username')" v-html="form.errors.get('username')"></div>
                     </div>
 
-                    <div class="sm:col-span-6" :class="[{'has-error': form.errors.get('password')}]">
-                        <label for="password" class="form-control-label">Password</label>
+                    <div class="sm:col-span-6">
+                        <label for="password" class="text-black text-sm font-medium">Password</label>
 
-                        <input class="form-element" data-name="password" v-model="form.password" name="password" type="password" value="" id="password" />
+                        <div class="input-group input-group-merge">
+                            <input 
+                            :class="[{'border-red': form.errors.get('password')}, {'border-light-gray': !form.errors.get('password')}]"
+                            class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="password" v-model="form.password" name="password" type="password" value="" id="password" />
+                        </div>
 
                         <div class="text-red text-sm mt-1 block" v-if="form.errors.has('password')" v-html="form.errors.get('password')"></div>
                     </div>
 
-                    <div class="sm:col-span-6 mb--2 required" :class="[{'has-error': form.errors.get('database')}]">
-                        <label for="database" class="form-control-label">Database</label>
+                    <div class="sm:col-span-6 required">
+                        <label for="database" class="text-black text-sm font-medium">Database</label>
+                        <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
-                        <input class="form-element" data-name="database" @keydown="form.errors.clear('database')" v-model="form.database" required="required" name="database" type="text" id="database" />
+                        <div class="input-group input-group-merge">
+                            <input 
+                            :class="[{'border-red': form.errors.get('database')}, {'border-light-gray': !form.errors.get('database')}]"
+                            class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="database" @keydown="form.errors.clear('database')" v-model="form.database" required="required" name="database" type="text" id="database" />
+                        </div>
 
                         <div class="text-red text-sm mt-1 block" v-if="form.errors.has('database')" v-html="form.errors.get('database')"></div>
                     </div>
diff --git a/resources/assets/js/views/install/Language.vue b/resources/assets/js/views/install/Language.vue
index c42978b86..023e0cc3b 100644
--- a/resources/assets/js/views/install/Language.vue
+++ b/resources/assets/js/views/install/Language.vue
@@ -4,12 +4,12 @@
 
         <div class="mb-0">
             <form>
-                <select v-model="form.lang" name="lang" id="lang" size="13" class="w-full form-control-label">
+                <select v-model="form.lang" name="lang" id="lang" size="13" class="w-full text-black text-sm font-medium">
                     <option v-for="(name, code) in languages" :value="code">
                         {{ name }}
                     </option>
                 </select>
-                
+
                 <div class="sm:col-span-6 flex items-center justify-end mt-3.5">
                     <button type="submit" @click="onSubmit" :disabled="form.loading" id="next-button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100">
                         <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
diff --git a/resources/assets/js/views/install/Settings.vue b/resources/assets/js/views/install/Settings.vue
index 8a1c6e6ff..e7c298f9c 100644
--- a/resources/assets/js/views/install/Settings.vue
+++ b/resources/assets/js/views/install/Settings.vue
@@ -4,46 +4,50 @@
 
         <form>
             <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 mt-0">
-                <div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('company_name')}]">
-                    <label for="company_name" class="form-control-label">Company Name</label>
+                <div class="sm:col-span-6 required">
+                    <label for="company_name" class="text-black text-sm font-medium">Company Name</label>
+                    <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
-                    <input class="form-element" data-name="company_name" @keydown="form.errors.clear('company_name')" v-model="form.company_name" required="required" name="company_name" type="text" id="company_name" />
-
-                    <div class="text-red text-sm mt-1 block" v-if="form.errors.has('company_name')" v-html="form.errors.get('company_name')"></div>
+                    <div class="input-group input-group-merge">
+                        <input :class="[{'border-red': form.errors.get('company_name')}, {'border-light-gray': !form.errors.get('company_name')}]" class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="company_name" @keydown="form.errors.clear('company_name')" v-model="form.company_name" required="required" name="company_name" type="text" id="company_name" />
+                    </div>
                 </div>
 
-                <div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('company_email')}]">
-                    <label for="company_email" class="form-control-label">Company Email</label>
+                <div class="sm:col-span-6 required">
+                    <label for="company_email" class="text-black text-sm font-medium">Company Email</label>
+                    <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
-                    <input class="form-element" data-name="company_email" @keydown="form.errors.clear('company_email')" v-model="form.company_email" required="required" name="company_email" type="text" id="company_email" />
-
-                    <div class="text-red text-sm mt-1 block" v-if="form.errors.has('company_email')" v-html="form.errors.get('company_email')"></div>
+                    <div class="input-group input-group-merge">
+                        <input :class="[{'border-red': form.errors.get('company_email')}, {'border-light-gray': !form.errors.get('company_email')}]" class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="company_email" @keydown="form.errors.clear('company_email')" v-model="form.company_email" required="required" name="company_email" type="text" id="company_email" />
+                    </div>
                 </div>
 
-                <div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('user_email')}]">
-                    <label for="user_email" class="form-control-label">Admin Email</label>
+                <div class="sm:col-span-6 required">
+                    <label for="user_email" class="text-black text-sm font-medium">Admin Email</label>
+                    <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
-                    <input class="form-element" data-name="user_email" @keydown="form.errors.clear('user_email')" v-model="form.user_email" required="required" name="user_email" type="text" id="user_email" />
-
-                    <div class="text-red text-sm mt-1 block" v-if="form.errors.has('user_email')" v-html="form.errors.get('user_email')"></div>
+                    <div class="input-group input-group-merge">
+                        <input :class="[{'border-red': form.errors.get('user_email')}, {'border-light-gray': !form.errors.get('user_email')}]" class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="user_email" @keydown="form.errors.clear('user_email')" v-model="form.user_email" required="required" name="user_email" type="text" id="user_email" />
+                    </div>
                 </div>
 
-                <div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('user_password')}]">
-                    <label for="user_password" class="form-control-label">Admin Password</label>
+                <div class="sm:col-span-6 required">
+                    <label for="user_password" class="text-black text-sm font-medium">Admin Password</label>
+                    <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
-                    <input class="form-element" data-name="user_password" @keydown="form.errors.clear('user_password')" v-model="form.user_password" required="required" name="user_password" type="password" value="" id="user_password" />
-
-                    <div class="text-red text-sm mt-1 block" v-if="form.errors.has('user_password')" v-html="form.errors.get('user_password')"></div>
+                    <div class="input-group input-group-merge">
+                        <input :class="[{'border-red': form.errors.get('user_password')}, {'border-light-gray': !form.errors.get('user_password')}]" class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg borde text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="user_password" @keydown="form.errors.clear('user_password')" v-model="form.user_password" required="required" name="user_password" type="password" value="" id="user_password" />
+                    </div>
                 </div>
-            </div>
 
-            <div class="sm:col-span-6 flex items-center justify-end mt-3.5">
-                <button type="submit" @click="onSubmit" :disabled="form.loading" id="next-button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100">
-                    <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
-                    <span :class="[{'opacity-0': form.loading}]">
-                        Next
-                    </span>
-                </button>
+                <div class="sm:col-span-6 flex items-center justify-end mt-3.5">
+                    <button type="submit" @click="onSubmit" :disabled="form.loading" id="next-button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100">
+                        <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
+                        <span :class="[{'opacity-0': form.loading}]">
+                            Next
+                        </span>
+                    </button>
+                </div>
             </div>
         </form>
     </div>
diff --git a/resources/assets/js/views/wizard/Company.vue b/resources/assets/js/views/wizard/Company.vue
index fa5b6397c..d85852928 100644
--- a/resources/assets/js/views/wizard/Company.vue
+++ b/resources/assets/js/views/wizard/Company.vue
@@ -12,7 +12,7 @@
                     <div class="flex flex-col justify-between">
                         <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 menu-scroll gap-10">
                             <div class="sm:col-span-6">
-                                <base-input :label="translations.company.api_key" name="api_key" data-name="api_key" :placeholder="translations.company.api_key" v-model="company.api_key"/>
+                                <base-input not-required :label="translations.company.api_key" name="api_key" data-name="api_key" :placeholder="translations.company.api_key" v-model="company.api_key"/>
 
                                 <div class="mt-2">
                                     <small>
@@ -23,11 +23,11 @@
                             </div>
 
                             <div class="sm:col-span-3">
-                                <base-input type="text" :label="translations.company.tax_number" name="tax_number" data-name="tax_number" :placeholder="translations.company.tax_number" v-model="company.tax_number"/>
+                                <base-input not-required type="text" :label="translations.company.tax_number" name="tax_number" data-name="tax_number" :placeholder="translations.company.tax_number" v-model="company.tax_number"/>
                             </div>
 
                             <div class="sm:col-span-3">
-                                <akaunting-date :title="translations.company.financial_start" data-name="financial_start" :placeholder="translations.company.financial_start" icon="calendar_today"
+                                <akaunting-date not-required :title="translations.company.financial_start" data-name="financial_start" :placeholder="translations.company.financial_start" icon="calendar_today"
                                     :date-config="{
                                     dateFormat: 'd-m',
                                     allowInput: false,
@@ -40,13 +40,13 @@
 
                             <div class="sm:col-span-3 grid gap-10">
                                 <div class="sm:col-span-3">
-                                    <base-input :label="translations.company.address">
-                                        <textarea class="form-element" name="address" data-name="address" rows="3" :placeholder="translations.company.address" v-model="company.address"></textarea>
+                                    <base-input not-required :label="translations.company.address">
+                                        <textarea class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" name="address" data-name="address" rows="3" :placeholder="translations.company.address" v-model="company.address"></textarea>
                                     </base-input>
                                 </div>
 
                                 <div class="sm:col-span-3">
-                                    <base-input :label="translations.company.country">
+                                    <base-input not-required :label="translations.company.country">
                                         <el-select v-model="company.country" filterable>
                                             <el-option
                                                 v-for="(country, index) in sortedCountries"
@@ -63,7 +63,7 @@
                             </div>
 
                             <div class="sm:col-span-3">
-                                <label class="form-control-label">{{  translations.company.logo }}</label>
+                                <label class="text-black text-sm font-medium">{{  translations.company.logo }}</label>
                                 <akaunting-dropzone-file-upload ref="dropzoneWizard" class="form-file dropzone-column w-2/5" style="height:12.2rem" preview-classes="single" :attachments="logo" :v-model="logo">
                                 </akaunting-dropzone-file-upload>
                             </div>
diff --git a/resources/assets/js/views/wizard/Currencies.vue b/resources/assets/js/views/wizard/Currencies.vue
index 5d740af12..8e876e83c 100644
--- a/resources/assets/js/views/wizard/Currencies.vue
+++ b/resources/assets/js/views/wizard/Currencies.vue
@@ -62,12 +62,11 @@
                                     <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 py-3">
                                         <base-input name="name" data-name="name"
                                         form-classes="sm:col-span-2"
-                                        class="required"
                                         v-model="model.name"
                                         :error="onFailErrorGet('name')"
                                         />
 
-                                        <base-input class="sm:col-span-2 required" :error="onFailErrorGet('code')">
+                                        <base-input class="sm:col-span-2" :error="onFailErrorGet('code')">
                                             <el-select name="code" v-model="model.select" @change="onChangeCodeItem(model.select)" filterable>
                                                 <el-option
                                                 v-for="option in currency_codes"
@@ -81,7 +80,6 @@
 
                                         <base-input name="rate" data-name="rate" :placeholder="translations.currencies.rate"
                                         form-classes="sm:col-span-2"
-                                        class="required"
                                         v-model="model.rate"
                                         :error="onFailErrorGet('rate')"
                                         />
@@ -132,13 +130,13 @@
 
                         <div v-if="new_datas" class="grid sm:grid-cols-7 gap-x-8 gap-y-6 my-3.5 w-full">
                             <base-input :label="translations.currencies.name" name="name" data-name="name" :placeholder="translations.currencies.name"
-                            class="sm:col-span-3 required"
+                            class="sm:col-span-3"
                             v-model="model.name"
                             :error="onFailErrorGet('name')"
                             />
 
-                            <base-input :label="translations.currencies.code" class="sm:col-span-2 required" :error="onFailErrorGet('code')">
-                                <el-select name="code" v-model="model.select" required="required" @change="onChangeCodeItem(model.select)"filterable>
+                            <base-input :label="translations.currencies.code" class="sm:col-span-2" :error="onFailErrorGet('code')">
+                                <el-select name="code" v-model="model.select" @change="onChangeCodeItem(model.select)"filterable>
                                     <el-option
                                     v-for="option in currency_codes"
                                     :key="option"
@@ -150,7 +148,7 @@
                             </base-input>
 
                             <base-input :label="translations.currencies.rate" name="rate" data-name="rate" :placeholder="translations.currencies.rate"
-                            class="sm:col-span-2 required"
+                            class="sm:col-span-2"
                             v-model="model.rate"
                             :error="onFailErrorGet('rate')"
                             />
diff --git a/resources/assets/js/views/wizard/Taxes.vue b/resources/assets/js/views/wizard/Taxes.vue
index a29183453..ceaf5ccb4 100644
--- a/resources/assets/js/views/wizard/Taxes.vue
+++ b/resources/assets/js/views/wizard/Taxes.vue
@@ -54,7 +54,6 @@
                                     <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 py-3">
                                         <base-input name="name" data-name="name" :placeholder="translations.taxes.name"
                                         form-classes="sm:col-span-2"
-                                        class="required"
                                         v-model="model.name"
                                         :error="onFailErrorGet('name')"
                                         />
@@ -63,7 +62,6 @@
 
                                         <base-input name="rate" data-name="rate" :placeholder="translations.taxes.rate"
                                         form-classes="sm:col-span-2"
-                                        class="required"
                                         v-model="model.rate"
                                         :error="onFailErrorGet('rate')"
                                         />
@@ -115,14 +113,14 @@
                     
                     <div v-if="new_datas" class="grid sm:grid-cols-4 gap-x-8 gap-y-6 my-3.5 w-full">
                         <base-input :label="translations.taxes.name" name="name" data-name="name" :placeholder="translations.taxes.name"
-                        class="sm:col-span-2 required"
+                        class="sm:col-span-2"
                         v-model="model.name"
                         :error="onFailErrorGet('name')"
                         />
 
                         <base-input :label="translations.taxes.rate" name="rate" data-name="rate"
                         :placeholder="translations.taxes.rate"
-                        class="sm:col-span-2 required"
+                        class="sm:col-span-2"
                         v-model="model.rate"
                         :error="onFailErrorGet('rate')"
                         />
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 49bcd925d..fede1ed0e 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -8,7 +8,11 @@
 
 @layer base {
     /* form */
-    .form-element {
+    .has-error input, .has-error select, .has-error textarea {
+        border: 1px solid #cc0000 !important;
+    }
+
+    .input-money {
         @apply w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple;
     }
 
@@ -16,23 +20,6 @@
         background-color:transparent !important;
         border: none;
     }
-    
-    .has-error .form-element {
-        @apply border-red;
-    }
-
-    .prepend-input-icon .form-element {
-        @apply px-10;
-    }
-    
-    .form-control-label {
-        @apply text-black text-sm font-medium;
-    }
-
-    div.required > .form-control-label::after {
-        content: '*';
-        @apply text-red ml-1;
-    }
 
     [type="radio"] {
         @apply text-purple focus:outline-none focus:ring-purple focus:border-purple;
@@ -248,7 +235,7 @@
 }
 
 .el-select .el-input .el-input__inner {
-    @apply form-element h-auto;
+    @apply w-full h-auto text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple;
     color:#595959 !important;
 }
 
@@ -368,7 +355,7 @@
 }
 
 .el-date-editor input {
-    @apply form-element;
+    @apply w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple;
     color: #595959 !important;
 }
 
diff --git a/resources/views/banking/recurring_transactions/create.blade.php b/resources/views/banking/recurring_transactions/create.blade.php
index 11e26d93b..048087295 100644
--- a/resources/views/banking/recurring_transactions/create.blade.php
+++ b/resources/views/banking/recurring_transactions/create.blade.php
@@ -20,13 +20,13 @@
 
                     <x-slot name="body">
                         <div class="relative sm:col-span-3">
-                            <label class="form-control-label">
+                            <x-form.label>
                                 {{ trans('general.date') }}
-                            </label>
+                            </x-form.label>
 
                             <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>
 
@@ -75,13 +75,13 @@
 
                     <x-slot name="body">
                         <div class="relative sm:col-span-3">
-                            <label class="form-control-label">
+                            <x-form.label>
                                 {{ trans_choice('general.numbers', 1) }}
-                            </label>
+                            </x-form.label>
 
                             <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 66a0d1c09..66865ec88 100644
--- a/resources/views/banking/recurring_transactions/edit.blade.php
+++ b/resources/views/banking/recurring_transactions/edit.blade.php
@@ -13,13 +13,13 @@
 
                     <x-slot name="body">
                         <div class="relative sm:col-span-3">
-                            <label class="form-control-label">
+                            <x-form.label>
                                 {{ trans('general.date') }}
-                            </label>
+                            </x-form.label>
 
                             <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>
 
@@ -76,13 +76,13 @@
 
                     <x-slot name="body">
                         <div class="relative sm:col-span-3">
-                            <label class="form-control-label">
+                            <x-form.label>
                                 {{ trans_choice('general.numbers', 1) }}
-                            </label>
+                            </x-form.label>
 
                             <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/advanced.blade.php b/resources/views/components/documents/form/advanced.blade.php
index a258ea8fd..fca27d654 100644
--- a/resources/views/components/documents/form/advanced.blade.php
+++ b/resources/views/components/documents/form/advanced.blade.php
@@ -11,7 +11,7 @@
 
         @if (! $hideFooter)
             <div class="{{ $classFooter }}">
-                <x-form.group.textarea name="footer" label="{{ trans('general.footer') }}" :value="$footer" not-required rows="7" />
+                <x-form.group.textarea name="footer" label="{{ trans('general.footer') }}" class="h-full" :value="$footer" not-required rows="7" />
             </div>
         @endif
 
diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
index 53a746e98..210c23337 100644
--- a/resources/views/components/documents/form/line-item.blade.php
+++ b/resources/views/components/documents/form/line-item.blade.php
@@ -38,7 +38,7 @@
                                     <input
                                         type="text"
                                         :ref="'items-' + index + '-name'"
-                                        class="form-element mt-0"
+                                        class="w-full text-sm px-3 py-2.5 mt-0 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple mt-0"
                                         :name="'items.' + index + '.name'"
                                         autocomplete="off"
                                         required="required"
@@ -65,7 +65,7 @@
                         <td class="px-3 py-3 border-b-0 description">
                             @if (! $hideItemDescription)
                                 <textarea
-                                    class="form-element mt-1.5"
+                                    class="w-full text-sm px-3 py-2.5 mt-1.5 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
                                     style="height:42px;"
                                     :ref="'items-' + index + '-description'"
                                     placeholder="{{ trans('items.enter_item_description') }}"
@@ -94,7 +94,7 @@
                                     type="number"
                                     min="0"
                                     :ref="'items-' + index + '-quantity'"
-                                    class="form-element mt-0 text-right input-number-disabled"
+                                    class="w-full text-sm px-3 py-2.5 mt-0 text-right rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple input-number-disabled"
                                     :name="'items.' + index + '.quantity'"
                                     autocomplete="off"
                                     required="required"
@@ -233,7 +233,7 @@
                                     <input type="number"
                                         min="0"
                                         placeholder="Discount"
-                                        class="form-element text-center mt-0"
+                                        class="w-full text-sm px-3 py-2.5 mt-0 text-center rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
                                         :name="'items.' + index + '.discount'"
                                         autocomplete="off"
                                         required="required"
diff --git a/resources/views/components/documents/form/metadata.blade.php b/resources/views/components/documents/form/metadata.blade.php
index a2f1a4c20..b91833d5f 100644
--- a/resources/views/components/documents/form/metadata.blade.php
+++ b/resources/views/components/documents/form/metadata.blade.php
@@ -1,8 +1,8 @@
 <div class="grid sm:grid-cols-7 sm:col-span-6 gap-x-8 gap-y-6 my-3.5">
-    <div class="sm:col-span-2 required">
-        <label for="contact" class="form-control-label">
+    <div class="sm:col-span-2">
+        <x-form.label for="contact" required>
             {{ trans_choice($textContact, 1) }}
-        </label>
+        </x-form.label>
 
         <x-documents.form.contact
             type="{{ $typeContact }}"
diff --git a/resources/views/components/documents/form/note.blade.php b/resources/views/components/documents/form/note.blade.php
index 10ea8066e..143227040 100644
--- a/resources/views/components/documents/form/note.blade.php
+++ b/resources/views/components/documents/form/note.blade.php
@@ -4,7 +4,7 @@
         label="{{ trans_choice('general.notes', 2) }}"
         :value="$notes"
         not-required
-        class="form-element border-0 bg-transparent px-0 rounded-none resize-none"
+        override="w-full text-sm px-0 py-2.5 mt-1 border-light-gray text-black placeholder-light-gray disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple border-0 bg-transparent rounded-none resize-none"
         form-label-class="lg:text-lg"
         form-group-class="border-b pb-2 mb-3.5"
         rows="1"
diff --git a/resources/views/components/documents/form/recurring_metadata.blade.php b/resources/views/components/documents/form/recurring_metadata.blade.php
index 3a2fc5ea0..8461bbe2f 100644
--- a/resources/views/components/documents/form/recurring_metadata.blade.php
+++ b/resources/views/components/documents/form/recurring_metadata.blade.php
@@ -1,8 +1,8 @@
 <div class="grid sm:grid-cols-7 sm:col-span-6 gap-x-8 gap-y-6 my-3.5">
-    <div class="sm:col-span-2 required">
-        <label for="contact" class="form-control-label">
+    <div class="sm:col-span-2">
+        <x-form.label for="contact" required>
             {{ trans_choice($textContact, 1) }}
-        </label>
+        </x-form.label>
 
         <x-documents.form.contact
             type="{{ $typeContact }}"
@@ -26,13 +26,13 @@
 
         @if (! $hideIssuedAt)
         <div class="relative sm:col-span-3">
-            <label class="form-control-label">
+            <x-form.label>
                 {{ trans($textIssuedAt) }}
-            </label>
+            </x-form.label>
 
             <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>
 
@@ -62,13 +62,13 @@
 
         @if (! $hideDocumentNumber)
         <div class="relative sm:col-span-3">
-            <label class="form-control-label">
+            <x-form.label>
                 {{ trans($textDocumentNumber) }}
-            </label>
+            </x-form.label>
 
             <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>
 
diff --git a/resources/views/components/form/group/checkbox.blade.php b/resources/views/components/form/group/checkbox.blade.php
index 1884d3018..a0056bf1b 100644
--- a/resources/views/components/form/group/checkbox.blade.php
+++ b/resources/views/components/form/group/checkbox.blade.php
@@ -26,7 +26,7 @@
         @if (! $attributes->has('label') && ! empty($label->contents))
             {!! $label ?? '' !!}
         @elseif (! empty($label))
-            <x-form.label for="{{ $name }}" class="form-control-label">{!! $label !!}</x-form.label>
+            <x-form.label for="{{ $name }}" {{ $attributes->merge($custom_attributes) }}>{!! $label !!}</x-form.label>
         @endif
 
         <div @class([
diff --git a/resources/views/components/form/group/color.blade.php b/resources/views/components/form/group/color.blade.php
index 71b2c2bfa..08b327f75 100644
--- a/resources/views/components/form/group/color.blade.php
+++ b/resources/views/components/form/group/color.blade.php
@@ -46,6 +46,10 @@
         small="{{ $attributes['small'] }}"
         @endif
 
+        @if (!$required)
+        :not-required={{ $required ? 'false' : 'true' }}
+        @endif
+
         @if (! empty($attributes['v-model']))
         @interface="form.errors.clear('{{ $attributes['v-model'] }}'); {{ $attributes['v-model'] . ' = $event' }}"
         @elseif (! empty($attributes['data-field']))
diff --git a/resources/views/components/form/group/date.blade.php b/resources/views/components/form/group/date.blade.php
index 4e30c6667..8182415e7 100644
--- a/resources/views/components/form/group/date.blade.php
+++ b/resources/views/components/form/group/date.blade.php
@@ -15,6 +15,8 @@
 
         @if ($required)
         :required="{{ $required ? 'true' : 'false' }}"
+        @else
+        :not-required={{ $required ? 'false' : 'true' }}
         @endif
 
         @if ($readonly)
diff --git a/resources/views/components/form/group/date_time.blade.php b/resources/views/components/form/group/date_time.blade.php
index 9f2666b86..74db37ce2 100644
--- a/resources/views/components/form/group/date_time.blade.php
+++ b/resources/views/components/form/group/date_time.blade.php
@@ -21,6 +21,10 @@
         :disabled="{{ $disabled }}"
         @endif
 
+        @if (!$required)
+        :not-required={{ $required ? 'false' : 'true' }}
+        @endif
+
         @if (!empty($attributes['v-error']))
         :form-classes="[{'has-error': {{ $attributes['v-error'] }} }]"
         @else
diff --git a/resources/views/components/form/group/editor.blade.php b/resources/views/components/form/group/editor.blade.php
index 81caee40f..8f860a6a1 100644
--- a/resources/views/components/form/group/editor.blade.php
+++ b/resources/views/components/form/group/editor.blade.php
@@ -26,7 +26,7 @@
         @if (! $attributes->has('label') && ! empty($label->contents))
             {!! $label ?? '' !!}
         @elseif (! empty($label))
-            <x-form.label for="{{ $name }}" class="form-control-label">{!! $label !!}</x-form.label>
+            <x-form.label for="{{ $name }}" {{ $attributes->merge($custom_attributes) }}>{!! $label !!}</x-form.label>
         @endif
 
         <x-form.input.editor
diff --git a/resources/views/components/form/group/email.blade.php b/resources/views/components/form/group/email.blade.php
index 585148a42..72e313bb3 100644
--- a/resources/views/components/form/group/email.blade.php
+++ b/resources/views/components/form/group/email.blade.php
@@ -26,7 +26,7 @@
         @if (! $attributes->has('label') && ! empty($label->contents))
             {!! $label ?? '' !!}
         @elseif (! empty($label))
-            <x-form.label for="{{ $name }}" class="form-control-label">{!! $label !!}</x-form.label>
+            <x-form.label for="{{ $name }}" {{ $attributes->merge($custom_attributes) }}>{!! $label !!}</x-form.label>
         @endif
 
         <div @class([
@@ -42,7 +42,6 @@
             <x-form.input.email
                 name="{{ $name }}"
                 id="{{ $id }}"
-                class="form-element"
                 value="{{ $value }}"
                 placeholder="{{ $placeholder }}"
                 v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : (!empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.' . $name : 'form.' . $name) }}"
diff --git a/resources/views/components/form/group/file.blade.php b/resources/views/components/form/group/file.blade.php
index f047ba726..5e864d4c2 100644
--- a/resources/views/components/form/group/file.blade.php
+++ b/resources/views/components/form/group/file.blade.php
@@ -26,7 +26,7 @@
         @if (! $attributes->has('label') && ! empty($label->contents))
             {!! $label ?? '' !!}
         @elseif (! empty($label))
-            <x-form.label for="{{ $name }}" class="form-control-label">{!! $label !!}</x-form.label>
+            <x-form.label for="{{ $name }}" {{ $attributes->merge($custom_attributes) }}>{!! $label !!}</x-form.label>
         @endif
 
         <div @class([
diff --git a/resources/views/components/form/group/invoice_text.blade.php b/resources/views/components/form/group/invoice_text.blade.php
index 83df697c7..8b6a9933e 100644
--- a/resources/views/components/form/group/invoice_text.blade.php
+++ b/resources/views/components/form/group/invoice_text.blade.php
@@ -141,6 +141,10 @@
         :disabled="{{ $attributes['v-disabled'] }}"
         @endif
 
+        @if (!$required)
+        :not-required={{ $required ? 'false' : 'true' }}
+        @endif
+
         @if (isset($attributes['v-error-message']))
         :form-error="{{ $attributes['v-error-message'] }}"
         @else
diff --git a/resources/views/components/form/group/number.blade.php b/resources/views/components/form/group/number.blade.php
index b00f92cba..b6ca22ffd 100644
--- a/resources/views/components/form/group/number.blade.php
+++ b/resources/views/components/form/group/number.blade.php
@@ -26,7 +26,7 @@
         @if (! $attributes->has('label') && ! empty($label->contents))
             {!! $label ?? '' !!}
         @elseif (! empty($label))
-            <x-form.label for="{{ $name }}" class="form-control-label">{!! $label !!}</x-form.label>
+            <x-form.label for="{{ $name }}" {{ $attributes->merge($custom_attributes) }}>{!! $label !!}</x-form.label>
         @endif
 
         <div @class([
@@ -42,7 +42,6 @@
             <x-form.input.number
                 name="{{ $name }}"
                 id="{{ $id }}"
-                class="form-element"
                 value="{{ $value }}"
                 placeholder="{{ $placeholder }}"
                 v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : (!empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.' . $name : 'form.' . $name) }}"
diff --git a/resources/views/components/form/group/password.blade.php b/resources/views/components/form/group/password.blade.php
index 604c03309..d6187f759 100644
--- a/resources/views/components/form/group/password.blade.php
+++ b/resources/views/components/form/group/password.blade.php
@@ -26,7 +26,7 @@
         @if (! $attributes->has('label') && ! empty($label->contents))
             {!! $label ?? '' !!}
         @elseif (! empty($label))
-            <x-form.label for="{{ $name }}" class="form-control-label">{!! $label !!}</x-form.label>
+            <x-form.label for="{{ $name }}" {{ $attributes->merge($custom_attributes) }}>{!! $label !!}</x-form.label>
         @endif
 
         <div @class([
@@ -42,7 +42,6 @@
             <x-form.input.password
                 name="{{ $name }}"
                 id="{{ $id }}"
-                class="form-element"
                 value="{{ $value }}"
                 placeholder="{{ $placeholder }}"
                 v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : (!empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.' . $name : 'form.' . $name) }}"
diff --git a/resources/views/components/form/group/radio.blade.php b/resources/views/components/form/group/radio.blade.php
index 44600cf41..618fde60d 100644
--- a/resources/views/components/form/group/radio.blade.php
+++ b/resources/views/components/form/group/radio.blade.php
@@ -26,7 +26,7 @@
         @if (! $attributes->has('label') && ! empty($label->contents))
             {!! $label ?? '' !!}
         @elseif (! empty($label))
-            <x-form.label for="{{ $name }}" class="form-control-label">{!! $label !!}</x-form.label>
+            <x-form.label for="{{ $name }}" {{ $attributes->merge($custom_attributes) }}>{!! $label !!}</x-form.label>
         @endif
 
         <div @class([
diff --git a/resources/views/components/form/group/select.blade.php b/resources/views/components/form/group/select.blade.php
index 4015567bc..410b3a9bf 100644
--- a/resources/views/components/form/group/select.blade.php
+++ b/resources/views/components/form/group/select.blade.php
@@ -125,6 +125,10 @@
         :no-arrow="{{ $attributes['no-arrow'] }}"
         @endif
 
+        @if (!$required)
+        :not-required={{ $required ? 'false' : 'true' }}
+        @endif
+
         @if (isset($attributes['v-disabled']))
         :disabled="{{ $attributes['v-disabled'] }}"
         @endif
diff --git a/resources/views/components/form/group/text.blade.php b/resources/views/components/form/group/text.blade.php
index 2c2b4abe7..80e61e8c4 100644
--- a/resources/views/components/form/group/text.blade.php
+++ b/resources/views/components/form/group/text.blade.php
@@ -26,7 +26,7 @@
         @if (! $attributes->has('label') && ! empty($label->contents))
             {!! $label ?? '' !!}
         @elseif (! empty($label))
-            <x-form.label for="{{ $name }}" class="form-control-label">{!! $label !!}</x-form.label>
+            <x-form.label for="{{ $name }}" {{ $attributes->merge($custom_attributes) }}>{!! $label !!}</x-form.label>
         @endif
 
         <div @class([
@@ -42,7 +42,6 @@
             <x-form.input.text
                 name="{{ $name }}"
                 id="{{ $id }}"
-                class="form-element"
                 value="{{ $value }}"
                 placeholder="{!! $placeholder !!}"
                 disabled="{{ $disabled }}"
diff --git a/resources/views/components/form/group/textarea.blade.php b/resources/views/components/form/group/textarea.blade.php
index 13ebc723f..928d25e30 100644
--- a/resources/views/components/form/group/textarea.blade.php
+++ b/resources/views/components/form/group/textarea.blade.php
@@ -26,7 +26,7 @@
         @if (! $attributes->has('label') && ! empty($label->contents))
             {!! $label ?? '' !!}
         @elseif (! empty($label))
-            <x-form.label for="{{ $name }}" class="form-control-label">{!! $label !!}</x-form.label>
+            <x-form.label for="{{ $name }}" {{ $attributes->merge($custom_attributes) }}>{!! $label !!}</x-form.label>
         @endif
 
         @php
@@ -45,7 +45,6 @@
         <x-form.input.textarea
             name="{{ $name }}"
             id="{{ $id }}"
-            class="form-element"
             value="{!! $value !!}"
             placeholder="{{ $placeholder }}"
             rows="{{ $rows }}"
diff --git a/resources/views/components/form/group/time.blade.php b/resources/views/components/form/group/time.blade.php
index fc22d3764..df40cd289 100644
--- a/resources/views/components/form/group/time.blade.php
+++ b/resources/views/components/form/group/time.blade.php
@@ -15,6 +15,8 @@
 
         @if ($required)
         :required="{{ $required ? 'true' : 'false' }}"
+        @else
+        :not-required={{ $required ? 'false' : 'true' }}
         @endif
 
         @if ($readonly)
diff --git a/resources/views/components/form/group/toggle.blade.php b/resources/views/components/form/group/toggle.blade.php
index ae32ace83..cc7ec1493 100644
--- a/resources/views/components/form/group/toggle.blade.php
+++ b/resources/views/components/form/group/toggle.blade.php
@@ -7,7 +7,7 @@
         v-if="{{ $attributes['show'] }}"
         @endif
         >
-        <x-form.label for="{{ $name }}" class="form-control-label">{!! $label !!}</x-form.label>
+        <x-form.label for="{{ $name }}" {{ $attributes->merge($custom_attributes) }}>{!! $label !!}</x-form.label>
 
         <div class="flex items-center mt-1">
             @if (empty($attributes['disabled']))
diff --git a/resources/views/components/form/input/checkbox.blade.php b/resources/views/components/form/input/checkbox.blade.php
index 12cc6ce33..6330455a4 100644
--- a/resources/views/components/form/input/checkbox.blade.php
+++ b/resources/views/components/form/input/checkbox.blade.php
@@ -20,6 +20,6 @@
     {{ $attributes->except(['placeholder', 'disabled', 'required', 'readonly', 'v-error', 'v-error-message', 'option', 'optionKey', 'optionValue']) }}
 />
 
-<label class="form-control-label ml-2" for="{{ ! empty($attributes[':id']) ? $attributes[':id'] : $id }}">
+<label class="ml-2" for="{{ ! empty($attributes[':id']) ? $attributes[':id'] : $id }}">
     {{ !empty($option) ? $option->$optionValue : $label }}
 </label>
diff --git a/resources/views/components/form/input/email.blade.php b/resources/views/components/form/input/email.blade.php
index 2a1be622c..7bfb901ca 100644
--- a/resources/views/components/form/input/email.blade.php
+++ b/resources/views/components/form/input/email.blade.php
@@ -1,6 +1,7 @@
 <input type="email"
     name="{{ $name }}"
     id="{{ $id }}"
+    class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
     @if ($value)
     value="{!! $value !!}"
     @endif
diff --git a/resources/views/components/form/input/number.blade.php b/resources/views/components/form/input/number.blade.php
index 3770738ee..1b4d0a6e9 100644
--- a/resources/views/components/form/input/number.blade.php
+++ b/resources/views/components/form/input/number.blade.php
@@ -1,6 +1,7 @@
 <input type="number"
     name="{{ $name }}"
     id="{{ $id }}"
+    class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
     @if ($value)
     value="{{ $value }}"
     @endif
diff --git a/resources/views/components/form/input/password.blade.php b/resources/views/components/form/input/password.blade.php
index 2f9bad6b6..69ee43130 100644
--- a/resources/views/components/form/input/password.blade.php
+++ b/resources/views/components/form/input/password.blade.php
@@ -1,6 +1,7 @@
 <input type="password"
     name="{{ $name }}"
     id="{{ $id }}"
+    class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
     @if ($value)
     value="{!! $value !!}"
     @endif
diff --git a/resources/views/components/form/input/select.blade.php b/resources/views/components/form/input/select.blade.php
index fd0d88c76..6a71b374b 100644
--- a/resources/views/components/form/input/select.blade.php
+++ b/resources/views/components/form/input/select.blade.php
@@ -125,6 +125,10 @@
     :no-arrow="{{ $attributes['no-arrow'] }}"
     @endif
 
+    @if (!$required)
+    :not-required={{ $required ? 'false' : 'true' }}
+    @endif
+
     @if (isset($attributes['v-disabled']))
     :disabled="{{ $attributes['v-disabled'] }}"
     @endif
diff --git a/resources/views/components/form/input/text.blade.php b/resources/views/components/form/input/text.blade.php
index ed07f1eed..c851ddcd7 100644
--- a/resources/views/components/form/input/text.blade.php
+++ b/resources/views/components/form/input/text.blade.php
@@ -1,6 +1,7 @@
 <input type="text"
     name="{{ $name }}"
     id="{{ $id }}"
+    class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
     value="{!! $value !!}"
     placeholder="{!! $placeholder !!}"
     @if ($disabled)
diff --git a/resources/views/components/form/input/textarea.blade.php b/resources/views/components/form/input/textarea.blade.php
index 92c9109ba..78ec2126c 100644
--- a/resources/views/components/form/input/textarea.blade.php
+++ b/resources/views/components/form/input/textarea.blade.php
@@ -1,6 +1,16 @@
+@php
+    $class= 'w-full h-24 text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple';
+
+    if ($attributes->has('override')) {
+        $class = $attributes->get('override');
+    } elseif ($attributes->get('class')) {
+        $class .= ' ' . $attributes->get('class');
+    }
+@endphp
 <textarea
     name="{{ $name }}"
     id="{{ $id }}"
+    class="{{ $class }}"
     rows="{{ $rows }}"
     placeholder="{{ $placeholder }}"
     @if ($disabled)
diff --git a/resources/views/components/form/label.blade.php b/resources/views/components/form/label.blade.php
index 643d7147e..49e782568 100644
--- a/resources/views/components/form/label.blade.php
+++ b/resources/views/components/form/label.blade.php
@@ -1,3 +1,7 @@
-<label {{ $attributes }}>
+<label class="text-black text-sm font-medium" {{ $attributes }}>
     {!! $slot !!}
+
+    @if ($attributes->has('required')) 
+        <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
+    @endif
 </label>
\ No newline at end of file
diff --git a/resources/views/components/index/bulkaction/all.blade.php b/resources/views/components/index/bulkaction/all.blade.php
index 85d00f777..654341d19 100644
--- a/resources/views/components/index/bulkaction/all.blade.php
+++ b/resources/views/components/index/bulkaction/all.blade.php
@@ -7,7 +7,7 @@
         v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : 'bulk_action.select_all' }}"
         @click="onSelectAllBulkAction"
     />
-    <label class="custom-control-label" for="table-check-all"></label>
+    <label for="table-check-all"></label>
 </div>
 
 @stack('bulk_action_all_input_end')
diff --git a/resources/views/components/index/bulkaction/single.blade.php b/resources/views/components/index/bulkaction/single.blade.php
index a00672982..6baa5ddc8 100644
--- a/resources/views/components/index/bulkaction/single.blade.php
+++ b/resources/views/components/index/bulkaction/single.blade.php
@@ -15,7 +15,7 @@
         v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : 'bulk_action.selected' }}"
         @change="onSelectBulkAction"
     >
-    <label class="custom-control-label" for="bulk-action-{{ $id }}"></label>
+    <label for="bulk-action-{{ $id }}"></label>
 </div>
 
 @stack($name . '_input_end')
diff --git a/resources/views/components/layouts/admin/scripts.blade.php b/resources/views/components/layouts/admin/scripts.blade.php
index d728f3613..b75deebbf 100644
--- a/resources/views/components/layouts/admin/scripts.blade.php
+++ b/resources/views/components/layouts/admin/scripts.blade.php
@@ -309,4 +309,4 @@
     window.livewire_app_url = {{ company_id() }};
 </script>
 
-@stack('scripts_end')
+@stack('scripts_end')
\ No newline at end of file
diff --git a/resources/views/components/layouts/portal/scripts.blade.php b/resources/views/components/layouts/portal/scripts.blade.php
index b3701d298..4a82d6b95 100644
--- a/resources/views/components/layouts/portal/scripts.blade.php
+++ b/resources/views/components/layouts/portal/scripts.blade.php
@@ -266,4 +266,4 @@
     window.livewire_app_url = {{ company_id() }};
 </script>
 
-@stack('scripts_end')
+@stack('scripts_end')
\ No newline at end of file
diff --git a/resources/views/install/language/create.blade.php b/resources/views/install/language/create.blade.php
index 096e51103..b6cfc18f0 100644
--- a/resources/views/install/language/create.blade.php
+++ b/resources/views/install/language/create.blade.php
@@ -5,7 +5,7 @@
 
     <x-slot name="content">
         <div class="mb-0">
-            <select name="lang" id="lang" size="14" class="w-full form-control-label">
+            <select name="lang" id="lang" size="14" class="w-full text-black text-sm font-medium">
                 @foreach (language()->allowed() as $code => $name)
                 <option value="{{ $code }}" @if ($code=='en-GB' ) {{ 'selected="selected"' }} @endif>{{ $name }}</option>
                 @endforeach
diff --git a/resources/views/livewire/common/search.blade.php b/resources/views/livewire/common/search.blade.php
index fb45c9f41..e40e43791 100644
--- a/resources/views/livewire/common/search.blade.php
+++ b/resources/views/livewire/common/search.blade.php
@@ -7,7 +7,7 @@
                 </span>
             </div>
 
-            <input type="text" name="search" wire:model.debounce.500ms="keyword" class="form-element" autocomplete="off" placeholder="{{ trans('general.search') }}">
+            <input type="text" name="search" wire:model.debounce.500ms="keyword" class="text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" autocomplete="off" placeholder="{{ trans('general.search') }}">
 
             @if ($results)
             <div class="dropdown-menu dropdown-menu-xl dropdown-menu-center show" ref="menu">
diff --git a/resources/views/settings/email-templates/edit.blade.php b/resources/views/settings/email-templates/edit.blade.php
index e3e0aa63b..15375d48d 100644
--- a/resources/views/settings/email-templates/edit.blade.php
+++ b/resources/views/settings/email-templates/edit.blade.php
@@ -45,7 +45,7 @@
                                 <x-form.group.text name="subject" label="{{ trans('settings.email.templates.subject') }}" form-group-class="sm:col-span-6" />
 
                                 <div class="sm:col-span-6 required" v-if='form.body != null'>
-                                    <x-form.label for="body" class="form-control-label">
+                                    <x-form.label for="body">
                                         {{ trans('settings.email.templates.body') }}
                                     </x-form.label>
 
diff --git a/resources/views/settings/schedule/edit.blade.php b/resources/views/settings/schedule/edit.blade.php
index b41af56ca..465e3b55a 100644
--- a/resources/views/settings/schedule/edit.blade.php
+++ b/resources/views/settings/schedule/edit.blade.php
@@ -35,10 +35,10 @@
 
                     <x-slot name="body">
                         <div class="sm:col-span-6">
-                            <label for="cron_command" class="form-control-label">
+                            <x-form.label for="cron_command">
                                 {{ trans('settings.scheduling.command') }}
-                            </label>
-                            <input type="text" class="form-element form-element-muted" disabled value="php {{ base_path('artisan') }} schedule:run >> /dev/null 2>&1">
+                            </x-form.label>
+                            <input type="text" class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" disabled value="php {{ base_path('artisan') }} schedule:run >> /dev/null 2>&1">
                         </div>
 
                         <x-form.group.text name="time" label="{{ trans('settings.scheduling.schedule_time') }}" value="{{ setting('schedule.time') }}" not-required />