diff --git a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.ts b/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.ts
index cf91d6e9537..a879e91a501 100644
--- a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.ts
+++ b/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.ts
@@ -11,7 +11,6 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { CipherReportComponent } from "./cipher-report.component";
-import { cipherData } from "./reports-ciphers.mock";
 
 @Component({
   selector: "app-exposed-passwords-report",
@@ -45,8 +44,7 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
   }
 
   async setCiphers() {
-    const allCiphers = cipherData;
-    // const allCiphers = await this.getAllCiphers();
+    const allCiphers = await this.getAllCiphers();
     this.dataSource.data = allCiphers;
     const exposedPasswordCiphers: CipherView[] = [];
     const promises: Promise<void>[] = [];
diff --git a/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html b/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
index ae03a3bcb80..a47d6fc60b9 100644
--- a/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
@@ -11,13 +11,13 @@
     <span class="sr-only">{{ "loading" | i18n }}</span>
   </div>
   <div class="mt-4" *ngIf="hasLoaded">
-    <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
+    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noInactive2fa" | i18n }}
-    </app-callout>
+    </bit-callout>
     <ng-container *ngIf="ciphers.length">
-      <app-callout type="danger" title="{{ 'inactive2faFound' | i18n }}">
+      <bit-callout type="danger" title="{{ 'inactive2faFound' | i18n }}">
         {{ "inactive2faFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </app-callout>
+      </bit-callout>
       <bit-toggle-group
         *ngIf="showFilterToggle && !isAdminConsoleActive"
         [selected]="filterOrgStatus$ | async"
@@ -31,71 +31,74 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <table class="table table-hover table-list table-ciphers">
-        <thead
-          class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-bold tw-text-muted"
-          *ngIf="!isAdminConsoleActive"
-        >
+      <bit-table [dataSource]="dataSource">
+        <ng-container header *ngIf="!isAdminConsoleActive">
           <tr>
             <th></th>
             <th>{{ "name" | i18n }}</th>
             <th>{{ "owner" | i18n }}</th>
           </tr>
-        </thead>
+        </ng-container>
         <tbody>
-          <tr *ngFor="let c of ciphers">
-            <td class="table-list-icon">
-              <app-vault-icon [cipher]="c"></app-vault-icon>
-            </td>
-            <td class="reduced-lh wrap">
-              <a href="#" appStopClick (click)="selectCipher(c)" title="{{ 'editItem' | i18n }}">{{
-                c.name
-              }}</a>
-              <ng-container *ngIf="!organization && c.organizationId">
-                <i
-                  class="bwi bwi-collection"
+          <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 class="reduced-lh wrap">
+                <a
+                  href="#"
+                  appStopClick
+                  (click)="selectCipher(r)"
+                  title="{{ 'editItem' | i18n }}"
+                  >{{ r.name }}</a
+                >
+                <ng-container *ngIf="!organization && r.organizationId">
+                  <i
+                    class="bwi bwi-collection"
+                    appStopProp
+                    title="{{ 'shared' | i18n }}"
+                    aria-hidden="true"
+                  ></i>
+                  <span class="sr-only">{{ "shared" | i18n }}</span>
+                </ng-container>
+                <ng-container *ngIf="r.hasAttachments">
+                  <i
+                    class="bwi bwi-paperclip"
+                    appStopProp
+                    title="{{ 'attachments' | i18n }}"
+                    aria-hidden="true"
+                  ></i>
+                  <span class="sr-only">{{ "attachments" | i18n }}</span>
+                </ng-container>
+                <br />
+                <small>{{ r.subTitle }}</small>
+              </td>
+              <td>
+                <app-org-badge
+                  *ngIf="!organization"
+                  [disabled]="disabled"
+                  [organizationId]="r.organizationId"
+                  [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
                   appStopProp
-                  title="{{ 'shared' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="sr-only">{{ "shared" | i18n }}</span>
-              </ng-container>
-              <ng-container *ngIf="c.hasAttachments">
-                <i
-                  class="bwi bwi-paperclip"
-                  appStopProp
-                  title="{{ 'attachments' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="sr-only">{{ "attachments" | i18n }}</span>
-              </ng-container>
-              <br />
-              <small>{{ c.subTitle }}</small>
-            </td>
-            <td>
-              <app-org-badge
-                *ngIf="!organization"
-                [disabled]="disabled"
-                [organizationId]="c.organizationId"
-                [organizationName]="c.organizationId | orgNameFromId: (organizations$ | async)"
-                appStopProp
-              >
-              </app-org-badge>
-            </td>
-            <td class="text-right">
-              <a
-                bitBadge
-                href="{{ cipherDocs.get(c.id) }}"
-                target="_blank"
-                rel="noreferrer"
-                *ngIf="cipherDocs.has(c.id)"
-              >
-                {{ "instructions" | i18n }}</a
-              >
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                >
+                </app-org-badge>
+              </td>
+              <td class="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>
   <ng-template #cipherAddEdit></ng-template>
diff --git a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
index 549773ba8ce..8887702b3d8 100644
--- a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
@@ -11,13 +11,13 @@
     <span class="sr-only">{{ "loading" | i18n }}</span>
   </div>
   <div class="mt-4" *ngIf="hasLoaded">
-    <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
+    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noReusedPasswords" | i18n }}
-    </app-callout>
+    </bit-callout>
     <ng-container *ngIf="ciphers.length">
-      <app-callout type="danger" title="{{ 'reusedPasswordsFound' | i18n }}">
+      <bit-callout type="danger" title="{{ 'reusedPasswordsFound' | i18n }}">
         {{ "reusedPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </app-callout>
+      </bit-callout>
 
       <bit-toggle-group
         *ngIf="showFilterToggle && !isAdminConsoleActive"
@@ -33,36 +33,33 @@
         </ng-container>
       </bit-toggle-group>
 
-      <table class="table table-hover table-list table-ciphers">
-        <thead
-          class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-bold tw-text-muted"
-          *ngIf="!isAdminConsoleActive"
-        >
+      <bit-table [dataSource]="dataSource">
+        <ng-container header *ngIf="!isAdminConsoleActive">
           <tr>
             <th></th>
             <th>{{ "name" | i18n }}</th>
             <th>{{ "owner" | i18n }}</th>
           </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let c of ciphers">
-            <td class="table-list-icon">
-              <app-vault-icon [cipher]="c"></app-vault-icon>
+        </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 class="reduced-lh wrap">
-              <ng-container *ngIf="!organization || canManageCipher(c); else cantManage">
+            <td>
+              <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
                 <a
                   href="#"
                   appStopClick
-                  (click)="selectCipher(c)"
+                  (click)="selectCipher(r)"
                   title="{{ 'editItem' | i18n }}"
-                  >{{ c.name }}</a
+                  >{{ r.name }}</a
                 >
               </ng-container>
               <ng-template #cantManage>
-                <span>{{ c.name }}</span>
+                <span>{{ r.name }}</span>
               </ng-template>
-              <ng-container *ngIf="!organization && c.organizationId">
+              <ng-container *ngIf="!organization && r.organizationId">
                 <i
                   class="bwi bwi-collection"
                   appStopProp
@@ -71,7 +68,7 @@
                 ></i>
                 <span class="sr-only">{{ "shared" | i18n }}</span>
               </ng-container>
-              <ng-container *ngIf="c.hasAttachments">
+              <ng-container *ngIf="r.hasAttachments">
                 <i
                   class="bwi bwi-paperclip"
                   appStopProp
@@ -81,26 +78,26 @@
                 <span class="sr-only">{{ "attachments" | i18n }}</span>
               </ng-container>
               <br />
-              <small>{{ c.subTitle }}</small>
+              <small>{{ r.subTitle }}</small>
             </td>
             <td>
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"
-                [organizationId]="c.organizationId"
-                [organizationName]="c.organizationId | orgNameFromId: (organizations$ | async)"
+                [organizationId]="r.organizationId"
+                [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
                 appStopProp
               >
               </app-org-badge>
             </td>
             <td class="text-right">
               <span bitBadge variant="warning">
-                {{ "reusedXTimes" | i18n: passwordUseMap.get(c.login.password) }}
+                {{ "reusedXTimes" | i18n: passwordUseMap.get(r.login.password) }}
               </span>
             </td>
           </tr>
-        </tbody>
-      </table>
+        </ng-template>
+      </bit-table>
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>
diff --git a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.ts b/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.ts
index 70cb2ed69b3..6adda2a032d 100644
--- a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.ts
+++ b/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.ts
@@ -43,6 +43,7 @@ export class ReusedPasswordsReportComponent extends CipherReportComponent implem
 
   async setCiphers() {
     const allCiphers = await this.getAllCiphers();
+
     const ciphersWithPasswords: CipherView[] = [];
     this.passwordUseMap = new Map<string, number>();
     this.filterStatus = [0];
diff --git a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html
index a943c8c29ec..ab116743478 100644
--- a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html
@@ -11,13 +11,13 @@
     <span class="sr-only">{{ "loading" | i18n }}</span>
   </div>
   <div class="mt-4" *ngIf="hasLoaded">
-    <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
+    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noWeakPasswords" | i18n }}
-    </app-callout>
+    </bit-callout>
     <ng-container *ngIf="ciphers.length">
-      <app-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
+      <bit-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
         {{ "weakPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </app-callout>
+      </bit-callout>
       <bit-toggle-group
         *ngIf="showFilterToggle && !isAdminConsoleActive"
         [selected]="filterOrgStatus$ | async"
@@ -31,36 +31,33 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <table class="table table-hover table-list table-ciphers">
-        <thead
-          class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-bold tw-text-muted"
-          *ngIf="!isAdminConsoleActive"
-        >
+      <bit-table [dataSource]="dataSource">
+        <ng-container header *ngIf="!isAdminConsoleActive">
           <tr>
             <th></th>
             <th>{{ "name" | i18n }}</th>
             <th>{{ "owner" | i18n }}</th>
           </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let c of ciphers">
-            <td class="table-list-icon">
-              <app-vault-icon [cipher]="c"></app-vault-icon>
+        </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 class="reduced-lh wrap">
-              <ng-container *ngIf="!organization || canManageCipher(c); else cantManage">
+              <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
                 <a
                   href="#"
                   appStopClick
-                  (click)="selectCipher(c)"
+                  (click)="selectCipher(r)"
                   title="{{ 'editItem' | i18n }}"
-                  >{{ c.name }}</a
+                  >{{ r.name }}</a
                 >
               </ng-container>
               <ng-template #cantManage>
-                <span>{{ c.name }}</span>
+                <span>{{ r.name }}</span>
               </ng-template>
-              <ng-container *ngIf="!organization && c.organizationId">
+              <ng-container *ngIf="!organization && r.organizationId">
                 <i
                   class="bwi bwi-collection"
                   appStopProp
@@ -69,7 +66,7 @@
                 ></i>
                 <span class="sr-only">{{ "shared" | i18n }}</span>
               </ng-container>
-              <ng-container *ngIf="c.hasAttachments">
+              <ng-container *ngIf="r.hasAttachments">
                 <i
                   class="bwi bwi-paperclip"
                   appStopProp
@@ -79,26 +76,26 @@
                 <span class="sr-only">{{ "attachments" | i18n }}</span>
               </ng-container>
               <br />
-              <small>{{ c.subTitle }}</small>
+              <small>{{ r.subTitle }}</small>
             </td>
             <td>
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"
-                [organizationId]="c.organizationId"
-                [organizationName]="c.organizationId | orgNameFromId: (organizations$ | async)"
+                [organizationId]="r.organizationId"
+                [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
                 appStopProp
               >
               </app-org-badge>
             </td>
             <td class="text-right">
-              <span bitBadge [variant]="passwordStrengthMap.get(c.id)[1]">
-                {{ passwordStrengthMap.get(c.id)[0] | i18n }}
+              <span bitBadge [variant]="passwordStrengthMap.get(r.id)[1]">
+                {{ passwordStrengthMap.get(r.id)[0] | i18n }}
               </span>
             </td>
           </tr>
-        </tbody>
-      </table>
+        </ng-template>
+      </bit-table>
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>
diff --git a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.ts b/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.ts
index f33e0626abb..239357682f1 100644
--- a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.ts
+++ b/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.ts
@@ -49,7 +49,7 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
   }
 
   async setCiphers() {
-    const allCiphers: any = await this.getAllCiphers();
+    const allCiphers = await this.getAllCiphers();
     this.passwordStrengthCache = new Map<string, number>();
     this.weakPasswordCiphers = [];
     this.filterStatus = [0];