diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index d103360a..4d0d876b 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -14,18 +14,18 @@
     "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=90270d0c5aeb5c50dacf",
     "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=61e970ffb679245686c3",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=26a26c5593b41f794d32",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=f3246350503786bf3618",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=70acb48a6c7627c1de7a",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=aa284736dda7647d5c9e",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=6bd4516589f23ec25ae6",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=b1123c792a51f9b3ec11",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=a2e8225cb2d71bb233cb",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=818ceb6be0fe9f4d06a4",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=b929de231c24d2e82389",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=c0b15222a239b25c24e9",
     "/chunks/app-index.js": "/chunks/app-index.js?id=6c55fe0a70ae4080ae1c",
     "/chunks/app-language.js": "/chunks/app-language.js?id=91e1d30bf7a3c7a54136",
     "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js": "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js?id=38b2085e829a84df0e5f",
     "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js?id=3cbb19b80e635b3524e5",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=9d013212bbac52d5f2f8",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=af38547bd60f92575c03",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=9c049ba80e8a889146be",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=f0f2dec48dc193f73197",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=db54f40c07bdfb86b81e",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=459d95c0256c819ce4bf",
     "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js?id=107a78323eef0c1d4c81",
@@ -721,5 +721,21 @@
     "/chunks/users.5bef86aeafe91be3c73d.hot-update.js": "/chunks/users.5bef86aeafe91be3c73d.hot-update.js",
     "/chunks/pages.35e66049556a2f1388a3.hot-update.js": "/chunks/pages.35e66049556a2f1388a3.hot-update.js",
     "/chunks/pages.89358421733f488c18c9.hot-update.js": "/chunks/pages.89358421733f488c18c9.hot-update.js",
-    "/chunks/pages.3857ee94741a4c0f04eb.hot-update.js": "/chunks/pages.3857ee94741a4c0f04eb.hot-update.js"
+    "/chunks/pages.3857ee94741a4c0f04eb.hot-update.js": "/chunks/pages.3857ee94741a4c0f04eb.hot-update.js",
+    "/chunks/app-appearance.23c94a5e9c4d5655a932.hot-update.js": "/chunks/app-appearance.23c94a5e9c4d5655a932.hot-update.js",
+    "/chunks/app-billings.fafa1b5774aab9057fd9.hot-update.js": "/chunks/app-billings.fafa1b5774aab9057fd9.hot-update.js",
+    "/chunks/app-others.fafa1b5774aab9057fd9.hot-update.js": "/chunks/app-others.fafa1b5774aab9057fd9.hot-update.js",
+    "/chunks/app-payments.16145bda6b9f9bd09826.hot-update.js": "/chunks/app-payments.16145bda6b9f9bd09826.hot-update.js",
+    "/chunks/app-payments.50e02d5d9399b7eb3875.hot-update.js": "/chunks/app-payments.50e02d5d9399b7eb3875.hot-update.js",
+    "/chunks/app-payments.8f03d3f4af2ffca93413.hot-update.js": "/chunks/app-payments.8f03d3f4af2ffca93413.hot-update.js",
+    "/chunks/app-payments.1b098bed5b84f6222ad5.hot-update.js": "/chunks/app-payments.1b098bed5b84f6222ad5.hot-update.js",
+    "/chunks/app-payments.8c20a203271b2aa80805.hot-update.js": "/chunks/app-payments.8c20a203271b2aa80805.hot-update.js",
+    "/chunks/app-payments.129a75b63876743900a8.hot-update.js": "/chunks/app-payments.129a75b63876743900a8.hot-update.js",
+    "/chunks/app-payments.a73ee8581bc859ddd2b6.hot-update.js": "/chunks/app-payments.a73ee8581bc859ddd2b6.hot-update.js",
+    "/chunks/app-payments.10d448070de9d8313b42.hot-update.js": "/chunks/app-payments.10d448070de9d8313b42.hot-update.js",
+    "/chunks/app-email.fc8defe74763bbfbcdc3.hot-update.js": "/chunks/app-email.fc8defe74763bbfbcdc3.hot-update.js",
+    "/chunks/app-email.ef13b40e7b033b5b30f6.hot-update.js": "/chunks/app-email.ef13b40e7b033b5b30f6.hot-update.js",
+    "/chunks/app-email.efb96547f2fb7485f00a.hot-update.js": "/chunks/app-email.efb96547f2fb7485f00a.hot-update.js",
+    "/chunks/app-payments.e26c17b73a3347c18e4b.hot-update.js": "/chunks/app-payments.e26c17b73a3347c18e4b.hot-update.js",
+    "/chunks/app-email.123b5b086a465d1dbb5e.hot-update.js": "/chunks/app-email.123b5b086a465d1dbb5e.hot-update.js"
 }
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
index 5700e803..a645d461 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
@@ -1,68 +1,60 @@
 <template>
     <PageTab :is-loading="isLoading">
