diff --git a/UI/cashier/customer.html b/UI/cashier/customer.html
index 872d9b7..69fec7e 100644
--- a/UI/cashier/customer.html
+++ b/UI/cashier/customer.html
@@ -16,7 +16,7 @@
           <div class="current-user web-user">
             <img class="avatar" src="../img/emeka copy@3x.png" />
             <h4>Tejumola Peter</h4>
-            <span>(admin)</span>
+            <span>(cashier)</span>
             <img class="arrow-down" src="../img/arrow-drop-down.svg" />
           </div>
         </div>
diff --git a/UI/header.html b/UI/header.html
deleted file mode 100644
index e69de29..0000000
diff --git a/UI/index.html b/UI/index.html
index 149c8a5..ccafcc6 100644
--- a/UI/index.html
+++ b/UI/index.html
@@ -110,16 +110,16 @@ <h4>Internet support</h4>
             <img src="./img/banka-blue-logo.svg" />
 
             <div class="ct-select-group ct-js-select-group">
-              <select class="ct-select ct-js-select">
-                <option>CUSTOMER</option>
-                <option>STAFF</option>
-                <option>ADMIN</option>
+              <select class="ct-select ct-js-select" id="user-role">
+                <option value="customer">CUSTOMER</option>
+                <option value="staff">STAFF</option>
+                <option value="admin">ADMIN</option>
                 </select>
           </div>
             <input type="text" id="email" name="email" placeholder="Email Address">
             <input type="password" id="password" name="password" placeholder="Password">
     
-            <button class="signup">Login</button>
+            <button class="signup" id="user-login-btn">Login</button>
 
             <p class="account"><a id="signup-button">Forgot password?</a></p>
         </div>
diff --git a/UI/js/main.js b/UI/js/main.js
index 7960293..6e7231e 100644
--- a/UI/js/main.js
+++ b/UI/js/main.js
@@ -30,3 +30,24 @@ loginModal.onclick = function(e) {
   loginModal.style.display = "none";
   body.classList.remove("stop-scrolling");
 };
+
+var userLogin = document.getElementById("user-login-btn");
+var userRole = document.getElementById("user-role");
+var role = "customer";
+userRole.onchange = function() {
+  role = document.getElementById("user-role").value;
+};
+
+userLogin.onclick = function(e) {
+  gotoNextPage();
+};
+
+function gotoNextPage() {
+  if (role == "customer") {
+    window.location.href = "./customer/dashboard.html";
+  } else if (role == "staff") {
+    window.location.href = "./cashier/dashboard.html";
+  } else if (role == "admin") {
+    window.location.href = "./admin/dashboard.html";
+  }
+}