diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index 8de331c6db2cac4682bb9a8fac8ba78484cbb025..8f67efee88d00d1dcd64f9cc7485c05dd15c148b 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -32,14 +32,16 @@
             </div>
         </div>
 
-        <div *ngIf="(metadataStatus$ | async) == 'Loaded'; then loadedMetadata else loadingMetadata"></div>
-
-        <ng-template #loadedMetadata>
-            <cse-dars-metadata-table></cse-dars-metadata-table>
-        </ng-template>
-
-        <ng-template #loadingMetadata>
-            <h2>loading metadata</h2>
-        </ng-template>
+        <ng-container [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></cse-dars-metadata-table>
+            </ng-container>
+        </ng-container>
     </div>
 </mat-sidenav-container>
diff --git a/src/app/dars/store/actions.ts b/src/app/dars/store/actions.ts
index 2be78bf0e42fbb617629827992efcd61820c6f61..6124756085fab68a6ead1ea0387081404d0c1527 100644
--- a/src/app/dars/store/actions.ts
+++ b/src/app/dars/store/actions.ts
@@ -3,17 +3,29 @@ import { AuditMetadata } from '../models/audit-metadata';
 import { Audit } from '../models/audit';
 
 export enum DarsActionTypes {
+  ErrorLoadingMetadata = '[DARS] Error Loading Metadata',
   StartLoadingMetadata = '[DARS] Start Loading Metadata',
+  ErrorLoadingAudit = '[DARS] Error Loading Audit',
   AddAuditMetadata = '[DARS] Add Audit Metadata',
   StartLoadingAudit = '[DARS] Start Loading Audit',
   DoneLoadingAudit = '[DARS] Done Loading Audit',
   CloseAudit = '[DARS] Close Audit',
 }
 
+export class ErrorLoadingMetadata implements Action {
+  public readonly type = DarsActionTypes.ErrorLoadingMetadata;
+  constructor(public payload: { message: string }) {}
+}
+
 export class StartLoadingMetadata implements Action {
   public readonly type = DarsActionTypes.StartLoadingMetadata;
 }
 
+export class ErrorLoadingAudit implements Action {
+  public readonly type = DarsActionTypes.ErrorLoadingAudit;
+  constructor(public payload: { message: string }) {}
+}
+
 export class AddAuditMetadata implements Action {
   public readonly type = DarsActionTypes.AddAuditMetadata;
   constructor(public payload: { metadata: AuditMetadata[] }) {}
diff --git a/src/app/dars/store/effects.ts b/src/app/dars/store/effects.ts
index 4c0a3aabc87bed3b330bee6556e97a38e67e5943..150fe2a6ed5a69218da29ca8e3c738c23532b2c5 100644
--- a/src/app/dars/store/effects.ts
+++ b/src/app/dars/store/effects.ts
@@ -1,8 +1,10 @@
 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
-import { DarsActionTypes, AddAuditMetadata } from '@app/dars/store/actions';
-import { flatMap, map } from 'rxjs/operators';
+import { DarsActionTypes } from '@app/dars/store/actions';
+import * as darsActions from '@app/dars/store/actions';
+import { flatMap, map, catchError } from 'rxjs/operators';
 import { DarsApiService } from '../services/api.service';
+import { of } from 'rxjs';
 
 @Injectable()
 export class DARSEffects {
@@ -12,6 +14,13 @@ export class DARSEffects {
   load$ = this.actions$.pipe(
     ofType(DarsActionTypes.StartLoadingMetadata),
     flatMap(() => this.api.getAudits()),
-    map(metadata => new AddAuditMetadata({ metadata })),
+    map(metadata => new darsActions.AddAuditMetadata({ metadata })),
+    catchError(() => {
+      return of(
+        new darsActions.ErrorLoadingMetadata({
+          message: 'Unable to load audit metadata. Please try again',
+        }),
+      );
+    }),
   );
 }
diff --git a/src/app/dars/store/reducer.ts b/src/app/dars/store/reducer.ts
index 702d31a77ee72f962b72539648bd0226aa10e240..bbb811d3c7f683ccc8a9c952c75a37534efaab14 100644
--- a/src/app/dars/store/reducer.ts
+++ b/src/app/dars/store/reducer.ts
@@ -3,6 +3,7 @@ import { DarsActionTypes } from './actions';
 import * as darsActions from './actions';
 
 type SupportedActions =
+  | darsActions.ErrorLoadingMetadata
   | darsActions.AddAuditMetadata
   | darsActions.StartLoadingAudit
   | darsActions.DoneLoadingAudit
@@ -13,6 +14,15 @@ export function darsReducer(
   action: SupportedActions,
 ): DARSState {
   switch (action.type) {
+    case DarsActionTypes.ErrorLoadingMetadata: {
+      return {
+        ...state,
+        metadata: {
+          status: 'Error',
+          message: action.payload.message,
+        },
+      };
+    }
     case DarsActionTypes.AddAuditMetadata: {
       if (state.metadata.status === 'Loaded') {
         return {
diff --git a/src/app/dars/store/state.ts b/src/app/dars/store/state.ts
index 7a1632e323587d590da66e41cd695c80a3bf31dd..8986599668d48cb06443c516afa6d91489e44f93 100644
--- a/src/app/dars/store/state.ts
+++ b/src/app/dars/store/state.ts
@@ -3,9 +3,11 @@ import { Audit } from '../models/audit';
 
 export interface DARSState {
   metadata:
+    | { status: 'Error'; message: string }
     | { status: 'Loading' }
     | { status: 'Loaded'; metadata: AuditMetadata[] };
   visibleAudit:
+    | { status: 'Error'; message: string }
     | { status: 'NotLoaded' }
     | { status: 'Loading'; metadata: AuditMetadata }
     | { status: 'Loaded'; metadata: AuditMetadata; audit: Audit };