diff --git a/src/app/degree-planner/shared/course-item/course-item.component.html b/src/app/degree-planner/shared/course-item/course-item.component.html
index b79a214093510e1c93610dd5739107e405d9ee3f..dc56524c58a09bf5680b4001d00886f01ebea6c7 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.html
+++ b/src/app/degree-planner/shared/course-item/course-item.component.html
@@ -1,5 +1,5 @@
 <div
-  class="course-item {{ disabled ? 'disabled' : '' }} {{ status | lowercase }}"
+  class="course-item {{ disabled ? 'disabled' : '' }} {{ status }}"
   isFocusable="true"
   isTabbable="true"
   tabindex="0"
@@ -53,6 +53,14 @@
               matTooltipPosition="above">
               error
             </i>
+            <i
+              *ngSwitchCase="'NoLongerOffered'"
+              class="material-icons not-offered-icon"
+              alt="Course no longer offered icon"
+              matTooltip="Course no longer offered"
+              matTooltipPosition="above">
+              remove
+            </i>
           </span>
         </div>
       </div>
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.scss b/src/app/degree-planner/shared/course-item/course-item.component.scss
index c2b0623d0dabed43f7334411f6752edaacf6d5f2..e2abfb53d01528e00ec4db038c043e5c086b5a9e 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.scss
+++ b/src/app/degree-planner/shared/course-item/course-item.component.scss
@@ -16,7 +16,8 @@
   transition: border-color 0.25s ease, box-shadow 0.25s ease;
   cursor: pointer;
 
-  &.notofferedinterm {
+  &.NotOfferedInTerm,
+  &.NoLongerOffered {
     border-color: map-get($uw-accent, 600);
   }
 
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.ts b/src/app/degree-planner/shared/course-item/course-item.component.ts
index db78b9814e42c5ee56610866e48aa9b9b152f241..9b5da77ab4832cc63bdf5e3b8e6db1d59135e291 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.ts
+++ b/src/app/degree-planner/shared/course-item/course-item.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog, MatSnackBar } from '@angular/material';
 import { Store, select } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import * as utils from '@app/degree-planner/shared/utils';
@@ -58,6 +58,7 @@ export class CourseItemComponent implements OnInit {
     public dialog: MatDialog,
     private store: Store<GlobalState>,
     private constants: ConstantsService,
+    private snackBar: MatSnackBar,
   ) {}
 
   ngOnInit() {
@@ -84,6 +85,8 @@ export class CourseItemComponent implements OnInit {
       this.status = 'InProgress';
     } else if (isNotOffered) {
       this.status = 'NotOfferedInTerm';
+    } else if (isNoLongerOffered) {
+      this.status = 'NoLongerOffered';
     } else {
       this.status = 'Normal';
     }
@@ -316,7 +319,13 @@ export class CourseItemComponent implements OnInit {
   }
 
   openCourseDetailsDialog() {
-    const { subjectCode, courseId } = this.course;
+    const { subjectCode, courseId, catalogNumber } = this.course;
+    if (this.course.studentEnrollmentStatus === 'DOESNOTEXIST') {
+      const { short } = this.constants.subjectDescription(subjectCode);
+      this.snackBar.open(`'${short} ${catalogNumber}' no longer offered`);
+      return;
+    }
+
     this.api
       .getCourseDetails(subjectCode, courseId)
       .subscribe(courseDetails => {