diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
index d6f52045a33..6cd72d247f6 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
@@ -8,28 +8,23 @@
     </ng-container>
   </popup-header>
 
-  <ng-template #emptyVaultTemplate>
-    <div
-      *ngIf="vaultState === VaultStateEnum.Empty"
-      class="tw-flex tw-flex-col tw-h-full tw-justify-center"
-    >
-      <bit-no-items [icon]="vaultIcon">
-        <ng-container slot="title">{{ "yourVaultIsEmpty" | i18n }}</ng-container>
-        <ng-container slot="description">
-          <p bitTypography="body2" class="tw-mx-6 tw-mt-2">
-            {{ "emptyVaultDescription" | i18n }}
-          </p>
-        </ng-container>
-        <a slot="button" bitButton buttonType="secondary" [routerLink]="['/add-cipher']">
-          {{ "newLogin" | i18n }}
-        </a>
-      </bit-no-items>
-    </div>
-  </ng-template>
-
-  <vault-fade-in-out *ngIf="vaultState === VaultStateEnum.Empty">
-    <ng-container *ngTemplateOutlet="emptyVaultTemplate"></ng-container>
-  </vault-fade-in-out>
+  @if (vaultState === VaultStateEnum.Empty) {
+    <vault-fade-in-out>
+      <div class="tw-flex tw-flex-col tw-h-full tw-justify-center">
+        <bit-no-items [icon]="vaultIcon">
+          <ng-container slot="title">{{ "yourVaultIsEmpty" | i18n }}</ng-container>
+          <ng-container slot="description">
+            <p bitTypography="body2" class="tw-mx-6 tw-mt-2">
+              {{ "emptyVaultDescription" | i18n }}
+            </p>
+          </ng-container>
+          <a slot="button" bitButton buttonType="secondary" [routerLink]="['/add-cipher']">
+            {{ "newLogin" | i18n }}
+          </a>
+        </bit-no-items>
+      </div>
+    </vault-fade-in-out>
+  }
 
   <blocked-injection-banner
     *ngIf="vaultState !== VaultStateEnum.Empty"
@@ -103,28 +98,26 @@
       </div>
     </div>
 
-    <ng-template #vaultContentTemplate>
-      <ng-container *ngIf="vaultState === null && !(loading$ | async)">
-        <app-autofill-vault-list-items></app-autofill-vault-list-items>
-        <app-vault-list-items-container
-          [title]="'favorites' | i18n"
-          [ciphers]="(favoriteCiphers$ | async) || []"
-          id="favorites"
-          collapsibleKey="favorites"
-        ></app-vault-list-items-container>
-        <app-vault-list-items-container
-          [title]="'allItems' | i18n"
-          [ciphers]="(remainingCiphers$ | async) || []"
-          id="allItems"
-          disableSectionMargin
-          collapsibleKey="allItems"
-        ></app-vault-list-items-container>
-      </ng-container>
-    </ng-template>
-
-    <vault-fade-in-out *ngIf="vaultState === null">
-      <ng-container *ngTemplateOutlet="vaultContentTemplate"></ng-container>
-    </vault-fade-in-out>
+    @if (vaultState === null) {
+      <vault-fade-in-out>
+        @if (!(loading$ | async)) {
+          <app-autofill-vault-list-items></app-autofill-vault-list-items>
+          <app-vault-list-items-container
+            [title]="'favorites' | i18n"
+            [ciphers]="(favoriteCiphers$ | async) || []"
+            id="favorites"
+            collapsibleKey="favorites"
+          ></app-vault-list-items-container>
+          <app-vault-list-items-container
+            [title]="'allItems' | i18n"
+            [ciphers]="(remainingCiphers$ | async) || []"
+            id="allItems"
+            disableSectionMargin
+            collapsibleKey="allItems"
+          ></app-vault-list-items-container>
+        }
+      </vault-fade-in-out>
+    }
   </ng-container>
 
   @if (showSkeletonsLoaders$ | async) {