diff --git a/support-portal-frontend/src/app/component/login/login.component.html b/support-portal-frontend/src/app/component/login/login.component.html
index 147cfc4..c3b7f6f 100644
--- a/support-portal-frontend/src/app/component/login/login.component.html
+++ b/support-portal-frontend/src/app/component/login/login.component.html
@@ -1 +1,43 @@
-<p>login works!</p>
+<div class="container" style="margin-top: 100px;">
+  <div class="d-flex justify-content-center h-50">
+    <div class="user_card">
+      <div class="d-flex justify-content-center">
+        <div style="margin-top: 10px;margin-bottom:-90px;">
+          <h3>User Management Portal</h3>
+        </div>
+      </div>
+      <div class="d-flex justify-content-center form_container">
+        <form>
+          <div class="input-group mb-3">
+            <div class="input-group-append">
+              <span class="input-group-text"><i class="fas fa-user"></i></span>
+            </div>
+            <input type="text" class="form-control" name="username" placeholder="Username" required>
+          </div>
+          <span class="help-block" style="color:red;">Please enter a username</span>
+          <div class="input-group mb-2">
+            <div class="input-group-append">
+              <span class="input-group-text"><i class="fas fa-key"></i></span>
+            </div>
+            <input type="password" class="form-control" name="password" placeholder="Password" required>
+          </div>
+          <span class="help-block" style="color:red;">Please enter a password.</span>
+          <div class="d-flex justify-content-center mt-3 login_container">
+            <button type="submit"  name="button" class="btn login_btn">
+              <i class="fas fa-spinner fa-spin"></i>&nbsp;&nbsp;
+              <span>Loading...</span>
+              <span>Login</span>
+            </button>
+          </div>
+        </form>
+      </div>
+      <div class="mt-4">
+        <div class="d-flex justify-content-center links">
+          Don't have an account? <a  class="ml-2" style="color: #2C3E50;">Sign Up</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
diff --git a/support-portal-frontend/src/styles.css b/support-portal-frontend/src/styles.css
index 90d4ee0..4d257d9 100644
--- a/support-portal-frontend/src/styles.css
+++ b/support-portal-frontend/src/styles.css
@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css';