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 912f14d9790016276966baeccb67c2970ae8d963..549acd966934796feef2552d950907db935e6638 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
@@ -65,6 +65,7 @@
     <div fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
       <div *ngIf="!disabled" fxLayout="row" fxLayoutAlign="end center">
         <button
+          class="course-item-menu-button"
           mat-icon-button
           aria-label="Open course menu"
           [matMenuTriggerFor]="courseMenu"
@@ -73,9 +74,9 @@
             aria-label="Course menu"
             alt="Course menu icon"
             matTooltip="Course menu"
-            matTooltipPosition="right"
-            class="material-icons"
-            >more_horiz</mat-icon>
+            matTooltipPosition="right">
+            more_horiz
+          </mat-icon>
         </button>
         <mat-menu
           #courseMenu="matMenu"
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 1ce5f2e5e7af6416667023bdc81bc8a7778c2aea..f56604a414ecbc016d2ad805b9b806dadf8a37e6 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
@@ -58,6 +58,12 @@
   display: inline-block;
 }
 
+.course-item-menu-button {
+  width: 24px;
+  height: 24px;
+  line-height: 20px;
+}
+
 .material-icons {
   padding-top: 0;
   position: relative;