diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index dca25324829a26df39a5d2ac37bdbdc00645ccd6..735a5fd8f6d45195e7bff8d9eee6718465375669 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -21,7 +21,10 @@
 
   <!-- Main DARS Content -->
   <div id="dars-main">
-    <cse-alert-container></cse-alert-container>
+    <cse-alert-container
+      [alerts]="alerts$ | async"
+      (dismiss)="onDismissAlert($event)">
+    </cse-alert-container>
     <h2 class="mat-h1">Completed Audit Requests</h2>
 
     <div id="dars-header-bar">
diff --git a/src/app/dars/dars-view/dars-view.component.ts b/src/app/dars/dars-view/dars-view.component.ts
index d3ea00e4dec4600ae7f4fd1ce852b2c5eb28e4ea..74b1103b588f951a27a71df3948cf8e4e9ea9936 100644
--- a/src/app/dars/dars-view/dars-view.component.ts
+++ b/src/app/dars/dars-view/dars-view.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AuditMetadata } from '../models/audit-metadata';
 import { MatDialog } from '@angular/material';
 import { NewAuditOptionsComponent } from '../new-audit-options/new-audit-options.component';
@@ -10,6 +10,7 @@ import { Observable } from 'rxjs';
 import * as darsActions from '../store/actions';
 import { Audit } from '../models/audit';
 import { DarsApiService } from '../services/api.service';
