diff --git a/src/pages/signup.rs b/src/pages/signup.rs
index 0ac67ae..6bc06da 100644
--- a/src/pages/signup.rs
+++ b/src/pages/signup.rs
@@ -1,5 +1,7 @@
 use leptos::leptos_dom::*;
 use leptos::*;
+use leptos_icons::IoIcon::*;
+use leptos_icons::*;
 
 #[component]
 pub fn Signup() -> impl IntoView {
@@ -7,10 +9,51 @@ pub fn Signup() -> impl IntoView {
     let (email, set_email) = create_signal("".to_string());
     let (password, set_password) = create_signal("".to_string());
 
+
     view!{
         <div class="page-container">
             <div class="signup-container">
-                
+                <a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a>
+                <div class="header">
+                    <h1>LibreTunes</h1>
+                </div>
+                <form class="signup-form" action="POST">
+                    <div class="input-box">
+                        <input class="signup-email" type="text" required
+                        on:input = move |ev| {
+                            set_email(event_target_value(&ev));
+                            log!("email changed to: {}", email.get());
+                        }
+                        prop:value=email
+                        />
+                        <span>Email</span>
+                        <i></i>
+                    </div>
+                    <div class="input-box">
+                        <input class="signup-username" type="text" required
+                        on:input = move |ev| {
+                            set_username(event_target_value(&ev));
+                            log!("username changed to: {}", username.get());
+                        }
+                        />
+                        <span>Username</span>
+                        <i></i>
+                    </div>
+                    <div class="input-box">
+                        <input class="signup-password" type="text" required
+                        on:input = move |ev| {
+                            set_password(event_target_value(&ev));
+                            log!("password changed to: {}", password.get());
+                        }
+                        />
+                        <span>Password</span>
+                        <i></i>
+                    </div>
+                    <input type="submit" value="Sign Up" />
+                    <span class="go-to-login">
+                        Already Have an Account? <a href="/login">Go to Login</a>
+                    </span>
+                </form>
             </div>
         </div>
     }
diff --git a/style/signup.scss b/style/signup.scss
index 6221d7b..cd45ab6 100644
--- a/style/signup.scss
+++ b/style/signup.scss
@@ -1 +1,129 @@
-@import 'theme.scss';
\ No newline at end of file
+@import 'theme.scss';
+
+.signup-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 27rem;
+    height: 35rem;
+    transform: translate(-50%, -50%);
+    background: purple;
+    z-index: 1;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .signup-container .header h1 {
+    margin-top: 3rem;
+    font-size: 2.5rem;
+    color: #2c1308;
+  }
+  .signup-container .signup-form {
+    width: 80%;
+  }
+  .signup-form .input-box {
+    position: relative;
+    margin-top: 3rem;
+  }
+  .signup-form .input-box:first-child {
+    margin-top: 1rem;
+  }
+  .signup-form .input-box input {
+    position: relative;
+    width: 100%;
+    max-width: 34vw;
+    padding: 17px 0px 10px;
+    background: transparent;
+    outline: none;
+    border: none;
+    box-shadow: none;
+    color: #23242a;
+    font-size: 1.1em;
+    font-family: "Roboto", sans-serif;
+    font-weight: 400;
+    letter-spacing: 0px;
+    text-indent: 10px;
+    vertical-align: middle;
+    z-index: 10;
+    color: #fff;
+  }
+  .signup-form .input-box span {
+    position: absolute;
+    left: 0;
+    padding: 15px 0px 10px;
+    pointer-events: none;
+    color: #907163;
+    font-size: 1.19em;
+    letter-spacing: 0.5px;
+    transition: 0.5s;
+  }
+  .signup-form .input-box input:valid ~ span,
+  .signup-form .input-box input:focus ~ span {
+    color: #2c1308;
+    font-size: 1rem;
+    transform: translateY(-30px);
+    font-weight: 400;
+  }
+  .signup-form .input-box i {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background: #907163;
+    border-radius: 4px;
+    overflow: hidden;
+    transition: 0.5s;
+    pointer-events: none;
+  }
+  
+  .signup-form .input-box input:valid ~ i,
+  .signup-form .input-box input:focus ~ i {
+    height: 2.6rem;
+  }
+
+  .signup-form input[type="submit"] {
+    margin-top: 3.5rem;
+    width: 100%;
+    height: 45px;
+    border: none;
+    border-radius: 8px;
+    color: rgb(210, 207, 207);
+    cursor: pointer;
+    font-size: 1.1rem;
+    font-weight: 600;
+    background-color: #582b17;
+  }
+  .signup-form .go-to-login {
+    color: #8f8f8f;
+    font-size: 0.9rem;
+  }
+  .signup-form .go-to-login span {
+    cursor: pointer;
+    color: #8f8f8f;
+    text-decoration: underline;
+  }
+  .signup-form .go-to-login span:hover {
+    color: #fff;
+    transition: all 0.2s;
+  }
+  .signup-container .return {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    font-size: 1.8rem;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: .3rem;
+  }
+  .signup-container .return:hover {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+  
\ No newline at end of file