diff --git a/src/App.vue b/src/App.vue
index ec1e73b..50db134 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,81 +1,301 @@
 <script setup>
 import { ref, reactive } from 'vue'
-import name from './components/cadastro_usuario/name.vue'
-import email from './components/cadastro_usuario/email.vue'
-import languages from './components/cadastro_usuario/languages.vue'
-import adress from './components/cadastro_usuario/adress.vue';
-import age from './components/cadastro_usuario/age.vue'
-import bio from './components/cadastro_usuario/bio.vue'
-import city from './components/cadastro_usuario/city.vue'
-import hobbies from './components/cadastro_usuario/hobbies.vue'
-import password from './components/cadastro_usuario/password.vue'
-
-const i = ref(0)
-const show = ref(false)
+
+const estados = [
+  { sigla: 'AC', name: 'Acre' },
+  { sigla: 'AL', name: 'Alagoas' },
+  { sigla: 'AP', name: 'Amapá' },
+  { sigla: 'AM', name: 'Amazonas' },
+  { sigla: 'BA', name: 'Bahia' },
+  { sigla: 'CE', name: 'Ceará' },
+  { sigla: 'DF', name: 'Distrito Federal' },
+  { sigla: 'ES', name: 'Espírito Santo' },
+  { sigla: 'GO', name: 'Goiás' },
+  { sigla: 'MA', name: 'Maranhão' },
+  { sigla: 'MT', name: 'Mato Grosso' },
+  { sigla: 'MS', name: 'Mato Grosso do Sul' },
+  { sigla: 'MG', name: 'Minas Gerais' },
+  { sigla: 'PA', name: 'Pará' },
+  { sigla: 'PB', name: 'Paraíba' },
+  { sigla: 'PR', name: 'Paraná' },
+  { sigla: 'PE', name: 'Pernambuco' },
+  { sigla: 'PI', name: 'Piauí' },
+  { sigla: 'RJ', name: 'Rio de Janeiro' },
+  { sigla: 'RN', name: 'Rio Grande do Norte' },
+  { sigla: 'RS', name: 'Rio Grande do Sul' },
+  { sigla: 'RO', name: 'Rondônia' },
+  { sigla: 'RR', name: 'Roraima' },
+  { sigla: 'SC', name: 'Santa Catarina' },
+  { sigla: 'SP', name: 'São Paulo' },
+  { sigla: 'SE', name: 'Sergipe' },
+  { sigla: 'TO', name: 'Tocantins' }
+]
+
+const hobbies = reactive([
+  { id: 1, hobbie: 'Esporte' },
+  { id: 2, hobbie: 'Leitura' },
+  { id: 3, hobbie: 'Surf' },
+  { id: 4, hobbie: 'Viajar' }
+])
+
+const linguagens = reactive([
+  { id: 1, tipo: 'Java' },
+  { id: 2, tipo: 'C++' },
+  { id: 3, tipo: 'Python' },
+  { id: 4, tipo: 'Php' }
+])
+
 const pessoa = reactive({
-  nome: String,
-  idade: Number,
-  email: String,
-  senha: String,
-  cidade: String,
-  endereco: String,
-  hobbies: String,
-  linguagens: String,
-  biografia: String
+  Nome: '',
+  Idade: 18,
+  Email: '',
+  Senha: '',
+  Estado: '',
+  Cidade: '',
+  Endereco: '',
+  Hobbies: [],
+  Linguagens: [],
+  Biografia: ''
 })
 
-function enviarDados() {
-  i.value++
-  console.log(pessoa.nome)
-  mostrarMsg()
-}
-
-function mostrarMsg() {
-  show.value = true
-  setTimeout(() => {
-    show.value = false
-  }, 1000)
-}
+const show = ref(false)
+const senhaVerificada = ref('')
 
