diff --git a/src/app.rs b/src/app.rs
index ae1aa39..5955bb5 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -1,6 +1,8 @@
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
+use crate::pages::login::*;
+use crate::pages::signup::*;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -21,6 +23,8 @@ pub fn App() -> impl IntoView {
                 <Routes>
                     <Route path="" view=HomePage/>
                     <Route path="/*any" view=NotFound/>
+                    <Route path="/login" view=Login />
+                    <Route path="/signup" view=Signup />
                 </Routes>
             </main>
         </Router>
diff --git a/src/lib.rs b/src/lib.rs
index 28db59f..552bdcf 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -4,6 +4,7 @@ pub mod playstatus;
 pub mod playbar;
 pub mod database;
 pub mod models;
+pub mod pages;
 use cfg_if::cfg_if;
 
 cfg_if! {
diff --git a/src/pages.rs b/src/pages.rs
new file mode 100644
index 0000000..40f63fd
--- /dev/null
+++ b/src/pages.rs
@@ -0,0 +1,2 @@
+pub mod login;
+pub mod signup;
\ No newline at end of file
diff --git a/src/pages/login.rs b/src/pages/login.rs
new file mode 100644
index 0000000..1f5662e
--- /dev/null
+++ b/src/pages/login.rs
@@ -0,0 +1,48 @@
+use leptos::ev;
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+pub fn Login() -> impl IntoView {
+    let (username, set_username) = create_signal("".to_string());
+    let (password, set_password) = create_signal("".to_string());
+
+    view! {
+        <div class="page-container">
+            <div class="login-container">
+            <div class="header">
+                <h1>LibreTunes</h1>
+            </div>
+                <form class="login-form" action="POST">
+                    <div class="input-box">
+                        <input class="login-info" type="text" required
+                        on:input = move |ev| {
+                            set_username(event_target_value(&ev));
+                            log!("username changed to: {}", username.get());
+                        }
+                        prop:value=username
+                        />
+                        <span>Username/Email</span>
+                        <i></i>
+                    </div>
+                    <div class="input-box">
+                        <input class="login-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>
+                    <p class="forgot-pw">Forgot Password?</p>
+                    <input type="submit" value="Login" />
+                    <p class="go-to-signup">
+                        New here? <span>Create an Account</span>
+                    </p>
+                </form>
+            </div>
+        </div>
+    }
+}
diff --git a/src/pages/signup.rs b/src/pages/signup.rs
new file mode 100644
index 0000000..3f04544
--- /dev/null
+++ b/src/pages/signup.rs
@@ -0,0 +1,14 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+
+#[component]
+pub fn Signup() -> impl IntoView {
+    view!{
+        <div class="page-container">
+            <div class="signup-container">
+                <h1>"Signup"</h1>
+                
+            </div>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/style/login.scss b/style/login.scss
new file mode 100644
index 0000000..e01be7c
--- /dev/null
+++ b/style/login.scss
@@ -0,0 +1,136 @@
+@import 'theme.scss';
+
+.login-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 27rem;
+    height: 30rem;
+    transform: translate(-50%, -50%);
+    background: purple;
+    z-index: 1;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+.login-container .header h1 {
+  margin-top: 3rem;
+  font-size: 2.5rem;
+  color: #2c1308;
+}
+.login-container .login-form {
+  width: 75%;
+}
+.login-form .input-box:first-child {
+  margin-top: .5rem;
+}
+.login-form .input-box {
+  position: relative;
+  margin-top: 3rem;
+}
+.login-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;
+}
+.login-form .input-box span {
+  position: absolute;
+  left: 0;
+  padding: 15px 0px 10px;
+  pointer-events: none;
+  color: #907163;
+  font-size: 1.2em;
+  letter-spacing: 0.5px;
+  transition: 0.5s;
+}
+.login-form .input-box input:valid ~ span,
+.login-form .input-box input:focus ~ span {
+  color: #2c1308;
+  font-size: 1rem;
+  transform: translateY(-30px);
+  font-weight: 400;
+}
+.login-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;
+}
+
+.login-form .input-box input:valid ~ i,
+.login-form .input-box input:focus ~ i {
+  height: 2.6rem;
+}
+.login-form .forgot-pw {
+  display: inline-flex;
+  margin-top: 3px;
+  cursor: pointer;
+  color: #8f8f8f;
+  text-decoration: underline;
+}
+.login-form .forgot-pw:hover {
+  color: #fff;
+  transition: all 0.2s;
+}
+.login-form input[type="submit"] {
+  margin-top: 2.8rem;
+  width: 100%;
+  height: 3rem;
+  border: none;
+  border-radius: 8px;
+  color: rgb(210, 207, 207);
+  cursor: pointer;
+  font-size: 1.1rem;
+  font-weight: 600;
+  background-color: #582b17;
+}
+.login-form .go-to-signup {
+  margin-top: 11px;
+  color: #8f8f8f;
+}
+.login-form .go-to-signup span {
+  cursor: pointer;
+  color: #8f8f8f;
+  text-decoration: underline;
+}
+.login-form .go-to-signup span:hover {
+  color: #fff;
+  transition: all 0.2s;
+}
+.login-container .return {
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  font-size: 1.8rem;
+  color: white;
+  cursor: pointer;
+  width: 50px;
+  transition: all 0.3s;
+  border-radius: 8px;
+}
+.login-container .return:hover {
+  background-color: rgba(0, 0, 0, 0.4);
+}
diff --git a/style/main.scss b/style/main.scss
index e49fe50..60b68fd 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -1,5 +1,7 @@
 @import 'playbar.scss';
 @import 'theme.scss';
+@import 'login.scss';
+@import 'signup.scss';
 
 body {
 	font-family: sans-serif;
diff --git a/style/signup.scss b/style/signup.scss
new file mode 100644
index 0000000..6221d7b
--- /dev/null
+++ b/style/signup.scss
@@ -0,0 +1 @@
+@import 'theme.scss';
\ No newline at end of file
diff --git a/style/theme.scss b/style/theme.scss
index 9ac5872..f795d06 100644
--- a/style/theme.scss
+++ b/style/theme.scss
@@ -6,3 +6,4 @@ $controls-click-color: #909090;
 $play-bar-background-color: #212121;
 $play-grad-start: #0a0533;
 $play-grad-end: $accent-color;
+