+import { Alert } from '@app/core/models/alert';
 
 @Component({
   selector: 'cse-dars-view',
@@ -20,6 +21,7 @@ export class DARSViewComponent implements OnInit {
   public metadataStatus$: Observable<DARSState['metadata']['status']>;
   public visibleAuditStatus$: Observable<DARSState['visibleAudit']['status']>;
   public audit$: Observable<Audit | null>;
+  public alerts$: Observable<Alert[]>;
 
   constructor(
     private store: Store<GlobalState>,
@@ -33,6 +35,11 @@ export class DARSViewComponent implements OnInit {
     this.visibleAuditStatus$ = this.store.select(selectors.visibleAuditStatus);
     // this.audit$ = this.store.select(selectors.visibleAudit);
     this.audit$ = this.api.getAudit(3);
+    this.alerts$ = this.store.select(selectors.alerts);
+  }
+
+  public onDismissAlert(key: string) {
+    this.store.dispatch(new darsActions.DismissAlert({ key }));
   }
 
   public openNewAuditOptionsDialog() {
diff --git a/src/app/dars/store/actions.ts b/src/app/dars/store/actions.ts
index 83aba03482191d54a1dcf9f9a8158786971f6c1b..b7aed378a3b66bb697a3ae5cc017b89da41a17c5 100644
--- a/src/app/dars/store/actions.ts
+++ b/src/app/dars/store/actions.ts
@@ -15,6 +15,8 @@ export enum DarsActionTypes {
   CloseAudit = '[DARS] Close Audit',
 
   PopulateDarsState = '[DARS] Done Loading state',
+
+  DismissAlert = '[DARS] Dismiss Alert',
 }
 
 export class ErrorLoadingMetadata implements Action {
@@ -64,3 +66,8 @@ export class DoneLoadingAudit implements Action {
 export class CloseAudit implements Action {
   public readonly type = DarsActionTypes.CloseAudit;
 }
+
+export class DismissAlert implements Action {
+  public readonly type = DarsActionTypes.DismissAlert;
+  constructor(public payload: { key: string }) {}
+}
diff --git a/src/app/dars/store/reducer.ts b/src/app/dars/store/reducer.ts
index 57cdf97de556058be825bf2b444f14c03e628e00..a64bef467106e584ede281248f31513df69eec5a 100644
--- a/src/app/dars/store/reducer.ts
+++ b/src/app/dars/store/reducer.ts
@@ -8,7 +8,8 @@ type SupportedActions =
   | darsActions.PopulateDarsState
   | darsActions.StartLoadingAudit
   | darsActions.DoneLoadingAudit
-  | darsActions.CloseAudit;
+  | darsActions.CloseAudit
+  | darsActions.DismissAlert;
 
 export function darsReducer(
   state = INITIAL_DARS_STATE,
@@ -72,6 +73,14 @@ export function darsReducer(
         visibleAudit: { status: 'NotLoaded' },
       };
     }
+    case DarsActionTypes.DismissAlert: {
+      return {
+        ...state,
+        alerts: state.alerts.filter(({ key }) => {
+          return key !== action.payload.key;
+        }),
+      };
+    }
     default:
       return state;
   }
diff --git a/src/app/dars/store/selectors.ts b/src/app/dars/store/selectors.ts
index a164fb01753f01c25b919117fd458bc4e40d4d64..37792d138d8f90e1ac90e465a4a144b524cffe6f 100644
--- a/src/app/dars/store/selectors.ts
+++ b/src/app/dars/store/selectors.ts
@@ -6,6 +6,11 @@ export const getDARSState = ({ dars }: GlobalState) => {
   return dars;
 };
 
+export const alerts = createSelector(
+  getDARSState,
+  (state: DARSState) => state.alerts,
+);
+
 export const metadataStatus = createSelector(
   getDARSState,
   (state: DARSState) => state.metadata.status,
diff --git a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
index e01a5cf0e0ac48ad3dd4d5b79f0b8a85fe182ff7..202cba5bb85f5be5af21905160af700c11a86f32 100644
--- a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
+++ b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
@@ -9,7 +9,10 @@
         [ngClass]="{ isLoadingPlan: isLoadingPlan$ | async }"
         *ngIf="(degreePlan$ | async) as degreePlan">
 
-        <cse-alert-container></cse-alert-container>
+        <cse-alert-container
+          [alerts]="alerts$ | async"
+          (dismiss)="onDismissAlert($event)">
+        </cse-alert-container>
 
         <div
           id="maincontent"
diff --git a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts
index e25a8e1d2aa18a08986c3e095472726df139b26f..11f25f791214714831f2303f170601589d840337 100644
--- a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts
+++ b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts
@@ -42,7 +42,8 @@ import { ConstantsService } from '../services/constants.service';
 import { TermCodeFactory } from '../services/termcode.factory';
 import { IE11WarningDialogComponent } from '../dialogs/ie11-warning-dialog/ie11-warning-dialog.component';
 import { getUserPreference } from '@app/core/selectors';
-import { UpdateUserPreferences } from '@app/core/actions';
+import { UpdateUserPreferences, DismissAlert } from '@app/core/actions';
+import { Alert } from '@app/core/models/alert';
 
 // From: https://stackoverflow.com/a/21825207
 const isIE11 =
@@ -67,6 +68,7 @@ export class DegreePlannerViewComponent implements OnInit {
   public isSidenavOpen$: Observable<boolean>;
   public hasDismissedIEWarning$: Observable<boolean>;
   public version: string;
+  public alerts$: Observable<Alert[]>;
 
   constructor(
     private store: Store<GlobalState>,
@@ -140,6 +142,12 @@ export class DegreePlannerViewComponent implements OnInit {
           });
       }
     });
+
+    this.alerts$ = this.store.select(selectors.alerts);
+  }
+
+  public onDismissAlert(key: string) {
+    this.store.dispatch(new DismissAlert({ key }));
   }
 
   public openSidenav() {
diff --git a/src/app/degree-planner/store/selectors.ts b/src/app/degree-planner/store/selectors.ts
index 677134e17ddc03f8856569d3747dc4e5ad5f5c92..1bc4729fcc717c327e7c5b2e08bc38587b71079b 100644
--- a/src/app/degree-planner/store/selectors.ts
+++ b/src/app/degree-planner/store/selectors.ts
@@ -90,11 +90,9 @@ export const getActiveSelectedSearchTerm = createSelector(
   },
 );
 
-export const getAlerts = createSelector(
+export const alerts = createSelector(
   getDegreePlannerState,
-  (state: DegreePlannerState) => {
-    return state.alerts;
-  },
+  (state: DegreePlannerState) => state.alerts,
 );
 
 export const isLoadingPlan = createSelector(
diff --git a/src/app/shared/components/alert-container/alert-container.component.html b/src/app/shared/components/alert-container/alert-container.component.html
index 242aca4271f8a87d1c56e1fbf04488168a87a888..939d8197e22af9710e511b836828beaa9d2b4ea0 100644
--- a/src/app/shared/components/alert-container/alert-container.component.html
+++ b/src/app/shared/components/alert-container/alert-container.component.html
@@ -1,5 +1,5 @@
 <div class="cse-alert-container">
-  <div *ngFor="let alert of (alerts$ | async)" class="cse-alert">
+  <div *ngFor="let alert of alerts" class="cse-alert">
     <div class="alert-icon">
       <mat-icon>warning</mat-icon>
     </div>
diff --git a/src/app/shared/components/alert-container/alert-container.component.ts b/src/app/shared/components/alert-container/alert-container.component.ts
index 53ed03145bc516fd8fd4efce96395edb9370a4a7..0a1e1d6b27dfb6ea97c00258f03824308a4a70ed 100644
--- a/src/app/shared/components/alert-container/alert-container.component.ts
+++ b/src/app/shared/components/alert-container/alert-container.component.ts
@@ -1,10 +1,5 @@
-import { Component } from '@angular/core';
-import { Store, select } from '@ngrx/store';
-import { GlobalState } from '@app/core/state';
-import * as selectors from '@app/degree-planner/store/selectors';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Alert } from '@app/core/models/alert';
-import { Observable } from 'rxjs';
-import { DismissAlert } from '@app/core/actions';
 
 @Component({
   selector: 'cse-alert-container',
@@ -12,14 +7,11 @@ import { DismissAlert } from '@app/core/actions';
   styleUrls: ['./alert-container.component.scss'],
 })
 export class AlertContainerComponent {
-  public alerts$: Observable<Alert[]>;
-
-  constructor(private store: Store<GlobalState>) {
-    this.alerts$ = store.pipe(select(selectors.getAlerts));
-  }
+  @Input() public alerts: Alert[];
+  @Output() public dismiss = new EventEmitter<string>();
 
   public dismissAlert(key: string, callback?: () => void) {
-    this.store.dispatch(new DismissAlert({ key }));
+    this.dismiss.emit(key);
     if (typeof callback === 'function') {
       callback();
     }