+		<div v-if="app" class="card shadow-card">
+			<FormLabel>
+				{{ $t('admin_settings.appearance.section_general') }}
+			</FormLabel>
 
-        <!--Personal Information-->
-        <PageTabGroup v-if="app">
-            <div class="form block-form">
+			<AppInputText :title="$t('admin_settings.appearance.title')">
+				<input @input="$updateText('/admin/settings', 'app_title', app.title)" v-model="app.title" :placeholder="$t('admin_settings.appearance.title_plac')" type="text" class="focus-border-theme input-dark"/>
+			</AppInputText>
 
-				<div class="card shadow-card">
-					<FormLabel>
-						{{ $t('admin_settings.appearance.section_general') }}
-					</FormLabel>
+			<AppInputText :title="$t('admin_settings.appearance.description')">
+				<input @input="$updateText('/admin/settings', 'app_description', app.description)" v-model="app.description" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" class="focus-border-theme input-dark"/>
+			</AppInputText>
 
-					<AppInputText :title="$t('admin_settings.appearance.title')">
-						<input @input="$updateText('/admin/settings', 'app_title', app.title)" v-model="app.title" :placeholder="$t('admin_settings.appearance.title_plac')" type="text" class="focus-border-theme input-dark"/>
-					</AppInputText>
-
-					<AppInputText :title="$t('admin_settings.appearance.description')">
-						<input @input="$updateText('/admin/settings', 'app_description', app.description)" v-model="app.description" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" class="focus-border-theme input-dark"/>
-					</AppInputText>
-
-					<AppInputSwitch :title="$t('color_theme')" :description="$t('color_theme_description')">
-						<input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color"/>
-					</AppInputSwitch>
-				</div>
-
-				<div class="card shadow-card">
-					<FormLabel>
-						{{ $t('Branding') }}
-					</FormLabel>
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.appearance.logo') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo" v-slot="{ errors }">
-							<ImageInput @input="$updateImage('/admin/settings', 'app_logo', app.logo)" :image="$getImage(app.logo)" v-model="app.logo" :error="errors[0]"/>
-						</ValidationProvider>
-					</div>
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.appearance.logo_horizontal') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo Horizontal" v-slot="{ errors }">
-							<ImageInput @input="$updateImage('/admin/settings', 'app_logo_horizontal', app.logo_horizontal)" :image="$getImage(app.logo_horizontal)"
-										v-model="app.logo_horizontal" :error="errors[0]"/>
-						</ValidationProvider>
-					</div>
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.appearance.favicon') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
-							<ImageInput @input="$updateImage('/admin/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon" :error="errors[0]"/>
-						</ValidationProvider>
-					</div>
-					<div class="block-wrapper">
-						<label>{{ $t('og_image') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
-							<ImageInput @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)" :image="$getImage(app.og_image)" v-model="app.og_image" :error="errors[0]"/>
-							<small class="input-help">{{ $t('og_image_description') }}</small>
-						</ValidationProvider>
-					</div>
-					<div class="block-wrapper">
-						<label>{{ $t('app_touch_icon') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
-							<ImageInput @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)" :image="$getImage(app.touch_icon)" v-model="app.touch_icon" :error="errors[0]"/>
-							<small class="input-help">{{ $t('app_touch_icon_description') }}</small>
-						</ValidationProvider>
-					</div>
-				</div>
-            </div>
-        </PageTabGroup>
+			<AppInputSwitch :title="$t('color_theme')" :description="$t('color_theme_description')">
+				<input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color"/>
+			</AppInputSwitch>
+		</div>
+		<div v-if="app" class="card shadow-card">
+			<FormLabel>
+				{{ $t('Branding') }}
+			</FormLabel>
+			<div class="block-wrapper">
+				<label>{{ $t('admin_settings.appearance.logo') }}:</label>
+				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo" v-slot="{ errors }">
+					<ImageInput @input="$updateImage('/admin/settings', 'app_logo', app.logo)" :image="$getImage(app.logo)" v-model="app.logo" :error="errors[0]"/>
+				</ValidationProvider>
+			</div>
+			<div class="block-wrapper">
+				<label>{{ $t('admin_settings.appearance.logo_horizontal') }}:</label>
+				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo Horizontal" v-slot="{ errors }">
+					<ImageInput @input="$updateImage('/admin/settings', 'app_logo_horizontal', app.logo_horizontal)" :image="$getImage(app.logo_horizontal)"
+								v-model="app.logo_horizontal" :error="errors[0]"/>
+				</ValidationProvider>
+			</div>
+			<div class="block-wrapper">
+				<label>{{ $t('admin_settings.appearance.favicon') }}:</label>
+				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
+					<ImageInput @input="$updateImage('/admin/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon" :error="errors[0]"/>
+				</ValidationProvider>
+			</div>
+			<div class="block-wrapper">
+				<label>{{ $t('og_image') }}:</label>
+				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
+					<ImageInput @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)" :image="$getImage(app.og_image)" v-model="app.og_image" :error="errors[0]"/>
+					<small class="input-help">{{ $t('og_image_description') }}</small>
+				</ValidationProvider>
+			</div>
+			<div class="block-wrapper">
+				<label>{{ $t('app_touch_icon') }}:</label>
+				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
+					<ImageInput @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)" :image="$getImage(app.touch_icon)" v-model="app.touch_icon" :error="errors[0]"/>
+					<small class="input-help">{{ $t('app_touch_icon_description') }}</small>
+				</ValidationProvider>
+			</div>
+		</div>
     </PageTab>
 </template>
 
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
index 478e84af..32e2d12e 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
@@ -13,7 +13,6 @@
 				<input @input="$updateText('/admin/settings', 'billing_vat_number', billingInformation.billing_vat_number)" v-model="billingInformation.billing_vat_number" :placeholder="$t('admin_settings.billings.vat_plac')" type="text" class="focus-border-theme input-dark"/>
 			</AppInputText>
 		</div>
