diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.html
index 2dccb506e84d..b24f439fa98d 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.html
@@ -1,11 +1,9 @@
-<ng-container *ngIf="vm$ | async as vm">
-    <div
-        *ngIf="showMask()"
-        (click)="toogleMenu($event)"
-        class="dot-mask"
-        data-testId="dot-mask"></div>
+@if (vm$ | async; as vm) {
+    @if ($showMask()) {
+        <div (click)="toggleMenu($event)" class="dot-mask" data-testId="dot-mask"></div>
+    }
     <p-avatar
-        (click)="toogleMenu($event)"
+        (click)="toggleMenu($event)"
         [email]="vm.userData.email"
         data-testId="avatar"
         dotGravatar></p-avatar>
@@ -13,16 +11,17 @@
         [model]="vm.items"
         [popup]="true"
         #menu
+        (onHide)="hideMask()"
         appendTo="body"
         styleClass="toolbar-user__menu"></p-menu>
 
-    <dot-my-account
-        *ngIf="vm.showMyAccount"
-        (shutdown)="store.showMyAccount(false)"
-        [visible]="vm.showMyAccount"></dot-my-account>
+    @if (vm.showMyAccount) {
+        <dot-my-account
+            (shutdown)="store.showMyAccount(false)"
+            [visible]="vm.showMyAccount"></dot-my-account>
+    }
 
-    <dot-login-as
-        *ngIf="vm.showLoginAs"
-        (cancel)="store.showLoginAs(false)"
-        [visible]="vm.showLoginAs"></dot-login-as>
-</ng-container>
+    @if (vm.showLoginAs) {
+        <dot-login-as (cancel)="store.showLoginAs(false)" [visible]="vm.showLoginAs"></dot-login-as>
+    }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.spec.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.spec.ts
index 6cff7ad5b8eb..8a4b430b1e81 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.spec.ts
@@ -221,4 +221,17 @@ describe('DotToolbarUserComponent', () => {
         fixture.detectChanges();
         expect(de.query(By.css('[data-testid="dot-mask"]'))).toBeFalsy();
     });
+
+    it('should hide mask when menu hide', () => {
+        fixture.detectChanges();
+        const avatarComponent = de.query(By.css('[data-testid="avatar"]')).nativeElement;
+        avatarComponent.click();
+
+        const menu = de.query(By.css('p-menu'));
+        menu.triggerEventHandler('onHide', {});
+
+        fixture.detectChanges();
+
+        expect(de.query(By.css('[data-testId="dot-mask"]'))).toBeNull();
+    });
 });
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.ts
index aa120f3e0c6c..80ea2238cfc2 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.ts
@@ -1,11 +1,11 @@
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
     OnInit,
-    ViewChild,
     inject,
-    signal
+    signal,
+    viewChild
 } from '@angular/core';
 
 import { AvatarModule } from 'primeng/avatar';
@@ -33,23 +33,26 @@ import { DotMyAccountModule } from '../dot-my-account/dot-my-account.module';
         DotMyAccountModule,
         DotSafeHtmlPipe,
         MenuModule,
-        AsyncPipe,
-        NgIf
+        AsyncPipe
     ]
 })
 export class DotToolbarUserComponent implements OnInit {
-    readonly #store = inject(DotToolbarUserStore);
+    readonly store = inject(DotToolbarUserStore);
 
-    vm$ = this.#store.vm$;
-    @ViewChild('menu') menu: Menu;
-    showMask = signal<boolean>(false);
+    vm$ = this.store.vm$;
+    $menu = viewChild<Menu>('menu');
+    $showMask = signal<boolean>(false);
 
     ngOnInit(): void {
-        this.#store.init();
+        this.store.init();
     }
 
-    toogleMenu(event: CustomEvent): void {
-        this.menu.toggle(event);
-        this.showMask.update((value) => !value);
+    toggleMenu(event: Event): void {
+        this.$menu().toggle(event);
+        this.$showMask.update((value) => !value);
+    }
+
+    hideMask(): void {
+        this.$showMask.update(() => false);
     }
 }