diff --git a/apps/holder/projects/browser-extension/src/app/app.component.html b/apps/holder/projects/browser-extension/src/app/app.component.html
index ac88b78f..b4171ffa 100644
--- a/apps/holder/projects/browser-extension/src/app/app.component.html
+++ b/apps/holder/projects/browser-extension/src/app/app.component.html
@@ -1,7 +1,7 @@
 <div class="content">
   <router-outlet></router-outlet>
 </div>
-<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center">
+<mat-toolbar *ngIf="authService.isAuthenticated()" fxLayout="row" fxLayoutAlign="space-between center">
   <div fxLayout="column" fxLayoutAlign=" center">
     <a mat-icon-button routerLink="/scan" routerLinkActive="active-link"
       ><mat-icon>qr_code_scanner</mat-icon></a
diff --git a/apps/holder/projects/browser-extension/src/app/auth/auth.service.ts b/apps/holder/projects/browser-extension/src/app/auth/auth.service.ts
index 60e85357..5f1a2e5d 100644
--- a/apps/holder/projects/browser-extension/src/app/auth/auth.service.ts
+++ b/apps/holder/projects/browser-extension/src/app/auth/auth.service.ts
@@ -1,12 +1,17 @@
 import { Injectable } from '@angular/core';
 import { environment } from '../../environments/environment';
 import { decodeJwt } from 'jose';
+import { Router } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthService {
-  constructor() {}
+  constructor(
+    private router: Router,
+    private http: HttpClient,
+  ) {}
 
   /**
    * Checks if the access token exists and if it is expired
@@ -24,6 +29,7 @@ export class AuthService {
    * Launches the web auth flow to authenticate the user
    */
   async login() {
+    console.log(this.getAuthUrl());
     if (typeof chrome.identity !== 'undefined') {
       await chrome.identity
         .launchWebAuthFlow({
@@ -36,11 +42,35 @@ export class AuthService {
             const accessToken = this.extractTokenFromRedirectUri(redirectUri);
             localStorage.setItem('accessToken', accessToken);
           },
-          (err) => console.log(err)
+          (err) => console.log(err),
         );
     }
   }
 
+    /**
+   * Logs out the user
+   */
+    async logout() {
+      // this.http.post(`${environment.keycloakHost}/realms/${environment.keycloakRealm}/protocol/openid-connect/logout`, null).subscribe(() => {
+      //   console.log('successfully logged out');
+      //   this.router.navigateByUrl('/login');
+      // });
+
+      await chrome.identity
+      .launchWebAuthFlow({
+        interactive: false,
+        url: this.getLogoutUrl(),
+      })
+      .then(
+        () => {
+          window.sessionStorage.clear();
+          localStorage.clear();
+          this.router.navigateByUrl('/login');
+        },
+        (err) => console.log(err),
+      );
+    }
+
   /**
    * Generates the auth url that will be used for login.
    * @returns
@@ -78,4 +108,15 @@ export class AuthService {
     // Returning the extracted values
     return accessToken;
   }
+
+  /**
+   * Generates the logout URL that will be used for logging out.
+   * @returns {string} The logout URL.
+   */
+  private getLogoutUrl() {
+    let logoutUrl = `${environment.keycloakHost}/realms/${environment.keycloakRealm}/protocol/openid-connect/logout`;
+    logoutUrl += `?redirect_uri=${encodeURIComponent(chrome.identity.getRedirectURL())}`;
+    console.log(logoutUrl);
+    return logoutUrl;
+  }
 }
diff --git a/apps/holder/projects/browser-extension/src/environments/environment.development.ts b/apps/holder/projects/browser-extension/src/environments/environment.development.ts
index 0ad5d87e..5b0388aa 100644
--- a/apps/holder/projects/browser-extension/src/environments/environment.development.ts
+++ b/apps/holder/projects/browser-extension/src/environments/environment.development.ts
@@ -1,3 +1,15 @@
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export declare namespace globalThis {
+  let environment: {
+    backendUrl: string;
+    keycloakHost: string;
+    keycloakClient: string;
+    keycloakRealm: string;
+    demoIssuer: string;
+    demoVerifier: string;
+  };
+}
+
 export const environment = {
   backendUrl: 'http://localhost:3000',
   keycloakHost: 'http://localhost:8080',
@@ -6,3 +18,5 @@ export const environment = {
   demoIssuer: 'http://localhost:3001',
   demoVerifier: 'http://localhost:3002',
 };
+
+globalThis.environment = environment;