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 5d97eb9753a9caae5f24fc16357534da485b45c2..2f06f3bbbc4e02dd03891ddb435a6b45db103d8c 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
@@ -34,7 +34,7 @@
         </mat-menu>
       </div>
       <div *ngIf="disabled" fxLayout="row" fxLayoutAlign="end center">
-        <p>{{ course.grade }}</p>
+        <p>{{ course.grade || '&nbsp;' }}</p>
       </div>
       <div fxLayout="row" fxLayoutAlign="end center">
         <p class="course-credits">{{ course.credits ? course.credits : course.creditRange }} Cr</p>
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 67254758e9b4624a15b87b0682e5456fec7e037f..baeba29bed21b54791c55f5f636aad31295190c1 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
@@ -53,6 +53,12 @@
   display: inline-block;
 }
 
+.material-icons {
+  padding-top: 0;
+  position: relative;
+  top: 1px;
+}
+
 .course-number {
   font-weight: bold;
   font-size: 16px;