diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index 2fa3e899d1a66e5297009c9bf51c943aa693f340..9dc6c4aa02e199dcf9714a46d233ed4d0c358254 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -102,7 +102,7 @@
           style="margin:24px 24px 72px 24px">
           <div id="year-mask" *ngIf="(isLoadingPlan$ | async)"></div>
           <div id="plan-controls">
-            <div>
+            <div id="grades-toggle-wrapper">
                 <mat-slide-toggle 
                   color="primary" 
                   labelPosition="before" 
diff --git a/src/app/degree-planner/degree-planner.component.scss b/src/app/degree-planner/degree-planner.component.scss
index 88ec14249faabdf0eaf3e9c7228e340625804aac..7053d9ca1331e95675ca22ae447b933a73f003f9 100644
--- a/src/app/degree-planner/degree-planner.component.scss
+++ b/src/app/degree-planner/degree-planner.component.scss
@@ -121,3 +121,14 @@ mat-sidenav {
 .expand-collapse {
   color: map-get($uw-primary, 500);
 }
+
+@media screen and (max-width: 960px) {
+  #plan-controls {
+    display: block;
+    text-align: right;
+  }
+
+  #grades-toggle-wrapper {
+    display: none;
+  }
+}