diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index 87796ef8b73ed8a9651a355dd492dd0dbcd31374..6aec034b5c00b82c04daad38058073064f841c50 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -1,4 +1,4 @@
-<mat-sidenav-container id="plans-container">
+<mat-sidenav-container id="plans-container" *ngIf="hasLoadedDegreePlan$ | async">
 	<!-- Menu side nav -->
 	<mat-sidenav #rightMenu position="end" [mode]="mobileView.matches ? 'over' : 'side'" [opened]="mobileView.matches ? false : true">
 		<cse-sidenav-menu-item></cse-sidenav-menu-item>
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index 6dc3a5f38a610efbb266c42df5c8dd20048b8922..ebfa23d9d0d868f073a1ac043f93270b83b3731b 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -20,6 +20,7 @@ import {
   firstActiveTermCode,
   getAllVisibleTermsByYear,
   getVisibleDegreePlan,
+  hasLoadedDegreePlan,
 } from '@app/degree-planner/store/selectors';
 
 // Actions
@@ -40,6 +41,7 @@ export class DegreePlannerComponent implements OnInit {
   public mobileView: MediaQueryList;
   public coursesData$: any;
 
+  public hasLoadedDegreePlan$: Observable<boolean>;
   public visibleRoadmapId$: Observable<number | undefined>;
   public visibleDegreePlan$: Observable<DegreePlan | undefined>;
   public allDegreePlans$: Observable<DegreePlan[]>;
@@ -55,6 +57,7 @@ export class DegreePlannerComponent implements OnInit {
   }
 
   public ngOnInit() {
+    this.hasLoadedDegreePlan$ = this.store.pipe(select(hasLoadedDegreePlan));
     this.visibleRoadmapId$ = this.store.pipe(select(getVisibleRoadmapId));
     this.visibleDegreePlan$ = this.store.pipe(select(getVisibleDegreePlan));
     this.allDegreePlans$ = this.store.pipe(select(getAllDegreePlans));
diff --git a/src/app/degree-planner/store/selectors.ts b/src/app/degree-planner/store/selectors.ts
index 67ba809f35b11388913fbe9ac8c9b69b835fe3ff..0ff6c63842368ce7b1ab4e9ddb329a762ab032cb 100644
--- a/src/app/degree-planner/store/selectors.ts
+++ b/src/app/degree-planner/store/selectors.ts
@@ -13,6 +13,11 @@ export const getDegreePlannerState = ({ degreePlanner }: GlobalState) => {
   return degreePlanner;
 };
 
+export const hasLoadedDegreePlan = createSelector(
+  getDegreePlannerState,
+  state => state.visibleDegreePlan !== undefined,
+);
+
 export const getSavedForLaterCourses = createSelector(
   getDegreePlannerState,
   state => state.savedForLaterCourses,