diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index 735a5fd8f6d45195e7bff8d9eee6718465375669..2aebc3392d2bca4416308a8bb02b3777af651abe 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -27,7 +27,7 @@
     </cse-alert-container>
     <h2 class="mat-h1">Completed Audit Requests</h2>
 
-    <div id="dars-header-bar">
+    <div class="dars-header-bar">
       <div>
         <h3 class="mat-h2">Degree Audit</h3>
         <p class="mat-body">See the progress towards your current program of study and degree plans.</p>
@@ -37,7 +37,7 @@
       </div>
     </div>
 
-    <ng-container [ngSwitch]="metadataStatus$ | async">
+    <div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
       <ng-container *ngSwitchCase="'Error'">
         <h2 style="color:red">error loading metadata</h2>
       </ng-container>
@@ -45,8 +45,41 @@
         <h2>loading metadata</h2>
       </ng-container>
       <ng-container *ngSwitchCase="'Loaded'">
-        <cse-dars-metadata-table></cse-dars-metadata-table>
+        <cse-dars-metadata-table
+          [metadata]="programMetadata$ | async"
+          (openAudit)="openAudit($event)">
+        </cse-dars-metadata-table>
       </ng-container>
-    </ng-container>
+    </div>
+
+    <div class="dars-header-bar">
+      <div>
+        <h3 class="mat-h2">&lsquo;What if&rsquo; Audit</h3>
+        <p class="mat-body">See the progress towards a new program of study and degree plans.</p>
+      </div>
+      <div>
+        <button
+          mat-raised-button
+          aria-label="Run new degree audit"
+          color="primary">
+          Run new &lsquo;what if&rsquo; audit
+        </button>
+      </div>
+    </div>
+
+    <div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
+      <ng-container *ngSwitchCase="'Error'">
+        <h2 style="color:red">error loading metadata</h2>
+      </ng-container>
+      <ng-container *ngSwitchCase="'Loading'">
+        <h2>loading metadata</h2>
+      </ng-container>
+      <ng-container *ngSwitchCase="'Loaded'">
+        <cse-dars-metadata-table
+          [metadata]="whatIfMetadata$ | async"
+          (openAudit)="openAudit($event)">
+        </cse-dars-metadata-table>
+      </ng-container>
+    </div>
   </div>
 </mat-sidenav-container>
diff --git a/src/app/dars/dars-view/dars-view.component.scss b/src/app/dars/dars-view/dars-view.component.scss
index ea8be920fec5a943d8536961770340b9ec864819..34e3b6c08b22a5efbd0c8666dcbd20da81b93887 100644
--- a/src/app/dars/dars-view/dars-view.component.scss
+++ b/src/app/dars/dars-view/dars-view.component.scss
@@ -49,7 +49,8 @@
   }
 }
 