-const nomear = (nome) => {
-  pessoa.nome = nome
-  debugger
+function EnviarDados() {
+  if (senhaVerificada.value == pessoa.senha) {
+    show.value = true
+  } else {
+    alert('As senhas não correspodem corretamente!')
+    document.getElementById('senhaConfirma').focus()
+  }
 }
 </script>
 
 <template>
-  <div class="form">
-    <h1>Formulário</h1>
-    <form @submit.prevent="enviarDados">
-      <name @EnviarNome="nomear" />
-      <email />
-      <password />
-      <age />
-      <city />
-      <adress />
-      <hobbies />
-      <languages />
-      <bio />
-      <div>
-        <input type="submit" value="enviar dados" />
+  <div>
+    <h1>Formulário de Edição</h1>
+    <div id="usuario" v-if="show">
+      <p v-for="(dado, key) of pessoa" :key="key">{{ key }}: {{ dado }}</p>
+      <button @click="show = false" class="submit">voltar</button>
+    </div>
+    <form v-else @submit.prevent="EnviarDados">
+      <div class="input-container">
+        <div class="input-title">
+          <label for="nome">Digite seu nome:</label>
+        </div>
+        <div>
+          <input
+            type="text"
+            v-model="pessoa.nome"
+            minlength="3"
+            maxlength="20"
+            autocomplete="on"
+            required
+          />
+        </div>
+      </div>
+
+      <div class="input-container">
+        <div class="input-title">
+          <label for="email">Digite seu email:</label>
+        </div>
+        <input type="email" v-model="pessoa.email" maxlength="50" autocomplete="on" required />
+      </div>
+      <div class="input-container">
+        <div class="input-title">
+          <label for="senha">Digita a sua senha:</label>
+        </div>
+        <input type="password" v-model="pessoa.senha" minlength="8" required />
+      </div>
+      <div class="input-container">
+        <div class="input-title">
+          <label for="senhaConfirma">Confirme a sua senha:</label>
+        </div>
+        <input
+          type="password"
+          id="senhaConfirma"
+          v-model="senhaVerificada"
+          minlength="8"
+          required
+        />
+      </div>
+      <div class="input-container">
+        <div class="input-title">
+          <label for="idade">Digite a sua idade:</label>
+        </div>
+        <input type="number" v-model="pessoa.idade" min="18" max="60" required />
+      </div>
+      <div class="input-container">
+        <div class="input-title">
+          <label for="hobbies">Informe o seu estado:</label>
+        </div>
+        <select v-model="pessoa.estado">
+          <option v-for="estado in estados" :key="estado.sigla" :value="estado.sigla">
+            {{ estado.name }}
+          </option>
+        </select>
+      </div>
+      <div class="input-container">
+        <div class="input-title">
+          <label for="cidade">Informe a sua cidade:</label>
+        </div>
+        <input type="text" v-model="pessoa.cidade" />
+      </div>
+      <div class="input-container">
+        <div class="input-title">
+          <label for="cidade">Informe o seu endereço:</label>
+        </div>
+        <input type="text" v-model="pessoa.endereco" />
+      </div>
+      <div class="check-container">
+        <div class="input-title">
+          <label for="hobbies">Informe quais são os seus hobbies:</label>
+        </div>
+        <div class="opcao-checkbox" v-for="passatempo in hobbies" :key="passatempo.id">
+          <input
+            type="checkbox"
+            name="hobbies"
+            :value="passatempo.hobbie"
+            v-model="pessoa.hobbies"
+          />
+          <span>{{ passatempo.hobbie }}</span>
+        </div>
+      </div>
+      <div class="check-container">
+        <div class="input-title">
+          <label for="linguagens">Informe quais são as linguagens que você domina:</label>
+        </div>
+        <div class="opcao-checkbox" v-for="linguagem in linguagens" :key="linguagem.id">
+          <input
+            type="checkbox"
+            name="hobbies"
+            :value="linguagem.tipo"
+            v-model="pessoa.linguagens"
+          />
+          <span>{{ linguagem.tipo }}</span>
+        </div>
+      </div>
+      <div class="bio-container">
+        <div class="input-title">
+          <label for="email">Faça uma breve autobiografia:</label>
+        </div>
+        <textarea v-model="pessoa.biografia"></textarea>
+      </div>
+
+      <div class="submit-container">
+        <input type="submit" value="Enviar dados" class="submit" />
       </div>
     </form>
   </div>
-  <div class="msg" v-if="show">
-    <h1>usuário cadastrado</h1>
-  </div>
 </template>
 
 <style scoped>
-.msg {
-  background-color: rgba(93, 157, 199, 0.767);
-  border-radius: 20px;
-  border: 2px solid rgb(58, 135, 170);
-  width: 100%;
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+* {
+  margin: 0%;
+  padding: 0%;
+  font-family: 'Roboto', sans-serif;
 }
 
 p,
 h1 {
   margin: 2%;
 }
+
+h1 {
+  text-align: center;
+}
+
+form {
+  flex-wrap: wrap;
+  display: flex;
+  margin-left: 4%;
+}
+
+input,
+select {
+  border-radius: 7px;
+  border: 1px solid rgb(46, 44, 44);
+  width: 80%;
+  height: 4vh;
+  font-size: 13px;
+}
+
+.input-title {
+  margin: 7px;
+  border-left: 3px solid #3ebc32;
+  width: 100%;
+}
+
+.input-container {
+  width: 25%;
+  height: 20vh;
+}
+
+.check-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 50%;
+}
+
+.opcao-checkbox {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  width: 40%;
+  margin-bottom: 10px;
+}
+
+.opcao-checkbox span,
+.opcao-checkbox input {
+  width: auto;
+}
+
+.opcao-checkbox span {
+  margin-top: 4px;
+  margin-left: 6px;
+  font-weight: bold;
+}
+
+label {
+  font-size: 16px;
+  margin-left: 5px;
+}
+
+#usuario {
+  text-align: center;
+}
+
+.bio-container {
+  width: 60%;
+  height: 20vh;
+}
+
+.submit-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40%;
+}
+
+.submit {
+  width: 30%;
+  height: 7vh;
+  margin-top: 10vh;
+  background-color: #3ebc32;
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 17px;
+}
+
+.submit:hover {
+  background-color: #3ea534;
+}
+
+textarea {
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/src/assets/main.css b/src/assets/main.css
index 36fb845..e69de29 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
diff --git a/src/components/cadastro_usuario/adress.vue b/src/components/cadastro_usuario/adress.vue
deleted file mode 100644
index c128e71..0000000
--- a/src/components/cadastro_usuario/adress.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup></script>
-
-<template>
-  <div>
-    <label for="cidade">Informe a sua cidade:</label>
-  </div>
-  <input type="text" required />
-</template>
-
-<style scoped></style>
diff --git a/src/components/cadastro_usuario/age.vue b/src/components/cadastro_usuario/age.vue
deleted file mode 100644
index 03c67c2..0000000
--- a/src/components/cadastro_usuario/age.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup></script>
-
-<template>
-  <div>
-    <label for="idade">Digite a sua idade:</label>
-  </div>
-  <input type="number" min="18" max="60" required />
-</template>
-
-<style scoped></style>
diff --git a/src/components/cadastro_usuario/bio.vue b/src/components/cadastro_usuario/bio.vue
deleted file mode 100644
index b6d603c..0000000
--- a/src/components/cadastro_usuario/bio.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup></script>
-
-<template>
-  <div>
-    <label for="email">Faça uma breve autobiografia:</label>
-  </div>
-  <textarea required></textarea>
-</template>
-
-<style scoped></style>
diff --git a/src/components/cadastro_usuario/city.vue b/src/components/cadastro_usuario/city.vue
deleted file mode 100644
index c128e71..0000000
--- a/src/components/cadastro_usuario/city.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup></script>
-
-<template>
-  <div>
-    <label for="cidade">Informe a sua cidade:</label>
-  </div>
-  <input type="text" required />
-</template>
-
-<style scoped></style>
diff --git a/src/components/cadastro_usuario/email.vue b/src/components/cadastro_usuario/email.vue
deleted file mode 100644
index a64a074..0000000
--- a/src/components/cadastro_usuario/email.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup></script>
-
-<template>
-  <div>
-    <label for="email">Digite seu email:</label>
-  </div>
-  <input type="email" required />
-</template>
-
-<style scoped></style>
diff --git a/src/components/cadastro_usuario/hobbies.vue b/src/components/cadastro_usuario/hobbies.vue
deleted file mode 100644
index 4410cc0..0000000
--- a/src/components/cadastro_usuario/hobbies.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup></script>
-
-<template>
-  <div>
-    <label for="email">Informe quais são os seus hobbies:</label>
-  </div>
-  <textarea required></textarea>
-</template>
-
-<style scoped></style>
diff --git a/src/components/cadastro_usuario/languages.vue b/src/components/cadastro_usuario/languages.vue
deleted file mode 100644
index a7ddacf..0000000
--- a/src/components/cadastro_usuario/languages.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup></script>
-
-<template>
-  <div>
-    <label for="email">Informe as linguagens que você trabalha:</label>
-  </div>
-  <textarea required></textarea>
-</template>
-
-<style scoped></style>
diff --git a/src/components/cadastro_usuario/name.vue b/src/components/cadastro_usuario/name.vue
deleted file mode 100644
index 00df889..0000000
--- a/src/components/cadastro_usuario/name.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-const nome = ref('')
-
-defineEmits(['EnviarNome'])
-</script>
-
-<template>
-  <label for="nome">Digite seu nome:</label>
-  <div>
-    <input
-      type="text"
-      v-model="nome"
-      @submit="$emit('EnviarNome', nome)"
-      minlength="3"
-      maxlength="20"
-      autocomplete="on"
-      required
-    />
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/components/cadastro_usuario/password.vue b/src/components/cadastro_usuario/password.vue
deleted file mode 100644
index db7d811..0000000
--- a/src/components/cadastro_usuario/password.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup></script>
-
-<template>
-  <div>
-    <label for="senha">Digita a sua senha:</label>
-  </div>
-  <input type="password" required />
-</template>
-
-<style scoped></style>