diff --git a/frontend/css/login.css b/frontend/css/login.css
index 115ec83..c478b1d 100644
--- a/frontend/css/login.css
+++ b/frontend/css/login.css
@@ -10,7 +10,7 @@
 }
 
 html {
-  --surface: #121212;
+  --surface: linear-gradient(#141e30, #243b55);
   --elevation00dp: #FFFFFF00;
   --elevation01dp: #FFFFFF0D;
   --elevation02dp: #FFFFFF12;
@@ -27,12 +27,13 @@ html {
   --text-high-emphasis: #FFFFFFDE;
   --text-medium-emphasis: #FFFFFF99;
   --text-disabled: #FFFFFF61;
-
+  
+  height: 100%;
   font-size: 1em;
 }
 
 body {
-  background-color: var(--surface);
+  background: var(--surface);
   color: var(--text-high-emphasis);
 }
 
diff --git a/frontend/css/signup.css b/frontend/css/signup.css
new file mode 100644
index 0000000..4862e22
--- /dev/null
+++ b/frontend/css/signup.css
@@ -0,0 +1,179 @@
+@font-face {
+    font-family: barlow;
+    src: url(../barlow/Barlow-Regular.ttf);
+  }
+  
+@font-face {
+font-family: barlow;
+src: url(../barlow/Barlow-Bold.ttf);
+font-weight: bold;
+}
+
+html {
+    height: 100%;
+  }
+  body {
+    margin:0;
+    padding:0;
+    font-family: barlow;
+    background: linear-gradient(#141e30, #243b55);
+  }
+  
+  .login-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 400px;
+    padding: 40px;
+    transform: translate(-50%, -50%);
+    background: rgba(0,0,0,.5);
+    box-sizing: border-box;
+    box-shadow: 0 15px 25px rgba(0,0,0,.6);
+    border-radius: 10px;
+  }
+  
+  .login-box h2 {
+    margin: 0 0 30px;
+    padding: 0;
+    color: #fff;
+    text-align: center;
+  }
+  
+  .login-box .user-box {
+    position: relative;
+  }
+  
+  .login-box .user-box input {
+    width: 100%;
+    padding: 10px 0;
+    font-size: 16px;
+    color: #fff;
+    margin-bottom: 30px;
+    border: none;
+    border-bottom: 1px solid #fff;
+    outline: none;
+    background: transparent;
+  }
+  .login-box .user-box label {
+    position: absolute;
+    top:0;
+    left: 0;
+    padding: 10px 0;
+    font-size: 16px;
+    color: #fff;
+    pointer-events: none;
+    transition: .5s;
+  }
+  
+  .login-box .user-box input:focus ~ label,
+  .login-box .user-box input:valid ~ label {
+    top: -20px;
+    left: 0;
+    color: #03e9f4;
+    font-size: 12px;
+  }
+  
+  .login-box form a {
+    position: relative;
+    display: inline-block;
+    padding: 10px 20px;
+    color: #03e9f4;
+    font-size: 16px;
+    text-decoration: none;
+    text-transform: uppercase;
+    overflow: hidden;
+    transition: .5s;
+    margin-top: 40px;
+    letter-spacing: 4px
+  }
+  
+  .login-box a:hover {
+    background: #03e9f4;
+    color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 5px #03e9f4,
+                0 0 25px #03e9f4,
+                0 0 50px #03e9f4,
+                0 0 100px #03e9f4;
+  }
+  
+  .login-box a span {
+    position: absolute;
+    display: block;
+  }
+  
+  .login-box a span:nth-child(1) {
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, #03e9f4);
+    animation: btn-anim1 1s linear infinite;
+  }
+  
+  @keyframes btn-anim1 {
+    0% {
+      left: -100%;
+    }
+    50%,100% {
+      left: 100%;
+    }
+  }
+  
+  .login-box a span:nth-child(2) {
+    top: -100%;
+    right: 0;
+    width: 2px;
+    height: 100%;
+    background: linear-gradient(180deg, transparent, #03e9f4);
+    animation: btn-anim2 1s linear infinite;
+    animation-delay: .25s
+  }
+  
+  @keyframes btn-anim2 {
+    0% {
+      top: -100%;
+    }
+    50%,100% {
+      top: 100%;
+    }
+  }
+  
+  .login-box a span:nth-child(3) {
+    bottom: 0;
+    right: -100%;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(270deg, transparent, #03e9f4);
+    animation: btn-anim3 1s linear infinite;
+    animation-delay: .5s
+  }
+  
+  @keyframes btn-anim3 {
+    0% {
+      right: -100%;
+    }
+    50%,100% {
+      right: 100%;
+    }
+  }
+  
+  .login-box a span:nth-child(4) {
+    bottom: -100%;
+    left: 0;
+    width: 2px;
+    height: 100%;
+    background: linear-gradient(360deg, transparent, #03e9f4);
+    animation: btn-anim4 1s linear infinite;
+    animation-delay: .75s
+  }
+  
+  @keyframes btn-anim4 {
+    0% {
+      bottom: -100%;
+    }
+    50%,100% {
+      bottom: 100%;
+    }
+  }
+  
\ No newline at end of file
diff --git a/frontend/signup.html b/frontend/signup.html
index a1155b6..c82ffd1 100644
--- a/frontend/signup.html
+++ b/frontend/signup.html
@@ -1,19 +1,39 @@
 <!DOCTYPE html>
 <html>
   <title>Signup</title>
+  <link rel="stylesheet" href="css/signup.css">
   <script src='js/keystrokeLogger.js'></script>
   <script src='js/signup.js'></script>
 <head>
 </head>
 
 <body>
-  <input id='usernameField' placeholder='Username'>
-  <br><br>
-  <input id='passwordField0' placeholder='Password (1/3)'>
-  <br>
-  <input id='passwordField1' placeholder='Password (2/3)'>
-  <br>
-  <input id='passwordField2' placeholder='Password (3/3)'>
+  <div class="login-box">
+    <h2>Sign up</h2>
+
+      <form>
+        <div class="user-box">
+          <input id="usernameField" type="text"  name="" required>
+          <label>Username</label>
+        </div>
+  
+        <div class="user-box">
+          <input id="passwordField0" type="password"  name="" required>
+          <label>Password (1/3)</label>
+        </div>
+  
+        <div class="user-box">
+          <input id="passwordField1" type="password" name="" required>
+          <label>Password (2/3)</label>
+        </div>
+  
+        <div class="user-box">
+          <input id="passwordField2" type="password" name="" required>
+          <label>Password (3/3)</label>
+        </div>
+      </form>
+    
+  </div>
 </body>
 
 </html>