diff --git a/front-end/components/login.mjs b/front-end/components/login.mjs
index 165b16a5..1af8d1a1 100644
--- a/front-end/components/login.mjs
+++ b/front-end/components/login.mjs
@@ -30,6 +30,8 @@ async function handleLogin(event) {
     const password = formData.get("password");
 
     await apiService.login(username, password);
+
+    window.location.hash = "/";
   } catch (error) {
     throw error;
   } finally {
diff --git a/front-end/components/logout.mjs b/front-end/components/logout.mjs
index 2c5ebe99..ebc2067b 100644
--- a/front-end/components/logout.mjs
+++ b/front-end/components/logout.mjs
@@ -16,6 +16,7 @@ function createLogout(template, isLoggedIn) {
 async function handleLogout(event) {
   try {
     apiService.logout();
+    window.location.hash = '/login';
   } catch (error) {
     throw error;
   }
diff --git a/front-end/index.html b/front-end/index.html
index 89d6b130..c64eb2c3 100644
--- a/front-end/index.html
+++ b/front-end/index.html
@@ -43,7 +43,7 @@ <h3>This Legacy Code project is coursework from Code Your Future</h3>
     <!-- Login Component Template -->
     <template id="login-template">
       <section aria-label="Log in or sign up" class="login">
-        <form data-form="login" class="login__form" method="post">
+        <form data-form="login" class="login__form" method="post" action="/login">
           <div class="login__field">
             <label class="login__label is-invisible" for="username"
               >Username</label