diff --git a/package-lock.json b/package-lock.json
index fe708a5..ed7343a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2582,6 +2582,11 @@
       "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==",
       "dev": true
     },
+    "bash": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/bash/-/bash-0.0.1.tgz",
+      "integrity": "sha1-nuDnp1K8Xu8Wi8SHGVVqdFSKrgw="
+    },
     "batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -14633,6 +14638,11 @@
         "tiny-cookie": "^1.0"
       }
     },
+    "vue-cookies": {
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.5.13.tgz",
+      "integrity": "sha512-8pjpXnvbNWx1Lft0t3MJnW+ylv0Wa2Tb6Ch617u/pQah3+SfXUZZdkh3EL3bSpe/Sw2Wdw3+DhycgQsKANSxXg=="
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
diff --git a/package.json b/package.json
index e73e80d..1d18cba 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.7",
     "axios": "^0.19.0",
+    "bash": "0.0.1",
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.0.2",
     "core-js": "^2.6.5",
@@ -21,6 +22,7 @@
     "sass-loader": "^8.0.0",
     "vue": "^2.6.10",
     "vue-cookie": "^1.1.4",
+    "vue-cookies": "^1.5.13",
     "vue-router": "^3.1.3",
     "vue-toasted": "^1.1.27",
     "vuex": "^3.1.1"
diff --git a/src/components/input/TextField.vue b/src/components/input/TextField.vue
index de3b6ac..a7d23dc 100644
--- a/src/components/input/TextField.vue
+++ b/src/components/input/TextField.vue
@@ -1,7 +1,7 @@
 <template>
-	<div id="textfield" class="container">
+	<div id="textfield" class="textfield-container">
 		<div class="row ml-1 mr-1 centralize-div">
-			<div v-if="label" class="text-left col-12 p-0 text-color-default">{{ label }}</div>
+			<div v-if="label" class="col-12 p-0 text-color-default textfield-label">{{ label }}</div>
 			<input v-model="variableLocal" v-if="!texticon" :type="getFieldType()" class="text-input col-12" :placeholder="placeholder">
 			<div v-else class="w-100 col p-0">
 				<font-awesome-icon :icon="texticon" style="color:white"/>
@@ -64,12 +64,25 @@ export default {
 <style lang="scss" scoped>
 	@import "../../assets/stylesheets/colors.scss";
 
+	.textfield-label {
+		text-align: left;
+		font-size: 90%;
+	}
+
+	.textfield-container {
+		width: 100%;
+		padding-right: 20px;
+		padding-left: 20px;
+		margin-right: auto;
+		margin-left: auto;
+	}
+
 	.text-input {
 		background-color: rgba(7, 37, 37,0 );
 		border-top: 0;
 		border-left: 0;
 		border-right: 0;
-		border-bottom: 1; 
+		border-bottom: 1px solid; 
 		border-bottom-color: '#bbbbbb';
 		width: 80%;
 		padding: 1%;
diff --git a/src/main.js b/src/main.js
index b5405fd..41fde64 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,7 +17,7 @@ import '../node_modules/bootstrap/dist/css/bootstrap.css'
 import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css'
 Vue.use(BoostrapVue)
 
-/* Font awesome onfiguration */
+/* Font awesome configuration */
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
diff --git a/src/store.js b/src/store.js
index d64b7af..6a6b9f5 100644
--- a/src/store.js
+++ b/src/store.js
@@ -25,7 +25,7 @@ export default new Vuex.Store({
   state: {
     accessToken: null,
     refreshToken: null,
-	},
+  },
 	mutations: {
     authUser(state, userData) {
       state.accessToken = userData.accessToken
@@ -39,7 +39,7 @@ export default new Vuex.Store({
       Vue.cookie.delete('access-token');
       Vue.cookie.delete('refresh-token');
     }
-	},
-	actions: {
+  },
+  actions: {
   }
 })
diff --git a/src/views/Signup.vue b/src/views/Signup.vue
index b7e2e89..75adbbe 100644
--- a/src/views/Signup.vue
+++ b/src/views/Signup.vue
@@ -1,5 +1,171 @@
 <template>
-  <div class="signup">
-    <h1>This is an sign up page</h1>
+  <div class="signup gradient">
+    <TopBar :iconleft="'chevron-left'"></TopBar>
+    <div class="content-container">
+      <div class="content-title">
+        <a style="font-size: 40px"> Criar conta </a>
+      </div>
+      <div class="content-form">
+        <TextField class="mt-3" v-model="username" :label="'Nome'"></TextField>
+        <TextField class="mt-3" v-model="email" :label="'Email'"></TextField>
+        <TextField class="mt-3" v-model="password" :label="'Senha'" :password="true"></TextField>
+        <TextField class="mt-3" v-model="confirm_password" :label="'Confirme a senha'" :password="true"></TextField>
+      </div>
+      <div class="content-button">
+        <SignButton class="mt-4" :label="'Criar conta'" @action="signup"/>
+      </div>
+    </div>
+
   </div>
 </template>
+
+<script>
+  import TopBar from '../components/layout/TopBar'
+  import TextField from '../components/input/TextField'
+  import SignButton from '../components/input/SignButton'
+  import axios from "axios"
+  import router from "../router"
+
+  export default {
+    components: {
+      TopBar,
+      TextField,
+      SignButton,
+    },
+    data() {
+      return {
+        username: '',
+        email: '',
+        password: '',
+        confirm_password: '',
+      }
+    },
+    methods: {
+      signup(){
+        if (!this.validateInput()) {
+          return
+        }       
+        
+        let data = {
+          email: this.email,
+          username: this.username,
+          password: this.password,
+          confirm_password: this.confirm_password
+        }
+
+        let dataToken = {
+          email: this.email,
+          password: this.password,
+        }
+
+        const url = 'http://0.0.0.0:8080/users/signup/'
+        axios.post(url, data)
+          .then((response) => {
+            axios.post("http://0.0.0.0:8080/users/token/", dataToken)
+              .then((response) => {
+                if (response.status == '200') {
+                  this.$toasted.show('Created!').goAway(2000)
+                  let tokenData = {
+                    accessToken: response.data['access'],
+                    refreshToken: response.data['refresh']
+                  }
+                  this.$store.commit('authUser', tokenData);
+                  router.push({name: 'home'})
+                } else {
+                  this.$toasted.show('Algum erro ocorreu, tente de novo').goAway(2000)
+                }
+              })
+              .catch ((errors) => {
+                console.log(errors.response)
+                router.push({name: 'signin'})
+              })
+          })
+          .catch((error) => {
+            if(error.response.data.email){
+              this.$toasted.show(error.response.data.email).goAway(2000)
+            }
+              if(error.response.data.username){
+                this.$toasted.show(error.response.data.username).goAway(2000)
+            }
+            if(error.response.data.password){
+              this.$toasted.show(error.response.data.password).goAway(2000)
+            }
+            
+          })
+      },
+      validateInput(){
+        if (!this.username) {
+          this.$toasted.show('Insira seu nome').goAway(2000)
+          return false
+        }
+
+        if (!this.email) {
+          this.$toasted.show('Insira um email').goAway(2000)
+          return false
+        }
+
+        if (!this.password) {
+          this.$toasted.show('Insira uma senha').goAway(2000)
+          return false
+        }
+
+        if (this.password.length < 8) {
+          this.$toasted.show('Insira uma senha maior que 8 caracteres').goAway(2000)
+          return false
+        }
+        
+        if (this.confirm_password != this.password) {
+          this.$toasted.show('As senhas devem corresponder').goAway(2000)
+          return false
+        }
+
+        let emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/igm
+        if (!this.email.match(emailRegex)) {
+          this.$toasted.show('Email digitado não é válido').goAway(2000)
+          return false
+        }
+
+        return true
+      }
+    }
+  }
+
+</script>
+
+<style lang="scss" scoped>
+  @import "../assets/stylesheets/colors.scss";
+
+  .content-button {
+    margin-top: 90px;
+  }
+
+  .content-title {
+    width: 100%;
+    padding: 0px 25px;
+    margin-bottom: 20%;
+    color: $color-default-text;
+    display: flex;
+    justify-content: left; 
+  }
+  
+  .content-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+  .signup {
+    width: 100%;
+		height: 100%;
+		position: absolute;
+		margin-top: 0;
+		text-align: center;
+  }
+
+  .gradient {
+    background-image: linear-gradient(180deg, rgba(86, 163, 166, 1), rgba(75s, 125, 170, 105));
+  }
+</style>
\ No newline at end of file