diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index 4cda7032..f86f587d 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -72,8 +72,9 @@
                         <router-link @click="onClick" class="nav-link" to="/about">About</router-link>
                     </li>
                 </ul>
-                <form class="d-flex" role="search" v-if="isLogged">
-                    <button class="btn btn-outline-danger" @click="signout">Logout</button>
+                <form class="d-flex" role="search">
+                    <button v-if="isLogged" class="btn btn-outline-danger" @click="signout">Logout</button>
+                    <button v-if="!isLogged" class="btn btn-outline-success" @click="signin">Login</button>
                 </form>
             </div>
         </div>
@@ -98,14 +99,21 @@ export default defineComponent({
         this.$emitter.on("logged-in", () => {
             this.isLogged = this.isLoggedIn();
         });
+        this.$emitter.on("logged-out", () => {
+            this.isLogged = this.isLoggedIn();
+        });
     },
     methods: {
         isLoggedIn,
         logout,
+        signin(e: Event) {
+            e.preventDefault();
+            this.$router.push('/login');
+        },
         signout(e: Event) {
             e.preventDefault();
             this.logout();
-            this.isLogged = this.isLoggedIn();
+            this.$emitter.emit("logged-out");
             this.$router.push('/');
         },
         onClick() {
diff --git a/webapp/src/utils/authentication.ts b/webapp/src/utils/authentication.ts
index aef44c37..a4551e7c 100644
--- a/webapp/src/utils/authentication.ts
+++ b/webapp/src/utils/authentication.ts
@@ -1,3 +1,5 @@
+import type { Emitter, EventType } from "mitt";
+
 export function authHeader(): Headers {
     // return authorization header with basic auth credentials
     let user = JSON.parse(localStorage.getItem('user') || "");
@@ -45,13 +47,14 @@ export function login(username: String, password: String) {
         });
 }
 
-export function handleResponse(response: Response) {
+export function handleResponse(response: Response, emitter: Emitter<Record<EventType, unknown>>) {
     return response.text().then(text => {
         const data = text && JSON.parse(text);
         if (!response.ok) {
             if (response.status === 401) {
                 // auto logout if 401 response returned from api
                 logout();
+                emitter.emit("logged-out");
                 location.reload();
             }
 
diff --git a/webapp/src/views/ConfigAdminView.vue b/webapp/src/views/ConfigAdminView.vue
index 7802ddf5..479c7171 100644
--- a/webapp/src/views/ConfigAdminView.vue
+++ b/webapp/src/views/ConfigAdminView.vue
@@ -156,7 +156,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/DtuAdminView.vue b/webapp/src/views/DtuAdminView.vue
index 6d563f06..e23ba406 100644
--- a/webapp/src/views/DtuAdminView.vue
+++ b/webapp/src/views/DtuAdminView.vue
@@ -79,7 +79,7 @@ export default defineComponent({
         getDtuConfig() {
             this.dataLoading = true;
             fetch("/api/dtu/config", { headers: authHeader() })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (data) => {
                         this.dtuConfigList = data;
@@ -98,7 +98,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue
index 61441878..6cdf5b02 100644
--- a/webapp/src/views/InverterAdminView.vue
+++ b/webapp/src/views/InverterAdminView.vue
@@ -198,7 +198,7 @@ export default defineComponent({
         getInverters() {
             this.dataLoading = true;
             fetch("/api/inverter/list", { headers: authHeader() })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then((data) => {
                     this.inverters = data.inverter;
                     this.dataLoading = false;
@@ -213,7 +213,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
@@ -249,7 +249,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
@@ -289,7 +289,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/LoginView.vue b/webapp/src/views/LoginView.vue
index b1c5f480..c5d43e09 100644
--- a/webapp/src/views/LoginView.vue
+++ b/webapp/src/views/LoginView.vue
@@ -76,6 +76,7 @@ export default defineComponent({
                         router.push(this.returnUrl);
                     },
                     error => {
+                        this.$emitter.emit("logged-out");
                         this.alertMessage = error;
                         this.alertType = 'danger';
                         this.showAlert = true;
diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue
index 47f33674..b2f62d96 100644
--- a/webapp/src/views/MqttAdminView.vue
+++ b/webapp/src/views/MqttAdminView.vue
@@ -242,7 +242,7 @@ export default defineComponent({
         getMqttConfig() {
             this.dataLoading = true;
             fetch("/api/mqtt/config", { headers: authHeader() })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then((data) => {
                     this.mqttConfigList = data;
                     this.dataLoading = false;
@@ -259,7 +259,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue
index ea617fdf..235869ce 100644
--- a/webapp/src/views/NetworkAdminView.vue
+++ b/webapp/src/views/NetworkAdminView.vue
@@ -128,7 +128,7 @@ export default defineComponent({
         getNetworkConfig() {
             this.dataLoading = true;
             fetch("/api/network/config", { headers: authHeader() })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then((data) => {
                     this.networkConfigList = data;
                     this.dataLoading = false;
@@ -145,7 +145,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/NtpAdminView.vue b/webapp/src/views/NtpAdminView.vue
index 3b8315e8..be6a13e3 100644
--- a/webapp/src/views/NtpAdminView.vue
+++ b/webapp/src/views/NtpAdminView.vue
@@ -129,7 +129,7 @@ export default defineComponent({
         getNtpConfig() {
             this.dataLoading = true;
             fetch("/api/ntp/config", { headers: authHeader() })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (data) => {
                         this.ntpConfigList = data;
@@ -144,7 +144,7 @@ export default defineComponent({
         getCurrentTime() {
             this.dataLoading = true;
             fetch("/api/ntp/time", { headers: authHeader() })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (data) => {
                         this.mcuTime = new Date(
@@ -172,7 +172,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
@@ -195,7 +195,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/SecurityAdminView.vue b/webapp/src/views/SecurityAdminView.vue
index d557bd8b..b4aae349 100644
--- a/webapp/src/views/SecurityAdminView.vue
+++ b/webapp/src/views/SecurityAdminView.vue
@@ -67,7 +67,7 @@ export default defineComponent({
         getPasswordConfig() {
             this.dataLoading = true;
             fetch("/api/security/password", { headers: authHeader() })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (data) => {
                         this.securityConfigList = data;
@@ -94,7 +94,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then(handleResponse)
+                .then((response) => handleResponse(response, this.$emitter))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;