diff --git a/config/keycloak_login.html b/config/keycloak_login.html
index ddd12f1..8f78146 100644
--- a/config/keycloak_login.html
+++ b/config/keycloak_login.html
@@ -6,11 +6,14 @@
   <link rel="stylesheet" href="./apps/landing/main.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <script type="text/javascript" src="./common/util.js"></script>
+  <!-- Bootstrap 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">
 </head>
 
 <body>
   <header id="header">
-    <label style="color:white;padding:0 15px;font-size:20px;position:relative;">CaMicroscope<a target="_blank" style="position:absolute;right:2vw;" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform">Feedback</a></label>
+    <label style="color:white;padding:0 15px;font-size:20px;position:relative;">CaMicroscope</label>
+    <a target="_blank"  style="position:absolute;right:2vw;" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform">Feedback</a>
     <nav id="nav">
         <ul>
             <!-- <li><a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform">Feedback</a></li> -->
@@ -25,34 +28,30 @@ <h2 style="margin:0;">caMicroscope</h2>
       </header>
       <!-- Content -->
 
-      <div class="content">
+      <div class="container-fluid ">
         <p><strong>caMicroscope</strong> is a tool to view, label, and annotate biomedical images.</p>
-        <a href="#" class="image fit"><img src="./apps/landing/banner1.jpg" alt="" /></a>
-
+        <a href="login.html" class="image fit"><img src="./apps/landing/banner1.jpg" alt="" /></a>
       </div>
 
-      <div class="posts" style="justify-content: center;">
+      <div>
         <!-- Organizer -->
         <section class="post">
-          <a href="#" class="image"><img src="./apps/landing/camic.jpg" alt=""/></a>
-            <div class="content">
-                <h3>Please Sign In</h3>
-                <form>
-                  <label for="username">Username:</label><br>
-                  <input type="text" id="username" name="username"><br>
-                  <label for="password">Password:</label><br>
-                  <input type="password" id="password" name="password"><br><br>
-                  <input type="button" onclick="onLogin()" value="Login">
+            <div class="content row d-flex justify-content-center">
+                <h3 class="text-center">Please Sign In</h3>
+                <form class="input-group needs-validation w-75" novalidate>
+                  <label for="username" class="form-label mb-2" >Username:</label><br>
+                  <input type="text" id="username" name="username" required><br>
+                  <label for="password" class="form-label mt-3">Password:</label><br>
+                  <input type="password" id="password" name="password" type="password" required><br><br>
+                  <input type="button" class="mt-2" onclick="onLogin()" value="Login">
                 </form>
             </div>
         </section>
       </div>
   </section>
-</body>
-
-
-<body>
-
+  <!-- Bootstrap script -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  
 </body>
 <script>
   // Configuration
@@ -98,6 +97,7 @@ <h3>Please Sign In</h3>
         });
   }
 }
+
 </script>
 
 </html>