-#dars-header-bar {
+.dars-header-bar {
+  margin-top: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
diff --git a/src/app/dars/dars-view/dars-view.component.ts b/src/app/dars/dars-view/dars-view.component.ts
index 74b1103b588f951a27a71df3948cf8e4e9ea9936..d5e79c90f0c984f87990e0ce8ba5f1dfdef151b3 100644
--- a/src/app/dars/dars-view/dars-view.component.ts
+++ b/src/app/dars/dars-view/dars-view.component.ts
@@ -19,6 +19,8 @@ import { Alert } from '@app/core/models/alert';
 })
 export class DARSViewComponent implements OnInit {
   public metadataStatus$: Observable<DARSState['metadata']['status']>;
+  public programMetadata$: Observable<AuditMetadata[]>;
+  public whatIfMetadata$: Observable<AuditMetadata[]>;
   public visibleAuditStatus$: Observable<DARSState['visibleAudit']['status']>;
   public audit$: Observable<Audit | null>;
   public alerts$: Observable<Alert[]>;
@@ -32,6 +34,8 @@ export class DARSViewComponent implements OnInit {
   public ngOnInit() {
     this.store.dispatch(new darsActions.StartLoadingMetadata());
     this.metadataStatus$ = this.store.select(selectors.metadataStatus);
+    this.programMetadata$ = this.store.select(selectors.programMetadata);
+    this.whatIfMetadata$ = this.store.select(selectors.whatIfMetadata);
     this.visibleAuditStatus$ = this.store.select(selectors.visibleAuditStatus);
     // this.audit$ = this.store.select(selectors.visibleAudit);
     this.audit$ = this.api.getAudit(3);
diff --git a/src/app/dars/metadata-table/metadata-table.component.html b/src/app/dars/metadata-table/metadata-table.component.html
index 0863cb35f699f04f2eb6159d29f687fe432b8e54..b92d77a73b131ff5c06088961ccbe1c649c3381b 100644
--- a/src/app/dars/metadata-table/metadata-table.component.html
+++ b/src/app/dars/metadata-table/metadata-table.component.html
@@ -1,11 +1,11 @@
 <div id="audits">
-  <table class="audit-table" mat-table [dataSource]="programMetadata$">
+  <table class="audit-table" mat-table [dataSource]="metadata">
 
     <!-- View Column -->
     <ng-container matColumnDef="view">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let audit">
-        <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="openAudit(audit)">View</button>
+        <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="openAudit.emit(audit)">View</button>
       </td>
     </ng-container>
 
@@ -56,72 +56,4 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-
-  <div style="text-align: center">
-    <button mat-stroked-button color="primary" style="margin: 20px auto; padding: 0 30px">Load More</button>
-  </div>
-</div>
-
-<div id="what-if-audits">
-  <table class="audit-table" mat-table [dataSource]="whatIfMetadata$">
-
-    <!-- View Column -->
-    <ng-container matColumnDef="view">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let audit">
-        <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="openAudit(audit)">View</button>
-      </td>
-    </ng-container>
-
-    <!-- School Column -->
-    <ng-container matColumnDef="school">
-      <th mat-header-cell *matHeaderCellDef>Plan/Program</th>
-      <td mat-cell *matCellDef="let audit"><em>???</em></td>
-    </ng-container>
-
-    <!-- Program Column -->
-    <ng-container matColumnDef="program">
-      <th mat-header-cell *matHeaderCellDef>Program of Study</th>
-      <td mat-cell *matCellDef="let audit">{{audit.darsDegreeProgramCode}}</td>
-    </ng-container>
-
-    <!-- Honors Column -->
-    <ng-container matColumnDef="honors">
-      <th mat-header-cell *matHeaderCellDef>Honors Status</th>
-      <td mat-cell *matCellDef="let audit">{{audit.darsHonorsOptionDescription}}</td>
-    </ng-container>
-
-    <!-- Plan Column -->
-    <ng-container matColumnDef="plan">
-      <th mat-header-cell *matHeaderCellDef>Degree Plan</th>
-      <td mat-cell *matCellDef="let audit">{{audit.degreePlannerPlanName}}</td>
-    </ng-container>
-
-    <!-- Status Column -->
-    <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef>Status</th>
-      <td mat-cell *matCellDef="let audit">
-        <div>{{audit.darsStatusOfDegreeAuditRequest}}</div>
-        <div>Run {{audit.darsAuditRunDate | date:'short'}}</div>
-      </td>
-    </ng-container>
-
-    <!-- Status Column -->
-    <ng-container matColumnDef="download">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let audit">
-        <button mat-raised-button>
-          <mat-icon>vertical_align_bottom</mat-icon>
-        </button>
-      </td>
-    </ng-container>
-
-    <!-- Row definition -->
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
-
-  <div style="text-align: center">
-    <button mat-stroked-button color="primary" style="margin: 20px auto; padding: 0 30px">Load More</button>
-  </div>
 </div>
diff --git a/src/app/dars/metadata-table/metadata-table.component.ts b/src/app/dars/metadata-table/metadata-table.component.ts
index a4136dfc4053abf7ee28860b91173837271bae33..3436b5ee5a68d0cf577d7f0f665e45dfc1d43e0d 100644
--- a/src/app/dars/metadata-table/metadata-table.component.ts
+++ b/src/app/dars/metadata-table/metadata-table.component.ts
@@ -1,20 +1,15 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { AuditMetadata } from '../models/audit-metadata';
-import { Store } from '@ngrx/store';
-import { GlobalState } from '@app/core/state';
-import * as selectors from '../store/selectors';
-import { StartLoadingAudit } from '../store/actions';
 
 @Component({
   selector: 'cse-dars-metadata-table',
   templateUrl: './metadata-table.component.html',
   styleUrls: ['./metadata-table.component.scss'],
 })
-export class DarsMetadataTableComponent implements OnInit {
-  public metadata$: Observable<AuditMetadata[]>;
-  public programMetadata$: Observable<AuditMetadata[]>;
-  public whatIfMetadata$: Observable<AuditMetadata[]>;
+export class DarsMetadataTableComponent {
+  @Input() public metadata: AuditMetadata[];
+  @Output() public openAudit = new EventEmitter<AuditMetadata>();
+
   public displayedColumns = [
     'view',
     'school',
@@ -24,15 +19,4 @@ export class DarsMetadataTableComponent implements OnInit {
     'status',
     'download',
   ];
-
-  constructor(private store: Store<GlobalState>) {}
-
-  public ngOnInit() {
-    this.programMetadata$ = this.store.select(selectors.programMetadata);
-    this.whatIfMetadata$ = this.store.select(selectors.whatIfMetadata);
-  }
-
-  public openAudit(metadata: AuditMetadata) {
-    this.store.dispatch(new StartLoadingAudit(metadata));
-  }
 }