diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 90de6742..d103360a 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -51,7 +51,7 @@
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
     "/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=725b13827e6e55f2d286",
-    "/chunks/pages.js": "/chunks/pages.js?id=038b6c946b7eb16f85bf",
+    "/chunks/pages.js": "/chunks/pages.js?id=10510081613e26cb3d84",
     "/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
     "/chunks/plan-create.js": "/chunks/plan-create.js?id=72e4ef277bb881d5cadf",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=a4db8cc9a98a81eed8d1",
@@ -93,14 +93,14 @@
     "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=8bd237c632018a537d76",
     "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7ee9b84ffed9bf544997",
     "/chunks/user.js": "/chunks/user.js?id=5c5421f40243bcba9c23",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=244c7f71f243260e3faa",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=0f1bce798ff38795cc9a",
     "/chunks/user-delete.js": "/chunks/user-delete.js?id=0559dd74a7d8e4b8afbc",
     "/chunks/user-detail.js": "/chunks/user-detail.js?id=03bfe48eb0673efa5001",
     "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a03cdaa3511d88acdd97",
     "/chunks/user-password.js": "/chunks/user-password.js?id=bc9388e177e8e8e7601a",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=bb30538ad15465e45248",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=370b3df08b2ee39bf6ac",
-    "/chunks/users.js": "/chunks/users.js?id=2359885214cec5135847",
+    "/chunks/users.js": "/chunks/users.js?id=bd78d2a3c0c6253da984",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js?id=8163e0eab55c50f8afb8",
     "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=37ce1e1ab9968c100712",
@@ -710,5 +710,16 @@
     "/chunks/settings-password.341fa6aa904779d9998e.hot-update.js": "/chunks/settings-password.341fa6aa904779d9998e.hot-update.js",
     "/chunks/settings-password.4abdfe172f5538bb27a2.hot-update.js": "/chunks/settings-password.4abdfe172f5538bb27a2.hot-update.js",
     "/chunks/settings-password.ab8197b698f0904eb479.hot-update.js": "/chunks/settings-password.ab8197b698f0904eb479.hot-update.js",
-    "/chunks/settings-password.3bee9428ac750796944f.hot-update.js": "/chunks/settings-password.3bee9428ac750796944f.hot-update.js"
+    "/chunks/settings-password.3bee9428ac750796944f.hot-update.js": "/chunks/settings-password.3bee9428ac750796944f.hot-update.js",
+    "/chunks/user-create.f9dbb82204d796743cf0.hot-update.js": "/chunks/user-create.f9dbb82204d796743cf0.hot-update.js",
+    "/chunks/user-create.3975eef598298e51f4d7.hot-update.js": "/chunks/user-create.3975eef598298e51f4d7.hot-update.js",
+    "/chunks/user-create.dbbc650d3a7d90c8549b.hot-update.js": "/chunks/user-create.dbbc650d3a7d90c8549b.hot-update.js",
+    "/chunks/user-create.b64d0b07e164d3c5cb98.hot-update.js": "/chunks/user-create.b64d0b07e164d3c5cb98.hot-update.js",
+    "/chunks/user-create.2227386c711d31784151.hot-update.js": "/chunks/user-create.2227386c711d31784151.hot-update.js",
+    "/chunks/user-create.d8cce1ef42c68f249562.hot-update.js": "/chunks/user-create.d8cce1ef42c68f249562.hot-update.js",
+    "/chunks/user-create.ad21177ea9970bd7150c.hot-update.js": "/chunks/user-create.ad21177ea9970bd7150c.hot-update.js",
+    "/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"
 }
diff --git a/resources/js/views/Admin/Pages.vue b/resources/js/views/Admin/Pages.vue
index d0afd195..93820074 100644
--- a/resources/js/views/Admin/Pages.vue
+++ b/resources/js/views/Admin/Pages.vue
@@ -5,7 +5,7 @@
 				<DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="table table-users">
 					<template slot-scope="{ row }">
 						<tr>
-							<td class="py-3">
+							<td class="py-4">
 								<router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="cell-item" tag="div">
 									<span>{{ row.data.attributes.title }}</span>
 								</router-link>
diff --git a/resources/js/views/Admin/Users.vue b/resources/js/views/Admin/Users.vue
index 3171a36b..61a6e1e5 100644
--- a/resources/js/views/Admin/Users.vue
+++ b/resources/js/views/Admin/Users.vue
@@ -122,7 +122,7 @@
                         return 'purple'
                         break;
                     case 'user':
-                        return 'yellow'
+                        return 'green'
                         break;
                 }
             }
