diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index 1b4c3928c2195eb10d695fbc74667e1e5eef7082..91f0a5bc750302b5b77f43b10a1350f2ef56cb98 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -14,7 +14,7 @@
 
 <mat-sidenav-container id="plans-container">
 
-	<mat-sidenav #sidenav position="end" mode="side" [fixedTopGap]="500" opened disableClose>
+	<mat-sidenav #sidenav position="end" mode="side" disableClose>
 		<app-sidenav-menu-item></app-sidenav-menu-item>
 	</mat-sidenav>
 
@@ -35,6 +35,7 @@
 				<i *ngIf="!sidenav.opened" class="material-icons">chevron_left</i>
 			</button></div>
 		</div>
+
 		<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
 
 		<mat-accordion>
diff --git a/src/app/degree-planner/degree-planner.component.scss b/src/app/degree-planner/degree-planner.component.scss
index 7097a1435580145d1598b94c60b89ca683ecb687..41545d8ea0929088b2726253f6418627eeafb14a 100644
--- a/src/app/degree-planner/degree-planner.component.scss
+++ b/src/app/degree-planner/degree-planner.component.scss
@@ -19,4 +19,11 @@ mat-sidenav {
     border-radius: 50% 0 0 50%;
     padding: 8px;
     background-color: #F0F0F0;
+}
+
+@media screen and (max-width: 600px) {
+    #menu-toggle-btn {
+        border-radius: 50%;
+        padding: 12px;
+    }
 }
\ No newline at end of file