diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index aeed23819a1fcfc5283189f539186bf14678d74e..3b02cb5dcca86e7b2b8ddef3dfa22537ee67c1b1 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -51,7 +51,24 @@
 </div>
 
 <div *ngIf="mobileView.matches">
-  <mat-card class="mat-card-mobile">
+
+  <!-- METADATA LOADING -->
+  <mat-card class="dars-view-loading" *ngIf="(metadataStatus$ | async) === 'Loading' || (metadataStatus$ | async) === 'NotLoaded'">
+      <mat-progress-bar class="card-top-spinner" mode="indeterminate"></mat-progress-bar>
+      <h2>Loading your DARS audits</h2>
+      <p>Hang tight</p>
+    </mat-card>
+    <!-- END METADATA LOADING -->
+
+    <!-- METADATA ERROR -->
+    <mat-card class="dars-view-error" *ngIf="(metadataStatus$ | async) === 'Error'">
+      <img class="bucky-image" src="../../../assets/img/bucky-dead.svg" alt="Error Bucky Badger">
+      <h2>Error loading DARS audits</h2>
+      <p>Try again in a bit</p>
+    </mat-card>
+    <!-- END METADATA ERROR -->
+
+  <mat-card class="mat-card-mobile" *ngIf="(metadataStatus$ | async) === 'Loaded'">
       <mat-card-header>
         <mat-card-title>Degree Audit (DARS)</mat-card-title>
       </mat-card-header>
diff --git a/src/app/dars/dars-view/dars-view.component.scss b/src/app/dars/dars-view/dars-view.component.scss
index 69a205b36e8717c0054a5338585113f071ef2747..adcead06a31e0f7b0c40801476a5cee60d8c9c74 100644
--- a/src/app/dars/dars-view/dars-view.component.scss
+++ b/src/app/dars/dars-view/dars-view.component.scss
@@ -137,3 +137,10 @@ button {
   border-radius: 4px 4px 0 0;
   background-color: #c5050b;
 }
+
+// To be removed after DARS banner goes away
+@media screen and (max-width: 1249px) {
+  #dars-container {
+    margin-top: 2.5em;
+  }
+}