diff --git a/apps/web/src/app/layouts/header/account-menu.component.html b/apps/web/src/app/layouts/header/account-menu.component.html
index 981ef2c89c0..a1c5571ee16 100644
--- a/apps/web/src/app/layouts/header/account-menu.component.html
+++ b/apps/web/src/app/layouts/header/account-menu.component.html
@@ -1,11 +1,10 @@
-@let account = account$ | async;
-@if (account) {
+@if (account()) {
   <button
     type="button"
     [bitMenuTriggerFor]="accountMenu"
     class="tw-border-0 tw-bg-transparent tw-p-0 tw-shrink-0"
   >
-    <dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
+    <dynamic-avatar [id]="account().id" [text]="account() | userName"></dynamic-avatar>
   </button>
 
   <bit-menu #accountMenu>
@@ -14,11 +13,11 @@
         class="tw-flex tw-items-center tw-px-4 tw-py-1 tw-leading-tight tw-text-muted"
         appStopProp
       >
-        <dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
+        <dynamic-avatar [id]="account().id" [text]="account() | userName"></dynamic-avatar>
         <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
           <span>{{ "loggedInAs" | i18n }}</span>
           <small class="tw-block tw-overflow-hidden tw-whitespace-nowrap">
-            {{ account | userName }}
+            {{ account() | userName }}
           </small>
         </div>
       </div>
diff --git a/apps/web/src/app/layouts/header/account-menu.component.ts b/apps/web/src/app/layouts/header/account-menu.component.ts
index 0feb5760ff7..efaf078616b 100644
--- a/apps/web/src/app/layouts/header/account-menu.component.ts
+++ b/apps/web/src/app/layouts/header/account-menu.component.ts
@@ -1,12 +1,13 @@
 import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
 import { map, Observable } from "rxjs";
 
-import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { LockService, LogoutService } from "@bitwarden/auth/common";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import {
   VaultTimeoutAction,
   VaultTimeoutSettingsService,
 } from "@bitwarden/common/key-management/vault-timeout";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
@@ -21,21 +22,29 @@ import { SharedModule } from "../../shared";
 export class AccountMenuComponent {
   private readonly platformUtilsService = inject(PlatformUtilsService);
   private readonly vaultTimeoutSettingsService = inject(VaultTimeoutSettingsService);
-  private readonly messagingService = inject(MessagingService);
   private readonly accountService = inject(AccountService);
+  private readonly logoutService = inject(LogoutService);
+  private readonly lockService = inject(LockService);
+
+  protected readonly account = toSignal(this.accountService.activeAccount$);
 
-  protected readonly account$: Observable<Account | null> = this.accountService.activeAccount$;
   protected readonly canLock$: Observable<boolean> = this.vaultTimeoutSettingsService
     .availableVaultTimeoutActions$()
     .pipe(map((actions) => actions.includes(VaultTimeoutAction.Lock)));
   protected readonly selfHosted = this.platformUtilsService.isSelfHost();
   protected readonly hostname = globalThis.location.hostname;
 
-  protected lock() {
-    this.messagingService.send("lockVault");
+  protected async lock() {
+    const userId = this.account()?.id;
+    if (userId) {
+      await this.lockService.lock(userId);
+    }
   }
 
-  protected logout() {
-    this.messagingService.send("logout");
+  protected async logout() {
+    const userId = this.account()?.id;
+    if (userId) {
+      await this.logoutService.logout(userId);
+    }
   }
 }