diff --git a/img/bg.jpg b/img/bg.jpg
new file mode 100644
index 0000000000..1ff740823c
Binary files /dev/null and b/img/bg.jpg differ
diff --git a/src/views/CreateUser.vue b/src/views/CreateUser.vue
old mode 100644
new mode 100755
index 3f53e5aede..edf5fe1481
--- a/src/views/CreateUser.vue
+++ b/src/views/CreateUser.vue
@@ -1,48 +1,76 @@
-<!--
-  - @copyright Copyright (c) 2021 Lyseon Tech <contato@lt.coop.br>
-  -
-  - @author Lyseon Tech <contato@lt.coop.br>
-  - @author Vinicios Gomes <viniciusgomesvaian@gmail.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
 <template>
-	<Content app-name="libresign">
+	<Content app-name="libresign" class="jumbotron">
 		<div id="container">
-			<form>
-				<Avatar id="avatar" :user="username.length ? username : 'User'" :size="sizeAvatar" />
-				<input v-model="username"
-					type="text"
-					required
-					placeholder="Nome">
-				<input type="password" required placeholder="Senha">
-
-				<div v-tooltip.right="{
-					content: 'Senha para confirmar assinatura no documento!',
-					show: true,
-					trigger: 'hover focus'
-
-				}">
-					<input type="password" required placeholder="Senha PFX">
-				</div>
-				<button @click="teste">
-					Cadastrar
-				</button>
-			</form>
+			<div class="bg">
+				<form>
+					<Avatar id="avatar" :user="username.length ? username : 'User'" :size="sizeAvatar" />
+					<div class="group">
+						<input
+							v-model="username"
+							v-tooltip.right="{
+								content: 'Insira seu nome ',
+								show: tooltip.name,
+								trigger: 'false',
+							}"
+							type="text"
+							:required="validator.name"
+							placeholder="Nome"
+							@focus="tooltip.nameFocus = true; tooltip.name = false"
+							@blur="tooltip.nameFocus = false; validationName()">
+						<div v-show="validator.name"
+							class="icon-error-white" />
+					</div>
+					<div class="group">
+						<input
+							v-model="pass"
+							v-tooltip.right="{
+								content: 'A senha deve ter no mínimo 8 caracteres',
+								show: tooltip.pass,
+								trigger: 'false'
+							}"
+							type="password"
+							:required="validator.pass"
+							placeholder="Senha"
+							@focus="tooltip.passFocus = true; tooltip.pass = false"
+							@blur="tooltip.passFocus = false; validationPass()">
+						<div v-show="validator.pass"
+							class="icon-error-white" />
+					</div>
+					<div class="group">
+						<input
+							v-model="passConfirm"
+							v-tooltip.right="{
+								content: 'Senhas não coincidem',
+								show: tooltip.passConfirm,
+								trigger: 'false'
+							}"
+							type="password"
+							:required="validator.passConfirm"
+							placeholder="Confirmar senha"
+							@focus="tooltip.passConfirmFocus = true; tooltip.passConfirm = false"
+							@blur="tooltip.passConfirmFocus = false; validationPasswords()">
+						<div v-show="validator.passConfirm"
+							class="icon-error-white" />
+					</div>
+
+					<div
+						v-tooltip.right="{
+							content: 'Senha para confirmar assinatura no documento!',
+							show: false,
+							trigger: 'hover focus'
+						}"
+						class="group">
+						<input
+							v-model="pfx"
+							:required="validator.pfx"
+							placeholder="Senha PFX">
+						<div v-show="validator.pfx" class="icon-error-white" />
+					</div>
+					<button class="btn" :disabled="!validator.btn">
+						Cadastrar
+					</button>
+				</form>
+			</div>
 		</div>
 	</Content>
 </template>