diff --git a/resources/js/views/Admin/Users/UserCreate.vue b/resources/js/views/Admin/Users/UserCreate.vue
index 682cda98..35b50229 100644
--- a/resources/js/views/Admin/Users/UserCreate.vue
+++ b/resources/js/views/Admin/Users/UserCreate.vue
@@ -1,86 +1,70 @@
 <template>
-	<ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form" class="form block-form">
-
-		<div class="card shadow-card">
-			<FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel>
+    <ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form">
+        <div class="card shadow-card">
+            <FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel>
 
 			<!--Avatar-->
-			<div class="block-wrapper">
-				<label>{{ $t('admin_page_user.create_user.avatar') }}</label>
-				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }">
+			<ValidationProvider tag="div" mode="passive" name="avatar" v-slot="{ errors }">
+				<AppInputText :title="$t('admin_page_user.create_user.avatar')" :error="errors[0]">
 					<ImageInput v-model="user.avatar" :error="errors[0]" />
-				</ValidationProvider>
-			</div>
+                </AppInputText>
+			</ValidationProvider>
 
 			<!--Email-->
-			<div class="block-wrapper">
-				<label>{{ $t('page_registration.label_email') }}:</label>
-				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
-					<input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
-					<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-				</ValidationProvider>
-			</div>
+            <ValidationProvider tag="div" mode="passive" name="email" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('page_registration.label_email')" :error="errors[0]">
+                    <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                </AppInputText>
+            </ValidationProvider>
 
 			<!--Name-->
-			<div class="block-wrapper">
-				<label>{{ $t('page_registration.label_name') }}:</label>
-				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="user name" rules="required" v-slot="{ errors }">
-					<input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
-					<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-				</ValidationProvider>
-			</div>
+            <ValidationProvider tag="div" mode="passive" name="user name" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('page_registration.label_name')" :error="errors[0]">
+                    <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                </AppInputText>
+            </ValidationProvider>
 
 			<!--Password-->
-			<div class="wrapper-inline">
-				<div class="block-wrapper">
-					<label>{{ $t('page_registration.label_pass') }}:</label>
-					<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password" rules="required" v-slot="{ errors }">
-						<input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
-						<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-					</ValidationProvider>
-				</div>
-
-				<div class="block-wrapper">
-					<label>{{ $t('page_registration.label_confirm_pass') }}:</label>
-					<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password confirm" rules="required" v-slot="{ errors }">
-						<input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
-						<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-					</ValidationProvider>
-				</div>
-			</div>
-		</div>
-
-		<div class="card shadow-card">
-			<FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
+            <div class="flex space-x-4">
+                <ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
+                    <AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]">
+                        <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                    </AppInputText>
+                </ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="password confirm" rules="required" v-slot="{ errors }" class="w-full">
+                    <AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]">
+                        <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                    </AppInputText>
+                </ValidationProvider>
+            </div>
+        </div>
+        <div class="card shadow-card">
+            <FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
 
 			<!--User Role-->
-			<div class="block-wrapper">
-				<label>{{ $t('admin_page_user.select_role') }}:</label>
-				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="permission" rules="required" v-slot="{ errors }">
-					<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
-					<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-				</ValidationProvider>
-			</div>
+            <ValidationProvider tag="div" mode="passive" name="permission" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]">
+                    <SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
+                </AppInputText>
+            </ValidationProvider>
 
 			<!--Storage Capacity-->
-			<div class="block-wrapper">
-				<label>{{ $t('admin_page_user.label_change_capacity') }}</label>
-				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="storage capacity" rules="required" v-slot="{ errors }">
-					<input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
-					<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-				</ValidationProvider>
-			</div>
-		</div>
-
-		<div class="form-group">
-			<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
-				{{ $t('admin_page_user.create_user.submit') }}
-			</ButtonBase>
-		</div>
-	</ValidationObserver>
+            <ValidationProvider tag="div" mode="passive" name="storage capacity" rules="required" v-slot="{ errors }">
+                <AppInputText :title="$t('admin_page_user.label_change_capacity')" :error="errors[0]">
+                    <input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                </AppInputText>
+            </ValidationProvider>
+        </div>
+        <div class="form-group">
+            <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
+                {{ $t('admin_page_user.create_user.submit') }}
+            </ButtonBase>
+        </div>
+    </ValidationObserver>
 </template>
 
 <script>
+	import AppInputText from "../../../components/Admin/AppInputText";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
     import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
@@ -97,6 +81,7 @@
     export default {
         name: 'Profile',
         components: {
+			AppInputText,
             ValidationProvider,
             ValidationObserver,
             SectionTitle,
@@ -215,9 +200,3 @@
         },
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-</style>