diff --git a/frontend/vanilla/content/stock_photo_1.png b/frontend/vanilla/content/stock_photo_1.png
new file mode 100644
index 0000000..ce05a5c
Binary files /dev/null and b/frontend/vanilla/content/stock_photo_1.png differ
diff --git a/frontend/vanilla/content/stock_photo_2.png b/frontend/vanilla/content/stock_photo_2.png
new file mode 100644
index 0000000..9b06cfa
Binary files /dev/null and b/frontend/vanilla/content/stock_photo_2.png differ
diff --git a/frontend/vanilla/html/login.html b/frontend/vanilla/html/login.html
index 8bf3ca1..0a09f7c 100644
--- a/frontend/vanilla/html/login.html
+++ b/frontend/vanilla/html/login.html
@@ -1,41 +1,88 @@
-<!DOCTYPE html>
-<html lang="en">
+<html>
 
 <head>
-  <meta charset="UTF-8">
-  <title>Log in - Blink</title>
-  <link rel="stylesheet" href="../css/login-register.css">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
+  </script>
 </head>
 
+<style>
+  .divider:after,
+  .divider:before {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: #eee;
+  }
+
+  .h-custom {
+    height: calc(100% - 73px);
+  }
+
+  @media (max-width: 450px) {
+    .h-custom {
+      height: 100%;
+    }
+  }
+</style>
+
 <body>
-  <!-- partial:index.partial.html -->
-  <div id="login-form-wrap">
-    <h2>Login</h2>
-    <form id="login-form" method="POST">
+  <section class="vh-100">
+    <div class="container-fluid h-custom">
+      <div class="row d-flex justify-content-center align-items-center h-100">
+        <div class="col-md-9 col-lg-6 col-xl-5">
+          <img id="image" class="img-fluid">
+        </div>
+        <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
+          <form>
 
-      <p>
-        <input type="email" id="email" name="email" placeholder="Email Address" required><i
-          class="validation"><span></span><span></span></i>
-      </p>
+            <div class="divider d-flex align-items-center my-4">
+              <p class="text-center fw-bold mx-3 mb-0">Sign In</p>
+            </div>
 
-      <p>
-        <input type="password" id="password" name="password" placeholder="Password" required><i
-          class="validation"><span></span><span></span></i>
-      </p>
+            <!-- Email input -->
+            <div class="form-outline mb-4">
+              <input type="email" id="email" class="form-control form-control-lg"
+                placeholder="Enter a valid email address" />
+            </div>
 
-      <p>
-        <button type="button" onclick="login()">Login</button>
-      </p>
-    </form>
-    <div id="create-account-wrap">
-      <p>Not a member? <a href="./register.html">Create Account</a>
-        <p>
+            <!-- Password input -->
+            <div class="form-outline mb-3">
+              <input type="password" id="password" class="form-control form-control-lg" placeholder="Enter password" />
+            </div>
+
+            <div class="d-flex justify-content-between align-items-center">
+              <!-- Checkbox -->
+              <div class="form-check mb-0">
+                <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
+                <label class="form-check-label" for="form2Example3">
+                  Remember me
+                </label>
+              </div>
+              <a href="#!" class="text-body">Forgot password?</a>
+            </div>
+
+            <div class="text-center text-lg-start mt-4 pt-2">
+              <button type="button" onclick="login()" class="btn btn-primary btn-lg"
+                style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
+              <p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="register.html"
+                  class="link-danger">Register</a></p>
+            </div>
+          </form>
+        </div>
+      </div>
     </div>
-  </div>
+  </section>
 
   <script src="../js/constants.js"></script>
   <script src="../js/utils.js"></script>
   <script>
+    window.onload = function () {
+      loadImage();
+    }
+
     async function login() {
       const email = document.getElementById("email").value;
       const password = document.getElementById("password").value;
@@ -64,6 +111,17 @@
         //callbackErrors(data.errors, alert);
       }
     }
+  
+    function loadImage(){
+      const random = Math.floor(Math.random() * 2);
+      if(random == 0){
+        document.getElementById('image').src = '../content/stock_photo_1.png';
+      }
+      else if(random == 1){
+        document.getElementById('image').src = '../content/stock_photo_2.png';
+      }
+    }
+
   </script>
 
 </body>
