diff --git a/src/assets/main.scss b/src/assets/main.scss
index 5d3d8f7..d2df235 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -10,7 +10,7 @@ body {
     background: black;
 }
 
-p, a, li {
+p, a, li, label {
     font-family: Arial, sans-serif;
     color: #FFF;
 }
diff --git a/src/components/screens/Login.vue b/src/components/screens/Login.vue
index e6f3bdc..5af01e4 100644
--- a/src/components/screens/Login.vue
+++ b/src/components/screens/Login.vue
@@ -4,8 +4,21 @@
   <div class="content-wrapper">
     <h1 class="main-title">NEW QUEST</h1>
 
+    <div class="login-form">
+      <form method="post">
+        <div class="form-field">
+          <label for="username">USERNAME</label>
+          <input type="text" name="username" required>
+        </div>
+        <div class="form-field">
+          <label for="password">PASSWORD</label>
+          <input type="password" name="password" required>
+        </div>
+      </form>
+    </div>
+
     <div class="row-buttons">
-      <a class="button button-1" href="/">
+      <a class="button button-1" href="/" id="submit">
         LOGIN
       </a>
 
@@ -59,6 +72,39 @@ onMounted(() => {
   flex-direction: column;
   position: relative;
 
+  .login-form {
+    position: absolute;
+    bottom: 7rem;
+    width: 100%;
+
+    form {
+      display: grid;
+      gap: 1.5rem;
+      width: inherit;
+
+      .form-field {
+        display: flex;
+        flex-direction: column;
+        background-color: rgba(255, 255, 255, 0.5);
+        border-radius: 3px;
+        width: 30%;
+        margin: 0 auto;
+
+        label {
+          color: #000;
+          background-color: rgba(255, 255, 255, 0.5);
+          padding: 0.25rem 0.5rem;
+        }
+        input {
+          background-color: transparent;
+          border: none;
+          padding: 0.5rem 0.25rem;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+
   .row-buttons {
     display: flex;
     gap: 0.5rem;