@@ -50,7 +78,6 @@
 <script>
 import Content from '@nextcloud/vue/dist/Components/Content'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import { showSuccess } from '@nextcloud/dialogs'
 export default {
 	name: 'CreateUser',
 	components: {
@@ -61,10 +88,48 @@ export default {
 	data() {
 		return {
 			username: '',
+			pass: '',
+			passConfirm: '',
+			pfx: '',
 			sizeAvatar: 100,
+			validator: {
+				name: false,
+				pass: false,
+				passConfirm: false,
+				pfx: false,
+				btn: false,
+			},
+			tooltip: {
+				name: false,
+				nameFocus: false,
+				pass: false,
+				passFocus: false,
+				passConfirm: false,
+				passConfirmFocus: false,
+
+			},
 		}
 	},
-
+	watch: {
+		username() {
+			this.validationName()
+			this.validationBtn()
+		},
+		pass() {
+			this.validationPass()
+			this.validationPasswords()
+			this.validationBtn()
+		},
+		passConfirm() {
+			this.validationPassConfirm()
+			this.validationPasswords()
+			this.validationBtn()
+		},
+		pfx() {
+			this.validationPfx()
+			this.validationBtn()
+		},
+	},
 	created() {
 		this.changeSizeAvatar()
 	},
@@ -73,8 +138,80 @@ export default {
 		changeSizeAvatar() {
 			screen.width >= 534 ? this.sizeAvatar = 150 : this.sizeAvatar = 100
 		},
-		teste() {
-			showSuccess('Teste')
+
+		validationName() {
+			if (this.username.length < 3) {
+				this.validator.name = true
+				if (this.tooltip.nameFocus === false) {
+					this.tooltip.name = true
+				} else {
+					this.tooltip.name = false
+					this.tooltip.name = false
+				}
+			} else {
+				this.validator.name = false
+				this.tooltip.name = false
+			}
+		},
+		validationPass() {
+			if (this.pass.length < 8) {
+				this.validator.pass = true
+				if (this.tooltip.passFocus === false) {
+					this.tooltip.pass = true
+				} else {
+					this.tooltip.pass = false
+				}
+			} else {
+				this.validator.pass = false
+				this.tooltip.pass = false
+			}
+			if (this.pass.length > 0 && this.passConfirm.length > 0 && this.pass !== this.passConfirm) {
+				this.validator.pass = true
+				this.validator.passConfirm = true
+			} else {
+				this.validator.pass = false
+				this.validator.passConfirm = false
+			}
+		},
+		validationPassConfirm() {
+			if (this.passConfirm.length < 8) {
+				this.validator.passConfirm = true
+			} else {
+				this.validator.passConfirm = false
+				this.validator.pass = false
+			}
+		},
+		validationPfx() {
+			if (this.pfx.length < 3) {
+				this.validator.pfx = true
+			} else {
+				this.validator.pfx = false
+			}
+		},
+		validationPasswords() {
+			if (this.pass !== this.passConfirm) {
+				this.validator.pass = true
+				this.validator.passConfirm = true
+				if (this.tooltip.passConfirmFocus === false && this.tooltip.passFocus === false) {
+					this.tooltip.passConfirm = true
+				} else {
+					this.tooltip.passConfirm = false
+				}
+			} else {
+				this.validator.pass = false
+				this.validator.passConfirm = false
+			}
+		},
+		validationBtn() {
+			if (this.validator.name === false && this.validator.passConfirm === false && this.validator.pfx === false) {
+				if (this.username.length > 2 && this.passConfirm.length > 2 && this.pfx.length > 2) {
+					this.validator.btn = true
+				} else {
+					this.validator.btn = false
+				}
+			} else {
+				this.validator.btn = false
+			}
 		},
 	},
 }
@@ -89,12 +226,21 @@ export default {
 	width: 100%;
 }
 
+#avatar{
+	margin-bottom: 20px;
+}
+
+#password{
+	margin-right: 3px;
+}
+
 form{
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	width: 40%
+	width: 80%;
+	margin: 10px 0px 10px 0px;
 }
 
 form > div{
@@ -102,18 +248,15 @@ form > div{
 }
 
 input {
+	min-width: 317px;
 	width: 100%
 }
-@media screen and (max-width: 535px) {
-	form {width: 90%}
-}
 
 #tooltip{
 	position: relative;
 
 	span{
 		width: 160px;
-		background: #fefefe;
 		padding: 8px;
 		border-radius: 4px;
 		font-size: 14px;
@@ -127,4 +270,70 @@ input {
 		left: 50%;
 	}
 }
+
+.group{
+	display: flex;
+}
+
+.btn{
+	margin-top: 10px;
+	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+}
+
+.bg{
+	display: flex;
+	justify-content: center;
+	background-image: linear-gradient(40deg, #0082c9 0%, #1cafff 100%);
+	width: 400px;
+	border-radius: 5px;
+	box-shadow: rgba(0, 130, 201, 0.4) 5px 5px, rgba(0, 130, 201, 0.3) 10px 10px, rgba(0, 130, 201, 0.2) 15px 15px, rgba(0, 130, 201, 0.1) 20px 20px, rgba(0, 130, 201, 0.05) 25px 25px;
+
+	transition: all;
+	transition-duration: 1s;
+}
+
+.jumbotron{
+	background-image: url('../../img/bg.jpg');
+	background-size: cover;
+
+	transition: background-position-x;
+	transition-duration: 2s;
+}
+
+@media screen and (max-width: 750px) {
+	.jumbotron{
+		background-position-x: 50%
+	}
+}
+
+@media screen and (max-width: 535px) {
+	// form {width: 90%}
+	.bg{
+		transition: all;
+		transition-duration: 1s;
+		width: 99%;
+	}
+	input {
+		max-width: 90%
+	}
+}
+
+@media screen and (max-width: 380px) {
+	.bg{
+		transition: all;
+		transition-duration: 2s;
+		background-image: none;
+		background-color: #0082c9;
+		border-radius: 0;
+		width: 100%;
+		box-shadow: none;
+	}
+	.jumbotron{
+		background-image:none;
+		background-color:#0082c9;
+	}
+	input{
+		max-width: 317px;
+	}
+}
 </style>