diff --git a/src/topbar/guest.rs b/src/topbar/guest/mod.rs
similarity index 97%
rename from src/topbar/guest.rs
rename to src/topbar/guest/mod.rs
index b668f4c..af4e500 100644
--- a/src/topbar/guest.rs
+++ b/src/topbar/guest/mod.rs
@@ -1,4 +1,7 @@
+mod signin;
+
 use crate::topbar::Tab;
+use signin::SignIn;
 use std::rc::Rc;
 use yew::prelude::*;
 
@@ -70,7 +73,7 @@ pub fn TopBar() -> Html {
             </ul>
 
             if state.sign_in {
-                <h1>{"Sign In"}</h1>
+                <SignIn/>
             }
 
             if state.sign_up {
diff --git a/src/topbar/guest/signin.rs b/src/topbar/guest/signin.rs
new file mode 100644
index 0000000..aac3983
--- /dev/null
+++ b/src/topbar/guest/signin.rs
@@ -0,0 +1,22 @@
+use yew::prelude::*;
+
+#[function_component]
+pub fn SignIn() -> Html {
+    html! {
+        <form class="auth-container">
+            <div class="auth-field">
+                <label for="username">{"Username"}</label><br/>
+                <input class="auth-input" type="text" name="username"/><br/>
+            </div>
+
+            <div class="auth-field">
+                <label for="password">{"Password"}</label><br/>
+                <input class="auth-input" type="password" name="password"/><br/>
+            </div>
+
+            <div class="center-x">
+                <button class="auth-submit">{"Sign In"}</button>
+            </div>
+        </form>
+    }
+}
diff --git a/style/topbar.css b/style/topbar.css
index f363405..e1ffd81 100644
--- a/style/topbar.css
+++ b/style/topbar.css
@@ -52,4 +52,60 @@
     margin-right: 24px;
     padding: 0;
     list-style: none;
+}
+
+.auth-container {
+    font: normal 18px Roboto;
+    position: fixed;
+    display: block;
+    right: 38px;
+    top: 86px;
+    border: 4px solid #690455;
+    border-radius: 12px;
+    width: 286px;
+    padding: 0;
+    background-color: #191c2e;
+    color: #FFFFFF;
+    z-index: 10;
+
+    .auth-submit {
+        position: relative;
+        margin: 6px;
+        padding: 6px 12px;
+        text-align: center;
+        background: #21253c;
+        color: inherit;
+        border: 2px solid #690455;
+        border-radius: 6px;
+        font: inherit;
+    }
+
+    .auth-submit:hover, .auth-submit:focus {
+        background: #2c3251;
+        outline: none;
+    }
+
+    .auth-field {
+        position: relative;
+        text-align: center;
+        margin-bottom: 8px;
+
+        .auth-input {
+            border: 2px solid #690455;
+            border-radius: 6px;
+            background: #21253c;
+            color: #FFFFFF;
+            text-align: center;
+            font: normal 14px Roboto;
+        }
+
+        .auth-input:focus {
+            background: #2c3251;
+            outline: none;
+        }
+    }
+}
+
+.center-x {
+    text-align: center;
 }
\ No newline at end of file