diff --git a/apps/web/src/app/dirt/reports/pages/breach-report.component.html b/apps/web/src/app/dirt/reports/pages/breach-report.component.html
index d645fa39d69..3a302b759b3 100644
--- a/apps/web/src/app/dirt/reports/pages/breach-report.component.html
+++ b/apps/web/src/app/dirt/reports/pages/breach-report.component.html
@@ -12,45 +12,58 @@
       {{ "checkBreaches" | i18n }}
     </button>
   </form>
-  <div class="tw-mt-4" *ngIf="!loading && checkedUsername">
-    <p *ngIf="error">{{ "reportError" | i18n }}...</p>
-    <ng-container *ngIf="!error">
-      <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!breachedAccounts.length">
-        {{ "breachUsernameNotFound" | i18n: checkedUsername }}
-      </bit-callout>
-      <bit-callout type="danger" title="{{ 'breachFound' | i18n }}" *ngIf="breachedAccounts.length">
-        {{ "breachUsernameFound" | i18n: checkedUsername : breachedAccounts.length }}
-      </bit-callout>
-      <ul
-        class="tw-list-none tw-flex-col tw-divide-x-0 tw-divide-y tw-divide-solid tw-divide-secondary-300 tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-p-0"
-        *ngIf="breachedAccounts.length"
-      >
-        <li *ngFor="let a of breachedAccounts" class="tw-flex tw-gap-4 tw-p-4">
-          <div class="tw-w-32 tw-flex-none">
-            <img [src]="a.logoPath" alt="" class="tw-max-w-32 tw-items-stretch" />
-          </div>
-          <div class="tw-flex-auto">
-            <h3 class="tw-text-lg">{{ a.title }}</h3>
-            <p [innerHTML]="a.description"></p>
-            <p class="tw-mb-1">{{ "compromisedData" | i18n }}:</p>
-            <ul>
-              <li *ngFor="let d of a.dataClasses">{{ d }}</li>
-            </ul>
-          </div>
-          <div class="tw-w-48 tw-flex-none">
-            <dl>
-              <dt>{{ "website" | i18n }}</dt>
-              <dd>{{ a.domain }}</dd>
-              <dt>{{ "affectedUsers" | i18n }}</dt>
-              <dd>{{ a.pwnCount | number }}</dd>
-              <dt>{{ "breachOccurred" | i18n }}</dt>
-              <dd>{{ a.breachDate | date: "mediumDate" }}</dd>
-              <dt>{{ "breachReported" | i18n }}</dt>
-              <dd>{{ a.addedDate | date: "mediumDate" }}</dd>
-            </dl>
-          </div>
-        </li>
-      </ul>
-    </ng-container>
-  </div>
+  @if (!loading && checkedUsername) {
+    <div class="tw-mt-4">
+      @if (error) {
+        <p>{{ "reportError" | i18n }}...</p>
+      }
+      @if (!error) {
+        @if (!breachedAccounts.length) {
+          <bit-callout type="success" title="{{ 'goodNews' | i18n }}">
+            {{ "breachUsernameNotFound" | i18n: checkedUsername }}
+          </bit-callout>
+        }
+        @if (breachedAccounts.length) {
+          <bit-callout type="danger" title="{{ 'breachFound' | i18n }}">
+            {{ "breachUsernameFound" | i18n: checkedUsername : breachedAccounts.length }}
+          </bit-callout>
+        }
+        @if (breachedAccounts.length) {
+          <ul
+            class="tw-list-none tw-flex-col tw-divide-x-0 tw-divide-y tw-divide-solid tw-divide-secondary-300 tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-p-0"
+          >
+            @for (a of breachedAccounts; track a) {
+              <li class="tw-flex tw-gap-4 tw-p-4">
+                <div class="tw-w-32 tw-flex-none">
+                  <img [src]="a.logoPath" alt="" class="tw-max-w-32 tw-items-stretch" />
+                </div>
+                <div class="tw-flex-auto">
+                  <h3 class="tw-text-lg">{{ a.title }}</h3>
+                  <p [innerHTML]="a.description"></p>
+                  <p class="tw-mb-1">{{ "compromisedData" | i18n }}:</p>
+                  <ul>
+                    @for (d of a.dataClasses; track d) {
+                      <li>{{ d }}</li>
+                    }
+                  </ul>
+                </div>
+                <div class="tw-w-48 tw-flex-none">
+                  <dl>
+                    <dt>{{ "website" | i18n }}</dt>
+                    <dd>{{ a.domain }}</dd>
+                    <dt>{{ "affectedUsers" | i18n }}</dt>
+                    <dd>{{ a.pwnCount | number }}</dd>
+                    <dt>{{ "breachOccurred" | i18n }}</dt>
+                    <dd>{{ a.breachDate | date: "mediumDate" }}</dd>
+                    <dt>{{ "breachReported" | i18n }}</dt>
+                    <dd>{{ a.addedDate | date: "mediumDate" }}</dd>
+                  </dl>
+                </div>
+              </li>
+            }
+          </ul>
+        }
+      }
+    </div>
+  }
 </bit-container>