-
 		<div v-if="billingInformation" class="card shadow-card">
 			<FormLabel>
 				{{ $t('admin_settings.billings.section_billing') }}
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
index 65d9adbc..5ca7531f 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
@@ -1,76 +1,49 @@
 <template>
     <PageTab :is-loading="isLoading">
-
-        <!--Personal Information-->
-        <PageTabGroup>
-            <ValidationObserver @submit.prevent="EmailSetupSubmit" ref="EmailSetup" v-slot="{ invalid }" tag="form" class="form block-form">
-
-				<div class="card shadow-card">
-					<FormLabel>{{ $t('admin_settings.email.section_email') }}</FormLabel>
-
-					<InfoBox>
-						<p v-html="$t('admin_settings.email.email_disclaimer')"></p>
-					</InfoBox>
-
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.email.driver') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Driver" rules="required" v-slot="{ errors }">
-							<input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.email.host') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Host" rules="required" v-slot="{ errors }">
-							<input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.email.port') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Port" rules="required" v-slot="{ errors }">
-							<input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.email.username') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Username" rules="required" v-slot="{ errors }">
-							<input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.email.password') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Password" rules="required" v-slot="{ errors }">
-							<input v-model="mail.password" :placeholder="$t('admin_settings.email.password_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.email.encryption') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Encryption" rules="required" v-slot="{ errors }">
-							<SelectInput v-model="mail.encryption" :options="encryptionList" :placeholder="$t('admin_settings.email.encryption_plac')" :isError="errors[0]"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
-								button-style="theme" class="submit-button">
-						{{ $t('admin_settings.email.save_button') }}
-					</ButtonBase>
-				</div>
-            </ValidationObserver>
-        </PageTabGroup>
+        <ValidationObserver @submit.prevent="EmailSetupSubmit" ref="EmailSetup" v-slot="{ invalid }" tag="form" class="card shadow-card">
+            <FormLabel>{{ $t('admin_settings.email.section_email') }}</FormLabel>
+            <InfoBox>
+                <p v-html="$t('admin_settings.email.email_disclaimer')"></p>
+            </InfoBox>
+            <ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('admin_settings.email.driver')" :error="errors[0]">
+                    <input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+                </AppInputText>
+            </ValidationProvider>
+            <ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('admin_settings.email.host')" :error="errors[0]">
+                    <input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+                </AppInputText>
+            </ValidationProvider>
+            <ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('admin_settings.email.port')" :error="errors[0]">
+                    <input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+                </AppInputText>
+            </ValidationProvider>
+            <ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('admin_settings.email.username')" :error="errors[0]">
+                    <input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+                </AppInputText>
+            </ValidationProvider>
+            <ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('admin_settings.email.password')" :error="errors[0]">
+                    <input v-model="mail.password" :placeholder="$t('admin_settings.email.password_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+                </AppInputText>
+            </ValidationProvider>
+            <ValidationProvider tag="div" mode="passive" name="Mail Encryption" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('admin_settings.email.encryption')" :error="errors[0]">
+                    <SelectInput v-model="mail.encryption" :options="encryptionList" :placeholder="$t('admin_settings.email.encryption_plac')" :isError="errors[0]"/>
+                </AppInputText>
+            </ValidationProvider>
+            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
+                {{ $t('admin_settings.email.save_button') }}
+            </ButtonBase>
+        </ValidationObserver>
     </PageTab>
 </template>
 
 <script>