diff --git a/apps/web/src/app/dirt/reports/pages/exposed-passwords-report.component.html b/apps/web/src/app/dirt/reports/pages/exposed-passwords-report.component.html
index fcdb3f6ca64..b5b964a11b7 100644
--- a/apps/web/src/app/dirt/reports/pages/exposed-passwords-report.component.html
+++ b/apps/web/src/app/dirt/reports/pages/exposed-passwords-report.component.html
@@ -5,95 +5,110 @@
   <button type="submit" buttonType="primary" bitButton [loading]="loading" (click)="load()">
     {{ "checkExposedPasswords" | i18n }}
   </button>
-  <div class="tw-mt-4" *ngIf="hasLoaded">
-    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
-      {{ "noExposedPasswords" | i18n }}
-    </bit-callout>
-    <ng-container *ngIf="ciphers.length">
-      <bit-callout type="danger" title="{{ 'exposedPasswordsFound' | i18n }}" [useAlertRole]="true">
-        {{ "exposedPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </bit-callout>
-      <bit-toggle-group
-        *ngIf="showFilterToggle && !isAdminConsoleActive"
-        [selected]="filterOrgStatus$ | async"
-        (selectedChange)="filterOrgToggle($event)"
-        [attr.aria-label]="'addAccessFilter' | i18n"
-      >
-        <ng-container *ngFor="let status of filterStatus">
-          <bit-toggle [value]="status">
-            {{ getName(status) }}
-            <span bitBadge variant="info"> {{ getCount(status) }} </span>
-          </bit-toggle>
-        </ng-container>
-      </bit-toggle-group>
-      <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
-        <ng-container header>
-          <th bitCell></th>
-          <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
-          <th bitCell bitSortable="organizationId" *ngIf="!isAdminConsoleActive">
-            {{ "owner" | i18n }}
-          </th>
-          <th bitCell class="tw-text-right" bitSortable="exposedXTimes">
-            {{ "timesExposed" | i18n }}
-          </th>
-        </ng-container>
-        <ng-template bitRowDef let-row>
-          <td bitCell>
-            <app-vault-icon [cipher]="row"></app-vault-icon>
-          </td>
-          <td bitCell>
-            <ng-container *ngIf="!organization || canManageCipher(row); else cantManage">
-              <a
-                bitLink
-                href="#"
-                appStopClick
-                (click)="selectCipher(row)"
-                title="{{ 'editItemWithName' | i18n: row.name }}"
-              >
-                {{ row.name }}
-              </a>
-            </ng-container>
-            <ng-template #cantManage>
-              <span>{{ row.name }}</span>
-            </ng-template>
-            <ng-container *ngIf="!organization && row.organizationId">
-              <i
-                class="bwi bwi-collection-shared tw-ml-1"
-                appStopProp
-                title="{{ 'shared' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "shared" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="row.hasAttachments">
-              <i
-                class="bwi bwi-paperclip tw-ml-1"
-                appStopProp
-                title="{{ 'attachments' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
-            </ng-container>
-            <br />
-            <small>{{ row.subTitle }}</small>
-          </td>
-          <td bitCell *ngIf="!isAdminConsoleActive">
-            <app-org-badge
-              *ngIf="!organization"
-              [disabled]="disabled"
-              [organizationId]="row.organizationId"
-              [organizationName]="row.organizationId | orgNameFromId: (organizations$ | async)"
-              appStopProp
-            >
-            </app-org-badge>
-          </td>
-          <td bitCell class="tw-text-right">
-            <span bitBadge variant="warning">
-              {{ "exposedXTimes" | i18n: (row.exposedXTimes | number) }}
-            </span>
-          </td>
-        </ng-template>
-      </bit-table-scroll>
-    </ng-container>
-  </div>
+  @if (hasLoaded) {
+    <div class="tw-mt-4">
+      @if (!ciphers.length) {
+        <bit-callout type="success" title="{{ 'goodNews' | i18n }}">
+          {{ "noExposedPasswords" | i18n }}
+        </bit-callout>
+      }
+      @if (ciphers.length) {
+        <bit-callout
+          type="danger"
+          title="{{ 'exposedPasswordsFound' | i18n }}"
+          [useAlertRole]="true"
+        >
+          {{ "exposedPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
+        </bit-callout>
+        @if (showFilterToggle && !isAdminConsoleActive) {
+          <bit-toggle-group
+            [selected]="filterOrgStatus$ | async"
+            (selectedChange)="filterOrgToggle($event)"
+            [attr.aria-label]="'addAccessFilter' | i18n"
+          >
+            @for (status of filterStatus; track status) {
+              <bit-toggle [value]="status">
+                {{ getName(status) }}
+                <span bitBadge variant="info"> {{ getCount(status) }} </span>
+              </bit-toggle>
+            }
+          </bit-toggle-group>
+        }
+        <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
+          <ng-container header>
+            <th bitCell></th>
+            <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
+            @if (!isAdminConsoleActive) {
+              <th bitCell bitSortable="organizationId">
+                {{ "owner" | i18n }}
+              </th>
+            }
+            <th bitCell class="tw-text-right" bitSortable="exposedXTimes">
+              {{ "timesExposed" | i18n }}
+            </th>
+          </ng-container>
+          <ng-template bitRowDef let-row>
+            <td bitCell>
+              <app-vault-icon [cipher]="row"></app-vault-icon>
+            </td>
+            <td bitCell>
+              @if (!organization || canManageCipher(row)) {
+                <a
+                  bitLink
+                  href="#"
+                  appStopClick
+                  (click)="selectCipher(row)"
+                  title="{{ 'editItemWithName' | i18n: row.name }}"
+                >
+                  {{ row.name }}
+                </a>
+              } @else {
+                <span>{{ row.name }}</span>
+              }
+              @if (!organization && row.organizationId) {
+                <i
+                  class="bwi bwi-collection-shared tw-ml-1"
+                  appStopProp
+                  title="{{ 'shared' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
+              }
+              @if (row.hasAttachments) {
+                <i
+                  class="bwi bwi-paperclip tw-ml-1"
+                  appStopProp
+                  title="{{ 'attachments' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
+              }
+              <br />
+              <small>{{ row.subTitle }}</small>
+            </td>
+            @if (!isAdminConsoleActive) {
+              <td bitCell>
+                @if (!organization) {
+                  <app-org-badge
+                    [disabled]="disabled"
+                    [organizationId]="row.organizationId"
+                    [organizationName]="
+                      row.organizationId | orgNameFromId: (organizations$ | async)
+                    "
+                    appStopProp
+                  >
+                  </app-org-badge>
+                }
+              </td>
+            }
+            <td bitCell class="tw-text-right">
+              <span bitBadge variant="warning">
+                {{ "exposedXTimes" | i18n: (row.exposedXTimes | number) }}
+              </span>
+            </td>
+          </ng-template>
+        </bit-table-scroll>
+      }
+    </div>
+  }
 </bit-container>
diff --git a/apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.html b/apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.html
index 05758a854c2..592d6030f66 100644
--- a/apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.html
+++ b/apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.html
@@ -2,110 +2,125 @@
 
 <bit-container>
   <p>{{ "inactive2faReportDesc" | i18n }}</p>
-  <div *ngIf="!hasLoaded && loading">
-    <i
-      class="bwi bwi-spinner bwi-spin tw-text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-  </div>
-  <div class="tw-mt-4" *ngIf="hasLoaded">
-    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
-      {{ "noInactive2fa" | i18n }}
-    </bit-callout>
-    <ng-container *ngIf="ciphers.length">
-      <bit-callout type="danger" title="{{ 'inactive2faFound' | i18n }}">
-        {{ "inactive2faFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </bit-callout>
-      <bit-toggle-group
-        *ngIf="showFilterToggle && !isAdminConsoleActive"
-        [selected]="filterOrgStatus$ | async"
-        (selectedChange)="filterOrgToggle($event)"
-        [attr.aria-label]="'addAccessFilter' | i18n"
-      >
-        <ng-container *ngFor="let status of filterStatus">
-          <bit-toggle [value]="status">
-            {{ getName(status) }}
-            <span bitBadge variant="info"> {{ getCount(status) }} </span>
-          </bit-toggle>
-        </ng-container>
-      </bit-toggle-group>
-      <bit-table [dataSource]="dataSource">
-        <ng-container header *ngIf="!isAdminConsoleActive">
-          <tr bitRow>
-            <th bitCell></th>
-            <th bitCell>{{ "name" | i18n }}</th>
-            <th bitCell>{{ "owner" | i18n }}</th>
-            <th bitCell></th>
-          </tr>
-        </ng-container>
-        <tbody>
-          <ng-template body let-rows$>
-            <tr bitRow *ngFor="let r of rows$ | async">
-              <td bitCell>
-                <app-vault-icon [cipher]="r"></app-vault-icon>
-              </td>
-              <td bitCell>
-                <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
-                  <a
-                    bitLink
-                    href="#"
-                    appStopClick
-                    (click)="selectCipher(r)"
-                    title="{{ 'editItemWithName' | i18n: r.name }}"
-                    >{{ r.name }}</a
-                  >
-                </ng-container>
-                <ng-template #cantManage>
-                  <span>{{ r.name }}</span>
-                </ng-template>
-                <ng-container *ngIf="!organization && r.organizationId">
-                  <i
-                    class="bwi bwi-collection-shared tw-ml-1"
-                    appStopProp
-                    title="{{ 'shared' | i18n }}"
-                    aria-hidden="true"
-                  ></i>
-                  <span class="tw-sr-only">{{ "shared" | i18n }}</span>
-                </ng-container>
-                <ng-container *ngIf="r.hasAttachments">
-                  <i
-                    class="bwi bwi-paperclip tw-ml-1"
-                    appStopProp
-                    title="{{ 'attachments' | i18n }}"
-                    aria-hidden="true"
-                  ></i>
-                  <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
-                </ng-container>
-                <br />
-                <small>{{ r.subTitle }}</small>
-              </td>
-              <td bitCell>
-                <app-org-badge
-                  *ngIf="!organization"
-                  [disabled]="disabled"
-                  [organizationId]="r.organizationId"
-                  [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
-                  appStopProp
-                >
-                </app-org-badge>
-              </td>
-              <td bitCell class="tw-text-right">
-                <a
-                  bitBadge
-                  href="{{ cipherDocs.get(r.id) }}"
-                  target="_blank"
-                  rel="noreferrer"
-                  *ngIf="cipherDocs.has(r.id)"
-                >
-                  {{ "instructions" | i18n }}</a
-                >
-              </td>
-            </tr>
-          </ng-template>
-        </tbody></bit-table
-      >
-    </ng-container>
-  </div>
+  @if (!hasLoaded && loading) {
+    <div>
+      <i
+        class="bwi bwi-spinner bwi-spin tw-text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    </div>
+  }
+  @if (hasLoaded) {
+    <div class="tw-mt-4">
+      @if (!ciphers.length) {
+        <bit-callout type="success" title="{{ 'goodNews' | i18n }}">
+          {{ "noInactive2fa" | i18n }}
+        </bit-callout>
+      }
+      @if (ciphers.length) {
+        <bit-callout type="danger" title="{{ 'inactive2faFound' | i18n }}">
+          {{ "inactive2faFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
+        </bit-callout>
+        @if (showFilterToggle && !isAdminConsoleActive) {
+          <bit-toggle-group
+            [selected]="filterOrgStatus$ | async"
+            (selectedChange)="filterOrgToggle($event)"
+            [attr.aria-label]="'addAccessFilter' | i18n"
+          >
+            @for (status of filterStatus; track status) {
+              <bit-toggle [value]="status">
+                {{ getName(status) }}
+                <span bitBadge variant="info"> {{ getCount(status) }} </span>
+              </bit-toggle>
+            }
+          </bit-toggle-group>
+        }
+        <bit-table [dataSource]="dataSource">
+          @if (!isAdminConsoleActive) {
+            <ng-container header>
+              <tr bitRow>
+                <th bitCell></th>
+                <th bitCell>{{ "name" | i18n }}</th>
+                <th bitCell>{{ "owner" | i18n }}</th>
+                <th bitCell></th>
+              </tr>
+            </ng-container>
+          }
+          <tbody>
+            <ng-template body let-rows$>
+              <!-- prettier-ignore -->
+              @for (r of (rows$ | async); track r) {
+                <tr bitRow>
+                  <td bitCell>
+                    <app-vault-icon [cipher]="r"></app-vault-icon>
+                  </td>
+                  <td bitCell>
+                    @if (!organization || canManageCipher(r)) {
+                      <a
+                        bitLink
+                        href="#"
+                        appStopClick
+                        (click)="selectCipher(r)"
+                        title="{{ 'editItemWithName' | i18n: r.name }}"
+                        >{{ r.name }}</a
+                      >
+                    } @else {
+                      <span>{{ r.name }}</span>
+                    }
+                    @if (!organization && r.organizationId) {
+                      <i
+                        class="bwi bwi-collection-shared tw-ml-1"
+                        appStopProp
+                        title="{{ 'shared' | i18n }}"
+                        aria-hidden="true"
+                      ></i>
+                      <span class="tw-sr-only">{{ "shared" | i18n }}</span>
+                    }
+                    @if (r.hasAttachments) {
+                      <i
+                        class="bwi bwi-paperclip tw-ml-1"
+                        appStopProp
+                        title="{{ 'attachments' | i18n }}"
+                        aria-hidden="true"
+                      ></i>
+                      <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
+                    }
+                    <br />
+                    <small>{{ r.subTitle }}</small>
+                  </td>
+                  <td bitCell>
+                    @if (!organization) {
+                      <app-org-badge
+                        [disabled]="disabled"
+                        [organizationId]="r.organizationId"
+                        [organizationName]="
+                          r.organizationId | orgNameFromId: (organizations$ | async)
+                        "
+                        appStopProp
+                      >
+                      </app-org-badge>
+                    }
+                  </td>
+                  <td bitCell class="tw-text-right">
+                    @if (cipherDocs.has(r.id)) {
+                      <a
+                        bitBadge
+                        href="{{ cipherDocs.get(r.id) }}"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {{ "instructions" | i18n }}</a
+                      >
+                    }
+                  </td>
+                </tr>
+              }
+            </ng-template>
+          </tbody></bit-table
+        >
+      }
+    </div>
+  }
 </bit-container>
diff --git a/apps/web/src/app/dirt/reports/pages/reused-passwords-report.component.html b/apps/web/src/app/dirt/reports/pages/reused-passwords-report.component.html
index d09dfa81fd4..af6b012d0c9 100644
--- a/apps/web/src/app/dirt/reports/pages/reused-passwords-report.component.html
+++ b/apps/web/src/app/dirt/reports/pages/reused-passwords-report.component.html
@@ -2,100 +2,107 @@
 
 <bit-container>
   <p>{{ "reusedPasswordsReportDesc" | i18n }}</p>
-  <div *ngIf="!hasLoaded && loading">
-    <i
-      class="bwi bwi-spinner bwi-spin tw-text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-  </div>
-  <div class="tw-mt-4" *ngIf="hasLoaded">
-    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
-      {{ "noReusedPasswords" | i18n }}
-    </bit-callout>
-    <ng-container *ngIf="ciphers.length">
-      <bit-callout type="danger" title="{{ 'reusedPasswordsFound' | i18n }}">
-        {{ "reusedPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </bit-callout>
-
-      <bit-toggle-group
-        *ngIf="showFilterToggle && !isAdminConsoleActive"
-        [selected]="filterOrgStatus$ | async"
-        (selectedChange)="filterOrgToggle($event)"
-        [attr.aria-label]="'addAccessFilter' | i18n"
-      >
-        <ng-container *ngFor="let status of filterStatus">
-          <bit-toggle [value]="status">
-            {{ getName(status) }}
-            <span bitBadge variant="info"> {{ getCount(status) }} </span>
-          </bit-toggle>
-        </ng-container>
-      </bit-toggle-group>
-
-      <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
-        <ng-container header *ngIf="!isAdminConsoleActive">
-          <th bitCell></th>
-          <th bitCell>{{ "name" | i18n }}</th>
-          <th bitCell>{{ "owner" | i18n }}</th>
-          <th bitCell class="tw-text-right">{{ "timesReused" | i18n }}</th>
-        </ng-container>
-        <ng-template bitRowDef let-row>
-          <td bitCell>
-            <app-vault-icon [cipher]="row"></app-vault-icon>
-          </td>
-          <td bitCell>
-            <ng-container *ngIf="!organization || canManageCipher(row); else cantManage">
-              <a
-                bitLink
-                href="#"
-                appStopClick
-                (click)="selectCipher(row)"
-                title="{{ 'editItemWithName' | i18n: row.name }}"
-                >{{ row.name }}</a
-              >
+  @if (!hasLoaded && loading) {
+    <div>
+      <i
+        class="bwi bwi-spinner bwi-spin tw-text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    </div>
+  }
+  @if (hasLoaded) {
+    <div class="tw-mt-4">
+      @if (!ciphers.length) {
+        <bit-callout type="success" title="{{ 'goodNews' | i18n }}">
+          {{ "noReusedPasswords" | i18n }}
+        </bit-callout>
+      }
+      @if (ciphers.length) {
+        <bit-callout type="danger" title="{{ 'reusedPasswordsFound' | i18n }}">
+          {{ "reusedPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
+        </bit-callout>
+        @if (showFilterToggle && !isAdminConsoleActive) {
+          <bit-toggle-group
+            [selected]="filterOrgStatus$ | async"
+            (selectedChange)="filterOrgToggle($event)"
+            [attr.aria-label]="'addAccessFilter' | i18n"
+          >
+            @for (status of filterStatus; track status) {
+              <bit-toggle [value]="status">
+                {{ getName(status) }}
+                <span bitBadge variant="info"> {{ getCount(status) }} </span>
+              </bit-toggle>
+            }
+          </bit-toggle-group>
+        }
+        <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
+          @if (!isAdminConsoleActive) {
+            <ng-container header>
+              <th bitCell></th>
+              <th bitCell>{{ "name" | i18n }}</th>
+              <th bitCell>{{ "owner" | i18n }}</th>
+              <th bitCell class="tw-text-right">{{ "timesReused" | i18n }}</th>
             </ng-container>
-            <ng-template #cantManage>
-              <span>{{ row.name }}</span>
-            </ng-template>
-            <ng-container *ngIf="!organization && row.organizationId">
-              <i
-                class="bwi bwi-collection-shared tw-ml-1"
-                appStopProp
-                title="{{ 'shared' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "shared" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="row.hasAttachments">
-              <i
-                class="bwi bwi-paperclip tw-ml-1"
-                appStopProp
-                title="{{ 'attachments' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
-            </ng-container>
-            <br />
-            <small>{{ row.subTitle }}</small>
-          </td>
-          <td bitCell>
-            <app-org-badge
-              *ngIf="!organization"
-              [disabled]="disabled"
-              [organizationId]="row.organizationId"
-              [organizationName]="row.organizationId | orgNameFromId: (organizations$ | async)"
-              appStopProp
-            >
-            </app-org-badge>
-          </td>
-          <td bitCell class="tw-text-right">
-            <span bitBadge variant="warning">
-              {{ "reusedXTimes" | i18n: passwordUseMap.get(row.login.password) }}
-            </span>
-          </td>
-        </ng-template>
-      </bit-table-scroll>
-    </ng-container>
-  </div>
+          }
+          <ng-template bitRowDef let-row>
+            <td bitCell>
+              <app-vault-icon [cipher]="row"></app-vault-icon>
+            </td>
+            <td bitCell>
+              @if (!organization || canManageCipher(row)) {
+                <a
+                  bitLink
+                  href="#"
+                  appStopClick
+                  (click)="selectCipher(row)"
+                  title="{{ 'editItemWithName' | i18n: row.name }}"
+                  >{{ row.name }}</a
+                >
+              } @else {
+                <span>{{ row.name }}</span>
+              }
+              @if (!organization && row.organizationId) {
+                <i
+                  class="bwi bwi-collection-shared tw-ml-1"
+                  appStopProp
+                  title="{{ 'shared' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
+              }
+              @if (row.hasAttachments) {
+                <i
+                  class="bwi bwi-paperclip tw-ml-1"
+                  appStopProp
+                  title="{{ 'attachments' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
+              }
+              <br />
+              <small>{{ row.subTitle }}</small>
+            </td>
+            <td bitCell>
+              @if (!organization) {
+                <app-org-badge
+                  [disabled]="disabled"
+                  [organizationId]="row.organizationId"
+                  [organizationName]="row.organizationId | orgNameFromId: (organizations$ | async)"
+                  appStopProp
+                >
+                </app-org-badge>
+              }
+            </td>
+            <td bitCell class="tw-text-right">
+              <span bitBadge variant="warning">
+                {{ "reusedXTimes" | i18n: passwordUseMap.get(row.login.password) }}
+              </span>
+            </td>
+          </ng-template>
+        </bit-table-scroll>
+      }
+    </div>
+  }
 </bit-container>
diff --git a/apps/web/src/app/dirt/reports/pages/unsecured-websites-report.component.html b/apps/web/src/app/dirt/reports/pages/unsecured-websites-report.component.html
index 5dd11b59999..1b2652d6258 100644
--- a/apps/web/src/app/dirt/reports/pages/unsecured-websites-report.component.html
+++ b/apps/web/src/app/dirt/reports/pages/unsecured-websites-report.component.html
@@ -2,98 +2,111 @@
 
 <bit-container>
   <p>{{ "unsecuredWebsitesReportDesc" | i18n }}</p>
-  <div *ngIf="!hasLoaded && loading">
-    <i
-      class="bwi bwi-spinner bwi-spin tw-text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-  </div>
-  <div class="tw-mt-4" *ngIf="hasLoaded">
-    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
-      {{ "noUnsecuredWebsites" | i18n }}
-    </bit-callout>
-    <ng-container *ngIf="ciphers.length">
-      <bit-callout type="danger" title="{{ 'unsecuredWebsitesFound' | i18n }}">
-        {{ "unsecuredWebsitesFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </bit-callout>
-
-      <bit-toggle-group
-        *ngIf="showFilterToggle && !isAdminConsoleActive"
-        [selected]="filterOrgStatus$ | async"
-        (selectedChange)="filterOrgToggle($event)"
-        [attr.aria-label]="'addAccessFilter' | i18n"
-      >
-        <ng-container *ngFor="let status of filterStatus">
-          <bit-toggle [value]="status">
-            {{ getName(status) }}
-            <span bitBadge variant="info"> {{ getCount(status) }} </span>
-          </bit-toggle>
-        </ng-container>
-      </bit-toggle-group>
-      <bit-table [dataSource]="dataSource">
-        <ng-container header *ngIf="!isAdminConsoleActive">
-          <tr bitRow>
-            <th bitCell></th>
-            <th bitCell>{{ "name" | i18n }}</th>
-            <th bitCell>{{ "owner" | i18n }}</th>
-            <th bitCell></th>
-          </tr>
-        </ng-container>
-        <ng-template body let-rows$>
-          <tr bitRow *ngFor="let r of rows$ | async">
-            <td bitCell>
-              <app-vault-icon [cipher]="r"></app-vault-icon>
-            </td>
-            <td bitCell>
-              <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
-                <a
-                  bitLink
-                  href="#"
-                  appStopClick
-                  (click)="selectCipher(r)"
-                  title="{{ 'editItemWithName' | i18n: r.name }}"
-                  >{{ r.name }}</a
-                >
-              </ng-container>
-              <ng-template #cantManage>
-                <span>{{ r.name }}</span>
-              </ng-template>
-              <ng-container *ngIf="!organization && r.organizationId">
-                <i
-                  class="bwi bwi-collection-shared tw-ml-1"
-                  appStopProp
-                  title="{{ 'shared' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
-              </ng-container>
-              <ng-container *ngIf="r.hasAttachments">
-                <i
-                  class="bwi bwi-paperclip tw-ml-1"
-                  appStopProp
-                  title="{{ 'attachments' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
-              </ng-container>
-              <br />
-              <small>{{ r.subTitle }}</small>
-            </td>
-            <td bitCell>
-              <app-org-badge
-                *ngIf="!organization"
-                [disabled]="disabled"
-                [organizationId]="r.organizationId"
-                [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
-                appStopProp
-              >
-              </app-org-badge>
-            </td>
-          </tr>
-        </ng-template>
-      </bit-table>
-    </ng-container>
-  </div>
+  @if (!hasLoaded && loading) {
+    <div>
+      <i
+        class="bwi bwi-spinner bwi-spin tw-text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    </div>
+  }
+  @if (hasLoaded) {
+    <div class="tw-mt-4">
+      @if (!ciphers.length) {
+        <bit-callout type="success" title="{{ 'goodNews' | i18n }}">
+          {{ "noUnsecuredWebsites" | i18n }}
+        </bit-callout>
+      }
+      @if (ciphers.length) {
+        <bit-callout type="danger" title="{{ 'unsecuredWebsitesFound' | i18n }}">
+          {{ "unsecuredWebsitesFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
+        </bit-callout>
+        @if (showFilterToggle && !isAdminConsoleActive) {
+          <bit-toggle-group
+            [selected]="filterOrgStatus$ | async"
+            (selectedChange)="filterOrgToggle($event)"
+            [attr.aria-label]="'addAccessFilter' | i18n"
+          >
+            @for (status of filterStatus; track status) {
+              <bit-toggle [value]="status">
+                {{ getName(status) }}
+                <span bitBadge variant="info"> {{ getCount(status) }} </span>
+              </bit-toggle>
+            }
+          </bit-toggle-group>
+        }
+        <bit-table [dataSource]="dataSource">
+          @if (!isAdminConsoleActive) {
+            <ng-container header>
+              <tr bitRow>
+                <th bitCell></th>
+                <th bitCell>{{ "name" | i18n }}</th>
+                <th bitCell>{{ "owner" | i18n }}</th>
+                <th bitCell></th>
+              </tr>
+            </ng-container>
+          }
+          <ng-template body let-rows$>
+            <!-- prettier-ignore -->
+            @for (r of (rows$ | async); track r) {
+              <tr bitRow>
+                <td bitCell>
+                  <app-vault-icon [cipher]="r"></app-vault-icon>
+                </td>
+                <td bitCell>
+                  @if (!organization || canManageCipher(r)) {
+                    <a
+                      bitLink
+                      href="#"
+                      appStopClick
+                      (click)="selectCipher(r)"
+                      title="{{ 'editItemWithName' | i18n: r.name }}"
+                      >{{ r.name }}</a
+                    >
+                  } @else {
+                    <span>{{ r.name }}</span>
+                  }
+                  @if (!organization && r.organizationId) {
+                    <i
+                      class="bwi bwi-collection-shared tw-ml-1"
+                      appStopProp
+                      title="{{ 'shared' | i18n }}"
+                      aria-hidden="true"
+                    ></i>
+                    <span class="tw-sr-only">{{ "shared" | i18n }}</span>
+                  }
+                  @if (r.hasAttachments) {
+                    <i
+                      class="bwi bwi-paperclip tw-ml-1"
+                      appStopProp
+                      title="{{ 'attachments' | i18n }}"
+                      aria-hidden="true"
+                    ></i>
+                    <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
+                  }
+                  <br />
+                  <small>{{ r.subTitle }}</small>
+                </td>
+                <td bitCell>
+                  @if (!organization) {
+                    <app-org-badge
+                      [disabled]="disabled"
+                      [organizationId]="r.organizationId"
+                      [organizationName]="
+                        r.organizationId | orgNameFromId: (organizations$ | async)
+                      "
+                      appStopProp
+                    >
+                    </app-org-badge>
+                  }
+                </td>
+              </tr>
+            }
+          </ng-template>
+        </bit-table>
+      }
+    </div>
+  }
 </bit-container>
diff --git a/apps/web/src/app/dirt/reports/pages/weak-passwords-report.component.html b/apps/web/src/app/dirt/reports/pages/weak-passwords-report.component.html
index 92d56c1c7a3..b16a9bc2bdc 100644
--- a/apps/web/src/app/dirt/reports/pages/weak-passwords-report.component.html
+++ b/apps/web/src/app/dirt/reports/pages/weak-passwords-report.component.html
@@ -2,102 +2,115 @@
 
 <bit-container>
   <p>{{ "weakPasswordsReportDesc" | i18n }}</p>
-  <div *ngIf="!hasLoaded && loading">
-    <i
-      class="bwi bwi-spinner bwi-spin tw-text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-  </div>
-  <div class="tw-mt-4" *ngIf="hasLoaded">
-    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
-      {{ "noWeakPasswords" | i18n }}
-    </bit-callout>
-    <ng-container *ngIf="ciphers.length">
-      <bit-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
-        {{ "weakPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </bit-callout>
-      <bit-toggle-group
-        *ngIf="showFilterToggle && !isAdminConsoleActive"
-        [selected]="filterOrgStatus$ | async"
-        (selectedChange)="filterOrgToggle($event)"
-        [attr.aria-label]="'addAccessFilter' | i18n"
-      >
-        <ng-container *ngFor="let status of filterStatus">
-          <bit-toggle [value]="status">
-            {{ getName(status) }}
-            <span bitBadge variant="info"> {{ getCount(status) }} </span>
-          </bit-toggle>
-        </ng-container>
-      </bit-toggle-group>
-      <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
-        <ng-container header>
-          <th bitCell></th>
-          <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
-          <th bitCell bitSortable="organizationId" *ngIf="!isAdminConsoleActive">
-            {{ "owner" | i18n }}
-          </th>
-          <th bitCell class="tw-text-right" bitSortable="scoreKey" default>
-            {{ "weakness" | i18n }}
-          </th>
-        </ng-container>
-        <ng-template bitRowDef let-row>
-          <td bitCell>
-            <app-vault-icon [cipher]="row"></app-vault-icon>
-          </td>
-          <td bitCell>
-            <ng-container *ngIf="!organization || canManageCipher(row); else cantManage">
-              <a
-                bitLink
-                href="#"
-                appStopClick
-                (click)="selectCipher(row)"
-                title="{{ 'editItemWithName' | i18n: row.name }}"
-                >{{ row.name }}</a
-              >
-            </ng-container>
-            <ng-template #cantManage>
-              <span>{{ row.name }}</span>
-            </ng-template>
-            <ng-container *ngIf="!organization && row.organizationId">
-              <i
-                class="bwi bwi-collection-shared tw-ml-1"
-                appStopProp
-                title="{{ 'shared' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "shared" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="row.hasAttachments">
-              <i
-                class="bwi bwi-paperclip tw-ml-1"
-                appStopProp
-                title="{{ 'attachments' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
-            </ng-container>
-            <br />
-            <small>{{ row.subTitle }}</small>
-          </td>
-          <td bitCell *ngIf="!isAdminConsoleActive">
-            <app-org-badge
-              *ngIf="!organization"
-              [disabled]="disabled"
-              [organizationId]="row.organizationId"
-              [organizationName]="row.organizationId | orgNameFromId: (organizations$ | async)"
-              appStopProp
-            >
-            </app-org-badge>
-          </td>
-          <td bitCell class="tw-text-right">
-            <span bitBadge [variant]="row.reportValue.badgeVariant">
-              {{ row.reportValue.label | i18n }}
-            </span>
-          </td>
-        </ng-template>
-      </bit-table-scroll>
-    </ng-container>
-  </div>
+  @if (!hasLoaded && loading) {
+    <div>
+      <i
+        class="bwi bwi-spinner bwi-spin tw-text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    </div>
+  }
+  @if (hasLoaded) {
+    <div class="tw-mt-4">
+      @if (!ciphers.length) {
+        <bit-callout type="success" title="{{ 'goodNews' | i18n }}">
+          {{ "noWeakPasswords" | i18n }}
+        </bit-callout>
+      }
+      @if (ciphers.length) {
+        <bit-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
+          {{ "weakPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
+        </bit-callout>
+        @if (showFilterToggle && !isAdminConsoleActive) {
+          <bit-toggle-group
+            [selected]="filterOrgStatus$ | async"
+            (selectedChange)="filterOrgToggle($event)"
+            [attr.aria-label]="'addAccessFilter' | i18n"
+          >
+            @for (status of filterStatus; track status) {
+              <bit-toggle [value]="status">
+                {{ getName(status) }}
+                <span bitBadge variant="info"> {{ getCount(status) }} </span>
+              </bit-toggle>
+            }
+          </bit-toggle-group>
+        }
+        <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
+          <ng-container header>
+            <th bitCell></th>
+            <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
+            @if (!isAdminConsoleActive) {
+              <th bitCell bitSortable="organizationId">
+                {{ "owner" | i18n }}
+              </th>
+            }
+            <th bitCell class="tw-text-right" bitSortable="scoreKey" default>
+              {{ "weakness" | i18n }}
+            </th>
+          </ng-container>
+          <ng-template bitRowDef let-row>
+            <td bitCell>
+              <app-vault-icon [cipher]="row"></app-vault-icon>
+            </td>
+            <td bitCell>
+              @if (!organization || canManageCipher(row)) {
+                <a
+                  bitLink
+                  href="#"
+                  appStopClick
+                  (click)="selectCipher(row)"
+                  title="{{ 'editItemWithName' | i18n: row.name }}"
+                  >{{ row.name }}</a
+                >
+              } @else {
+                <span>{{ row.name }}</span>
+              }
+              @if (!organization && row.organizationId) {
+                <i
+                  class="bwi bwi-collection-shared tw-ml-1"
+                  appStopProp
+                  title="{{ 'shared' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
+              }
+              @if (row.hasAttachments) {
+                <i
+                  class="bwi bwi-paperclip tw-ml-1"
+                  appStopProp
+                  title="{{ 'attachments' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
+              }
+              <br />
+              <small>{{ row.subTitle }}</small>
+            </td>
+            @if (!isAdminConsoleActive) {
+              <td bitCell>
+                @if (!organization) {
+                  <app-org-badge
+                    [disabled]="disabled"
+                    [organizationId]="row.organizationId"
+                    [organizationName]="
+                      row.organizationId | orgNameFromId: (organizations$ | async)
+                    "
+                    appStopProp
+                  >
+                  </app-org-badge>
+                }
+              </td>
+            }
+            <td bitCell class="tw-text-right">
+              <span bitBadge [variant]="row.reportValue.badgeVariant">
+                {{ row.reportValue.label | i18n }}
+              </span>
+            </td>
+          </ng-template>
+        </bit-table-scroll>
+      }
+    </div>
+  }
 </bit-container>
diff --git a/apps/web/src/app/dirt/reports/reports-layout.component.html b/apps/web/src/app/dirt/reports/reports-layout.component.html
index a27556a7aa9..0cb5d304a34 100644
--- a/apps/web/src/app/dirt/reports/reports-layout.component.html
+++ b/apps/web/src/app/dirt/reports/reports-layout.component.html
@@ -2,8 +2,10 @@
 
 <div class="tw-flex tw-flex-wrap tw-gap-4 tw-mt-4">
   <div class="tw-w-full">
-    <a bitButton routerLink="./" *ngIf="!homepage">
-      {{ "backToReports" | i18n }}
-    </a>
+    @if (!homepage) {
+      <a bitButton routerLink="./">
+        {{ "backToReports" | i18n }}
+      </a>
+    }
   </div>
 </div>
diff --git a/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.html b/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.html
index 2a03bf78dd4..bba57882027 100644
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.html
+++ b/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.html
@@ -1,13 +1,15 @@
 <div
   class="tw-inline-grid tw-place-items-stretch tw-place-content-center tw-grid-cols-1 @xl:tw-grid-cols-2 @4xl:tw-grid-cols-3 tw-gap-4 [&_a]:tw-max-w-none @5xl:[&_a]:tw-max-w-72"
 >
-  <div *ngFor="let report of reports">
-    <app-report-card
-      [title]="report.title | i18n"
-      [description]="report.description | i18n"
-      [route]="report.route"
-      [variant]="report.variant"
-      [icon]="report.icon"
-    ></app-report-card>
-  </div>
+  @for (report of reports; track report) {
+    <div>
+      <app-report-card
+        [title]="report.title | i18n"
+        [description]="report.description | i18n"
+        [route]="report.route"
+        [variant]="report.variant"
+        [icon]="report.icon"
+      ></app-report-card>
+    </div>
+  }
 </div>