+	import AppInputText from "../../../../components/Admin/AppInputText";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
     import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
@@ -88,6 +61,7 @@
     export default {
         name: 'AppAppearance',
         components: {
+			AppInputText,
             ValidationObserver,
             ValidationProvider,
             StorageItemDetail,
@@ -161,22 +135,3 @@
         }
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .block-form {
-        max-width: 100%;
-    }
-
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    .dark {
-
-    }
-
-</style>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
index 71a92354..198d7915 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
@@ -43,7 +43,6 @@
 				/>
 			</AppInputSwitch>
 		</div>
-
 		<div class="card shadow-card">
 			<FormLabel>
 				{{ $t('admin_settings.others.section_others') }}
@@ -65,7 +64,6 @@
 				<input @input="$updateText('/admin/settings', 'upload_limit', app.uploadLimit, true)" v-model="app.uploadLimit" :placeholder="$t('admin_settings.others.upload_limit_plac')" type="number" min="0" step="1" class="focus-border-theme input-dark" />
 			</AppInputText>
 		</div>
-
 		<div class="card shadow-card">
 			<FormLabel>
 				{{ $t('admin_settings.others.section_cache') }}
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
index 4d3a6317..ec21c423 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
@@ -1,228 +1,187 @@
 <template>
     <PageTab :is-loading="isLoading">
 
-        <!--Stripe Information-->
-        <PageTabGroup v-if="config.stripe_public_key && payments">
-            <div class="form block-form">
-				<div class="card shadow-card">
-					<FormLabel>
-						{{ $t('admin_settings.payments.section_payments') }}
-					</FormLabel>
-					<InfoBox>
-						<p v-html="$t('admin_settings.payments.credentials_disclaimer')"></p>
-					</InfoBox>
-					<div class="block-wrapper">
-						<div class="input-wrapper">
-							<div class="inline-wrapper">
-								<div class="switch-label">
-									<label class="input-label">{{ $t('admin_settings.payments.allow_payments') }}:</label>
-								</div>
-								<SwitchInput @input="$updateText('/admin/settings', 'payments_active', payments.status)" v-model="payments.status" class="switch" :state="payments.status"/>
-							</div>
-						</div>
-					</div>
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.payments.webhook_url') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook URL" rules="required" v-slot="{ errors }">
-							<input :value="stripeWebhookEndpoint" type="text" class="focus-border-theme input-dark" disabled/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-				</div>
-            </div>
-        </PageTabGroup>
+		<!--Stripe Information-->
+		<PageTabGroup v-if="config.stripe_public_key && payments">
+			<div class="card shadow-card">
+				<FormLabel>
+					{{ $t('admin_settings.payments.section_payments') }}
+				</FormLabel>
+				<InfoBox>
+					<p v-html="$t('admin_settings.payments.credentials_disclaimer')"></p>
+				</InfoBox>
+				<AppInputSwitch :title="$t('admin_settings.payments.allow_payments')">
+					<SwitchInput @input="$updateText('/admin/settings', 'payments_active', payments.status)" v-model="payments.status" class="switch" :state="payments.status" />
+				</AppInputSwitch>
+				<AppInputText :title="$t('admin_settings.payments.webhook_url')">
+					<input :value="stripeWebhookEndpoint" type="text" class="focus-border-theme input-dark" disabled />
+				</AppInputText>
+			</div>
+		</PageTabGroup>
 
-        <!--Stripe Set up-->
-        <PageTabGroup v-if="! config.stripe_public_key">
-            <ValidationObserver @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="form block-form">
-
-				<div class="card shadow-card">
-					<FormLabel>
-						{{ $t('admin_settings.payments.stripe_setup') }}
-					</FormLabel>
-
-					<InfoBox>
-						<p v-html="$t('admin_settings.payments.stripe_create_acc')"></p>
-					</InfoBox>
-
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.payments.stripe_currency') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Currency" rules="required" v-slot="{ errors }">
-							<SelectInput v-model="stripeCredentials.currency" :options="currencyList" :placeholder="$t('admin_settings.payments.stripe_currency_plac')" :isError="errors[0]"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.payments.stripe_pub_key') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Publishable Key" rules="required" v-slot="{ errors }">
-							<input v-model="stripeCredentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.payments.stripe_sec_key') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret Key" rules="required" v-slot="{ errors }">
-							<input v-model="stripeCredentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<div class="block-wrapper">
-						<label>Webhook URL:</label>
+		<!--Stripe Set up-->
+		<PageTabGroup v-if="! config.stripe_public_key">
+			<ValidationObserver @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="card shadow-card">
+				<FormLabel>
+					{{ $t('admin_settings.payments.stripe_setup') }}
+				</FormLabel>
+				<InfoBox>
+					<p v-html="$t('admin_settings.payments.stripe_create_acc')"></p>
+				</InfoBox>
+				<ValidationProvider tag="div" mode="passive" name="Currency" rules="required" v-slot="{ errors }">
+					<AppInputText :title="$t('admin_settings.payments.stripe_currency')" :error="errors[0]">
+						<SelectInput v-model="stripeCredentials.currency" :options="currencyList" :placeholder="$t('admin_settings.payments.stripe_currency_plac')" :isError="errors[0]" />
+					</AppInputText>
+				</ValidationProvider>
+				<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
+					<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
+						<input v-model="stripeCredentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+					</AppInputText>
+				</ValidationProvider>
+				<ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
+					<AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
+						<input v-model="stripeCredentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+					</AppInputText>
+				</ValidationProvider>
+				<ValidationProvider tag="div" mode="passive" name="Webhook URL" rules="required" v-slot="{ errors }">
+					<AppInputText :title="$t('Webhook URL')" :error="errors[0]">
 						<InfoBox>
 							<p v-html="$t('admin_settings.payments.stripe_create_webhook')"></p>
 						</InfoBox>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook URL" rules="required" v-slot="{ errors }">
-							<input :value="stripeWebhookEndpoint" type="text" class="focus-border-theme input-dark" disabled/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<div class="block-wrapper">
-						<label>Webhook Secret:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook Secret" rules="required" v-slot="{ errors }">
-							<input v-model="stripeCredentials.webhookSecret" :placeholder="$t('admin_settings.payments.stripe_webhook_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<InfoBox v-if="isError" type="error" >
-						<p>{{ errorMessage }}</p>
-					</InfoBox>
-
-					<ButtonBase :loading="isLoading" :disabled="isLoading" type="submit"
-								button-style="theme" class="submit-button">
-						{{ submitButtonText }}
-					</ButtonBase>
-				</div>
-
-            </ValidationObserver>
-        </PageTabGroup>
-    </PageTab>
+						<input :value="stripeWebhookEndpoint" type="text" class="focus-border-theme input-dark" disabled />
+					</AppInputText>
+				</ValidationProvider>
+				<ValidationProvider tag="div" mode="passive" name="Webhook Secret" rules="required" v-slot="{ errors }">
+					<AppInputText :title="$t('Webhook Secret')" :error="errors[0]">
+						<input v-model="stripeCredentials.webhookSecret" :placeholder="$t('admin_settings.payments.stripe_webhook_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+					</AppInputText>
+				</ValidationProvider>
+				<InfoBox v-if="isError" type="error">
+					<p>{{ errorMessage }}</p>
+				</InfoBox>
+				<ButtonBase :loading="isLoading" :disabled="isLoading" type="submit"
+							button-style="theme" class="submit-button">
+					{{ submitButtonText }}
+				</ButtonBase>
+			</ValidationObserver>
+		</PageTabGroup>
+	</PageTab>
 </template>
 
 <script>
-    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
-    import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
-    import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
-    import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
-    import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-    import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
-    import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-    import {required} from 'vee-validate/dist/rules'
-    import {mapGetters} from 'vuex'
-    import {events} from '/resources/js/bus'
-    import axios from 'axios'
+	import AppInputText from "../../../../components/Admin/AppInputText";
+	import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+	import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
+	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
+	import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
+	import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
+	import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
+	import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
+	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+	import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
+	import PageTab from '/resources/js/components/Others/Layout/PageTab'
+	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+	import {required} from 'vee-validate/dist/rules'
+	import {mapGetters} from 'vuex'
+	import {events} from '/resources/js/bus'
+	import axios from 'axios'
+	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch";
 
-    export default {
-        name: 'AppPayments',
-        components: {
-            ValidationObserver,
-            ValidationProvider,
-            StorageItemDetail,
-            PageTabGroup,
-            SwitchInput,
-            SelectInput,
-            ImageInput,
-            ButtonBase,
-            FormLabel,
-            SetupBox,
-            required,
-            PageTab,
-            InfoBox,
-        },
-        computed: {
-            ...mapGetters(['config', 'currencyList']),
-            stripeWebhookEndpoint() {
-                return this.config.host + '/stripe/webhook'
-            },
-            submitButtonText() {
-                return this.isLoading ? this.$t('admin_settings.payments.button_testing') : this.$t('admin_settings.payments.button_submit')
-            }
-        },
-        data() {
-            return {
-                isLoading: true,
-                isError: false,
-                errorMessage: '',
-                payments: undefined,
-                stripeCredentials: {
-                    key: '',
-                    secret: '',
-                    webhookSecret: '',
-                    currency: '',
-                },
-            }
-        },
-        methods: {
-            async stripeCredentialsSubmit() {
+	export default {
+		name: 'AppPayments',
+		components: {
+			AppInputSwitch,
+			AppInputText,
+			ValidationObserver,
+			ValidationProvider,
+			StorageItemDetail,
+			PageTabGroup,
+			SwitchInput,
+			SelectInput,
+			ImageInput,
+			ButtonBase,
+			FormLabel,
+			SetupBox,
+			required,
+			PageTab,
+			InfoBox,
+		},
+		computed: {
+			...mapGetters(['config', 'currencyList']),
+			stripeWebhookEndpoint() {
+				return this.config.host + '/stripe/webhook'
+			},
+			submitButtonText() {
+				return this.isLoading ? this.$t('admin_settings.payments.button_testing') : this.$t('admin_settings.payments.button_submit')
+			}
+		},
+		data() {
+			return {
+				isLoading: true,
+				isError: false,
+				errorMessage: '',
+				payments: undefined,
+				stripeCredentials: {
+					key: '',
+					secret: '',
+					webhookSecret: '',
+					currency: '',
+				},
+			}
+		},
+		methods: {
+			async stripeCredentialsSubmit() {
 
-                // Validate fields
-                const isValid = await this.$refs.stripeCredentials.validate();
+				// Validate fields
+				const isValid = await this.$refs.stripeCredentials.validate();
 
-                if (!isValid) return;
+				if (!isValid) return;
 
-                // Start loading
-                this.isLoading = true
+				// Start loading
+				this.isLoading = true
 
-                // Send request to get verify account
-                axios
-                    .post('/api/admin/settings/stripe', this.stripeCredentials)
-                    .then(() => {
+				// Send request to get verify account
+				axios
+					.post('/api/admin/settings/stripe', this.stripeCredentials)
+					.then(() => {
 
-                        // Store Stripe Public
-                        this.$store.commit('SET_STRIPE_PUBLIC_KEY', this.stripeCredentials.key)
+						// Store Stripe Public
+						this.$store.commit('SET_STRIPE_PUBLIC_KEY', this.stripeCredentials.key)
 
-                        // Show toaster
-                        events.$emit('toaster', {
-                            type: 'success',
-                            message: this.$t('toaster.stripe_set'),
-                        })
-                    })
-                    .catch(error => {
+						// Show toaster
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('toaster.stripe_set'),
+						})
+					})
+					.catch(error => {
 
-                        if (error.response.status = 401) {
-                            this.isError = true
-                            this.errorMessage = error.response.data.message
-                        }
-                    })
-                    .finally(() => {
+						if (error.response.status = 401) {
+							this.isError = true
+							this.errorMessage = error.response.data.message
+						}
+					})
+					.finally(() => {
 
-                        // End loading
-                        this.isLoading = false
-                    })
-            },
-        },
-        mounted() {
-            axios.get('/api/admin/settings', {
-                params: {
-                    column: 'payments_active|payments_configured'
-                }
-            })
-                .then(response => {
-                    this.isLoading = false
+						// End loading
+						this.isLoading = false
+					})
+			},
+		},
+		mounted() {
+			axios.get('/api/admin/settings', {
+					params: {
+						column: 'payments_active|payments_configured'
+					}
+				})
+				.then(response => {
+					this.isLoading = false
 
-                    this.payments = {
-                        configured: parseInt(response.data.payments_configured),
-                        status: parseInt(response.data.payments_active),
-                    }
-                })
-        }
-    }
+					this.payments = {
+						configured: parseInt(response.data.payments_configured),
+						status: parseInt(response.data.payments_active),
+					}
+				})
+		}
+	}
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .block-form {
-        max-width: 100%;
-    }
-</style>