diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index a62cb633ced7554d7fdb8f0175a2de5554ce509e..49eca23573e3875916c1baac87f735239aa78edb 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -1,6 +1,6 @@
 <mat-sidenav-container id="plans-container">
 	<!-- Menu side nav -->
-	<mat-sidenav #rightSideNav position="end" mode="side" [opened]="true" disableClose>
+	<mat-sidenav #rightSideNav position="end" [mode]="mobileView.matches ? 'over' : 'side'" [opened]="mobileView.matches ? false : true">
 		<cse-sidenav-menu-item [favoriteDropZone]="getTermDropZone()" [subjectsMap]="subjectsMap"></cse-sidenav-menu-item>
 	</mat-sidenav>
 
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index c0e614f2d016c2879baa65a3c9619744869257b9..6f6d25ead2f6beef8526ed7a4b0e360caa6286cd 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -5,6 +5,7 @@ import { DegreePlan } from '../core/models/degree-plan';
 import { Term } from '../core/models/term';
 import { log } from 'util';
 import { Note } from '../core/models/note';
+import { MediaMatcher } from '@angular/cdk/layout';
 
 @Component({
 	selector: 'cse-degree-planner',
@@ -21,10 +22,12 @@ export class DegreePlannerComponent {
 	subjectsMap: Object;
 	notes: Note[];
 	firstCurrentTerm: null|string;
+	mobileView: MediaQueryList;
 
 
-	constructor(private dataService: DataService) {
+	constructor(private dataService: DataService, public mediaMatcher: MediaMatcher) {
 		this.firstCurrentTerm = null;
+		this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
 
 		this.dataService.getDegreePlans()
 		.subscribe(plans => {
diff --git a/src/app/shared/course-details/course-details.component.html b/src/app/shared/course-details/course-details.component.html
index 7d7c9d7f0de5469da0acce5d40a2d0aa41421f2c..cf07238ddd4911e61046629a2fff0cb297ab2740 100644
--- a/src/app/shared/course-details/course-details.component.html
+++ b/src/app/shared/course-details/course-details.component.html
@@ -4,12 +4,11 @@
 			<div fxFlex="50" class="course-detail-title" fxLayoutAlign="start center">
 				<h3>{{ courseDetails.fullCourseDesignation | titlecase }}<span class="course-detail-subtitle">{{ courseDetails.title }}</span></h3>
 			</div>
-			<div fxFlex="50" fxLayout="row" fxLayoutAlign="end start" >
+			<!-- <div fxFlex="50" fxLayout="row" fxLayoutAlign="end start" >
 				<mat-dialog-actions>
-					<button mat-button class="btn-secondary" mat-dialog-close>Delete</button>
 					<button mat-raised-button class="btn-primary mat-button">See Sections</button>
 				</mat-dialog-actions>
-			</div>
+			</div> -->
 		</div>
 	</div>
 
@@ -59,10 +58,10 @@
 	</div>
 
 	<div class="course-details-footer">
-		<p class="semi-bold">{{ courseDetails.subject.description | titlecase }} Information:</p>
+		<p class="semi-bold course-detail-title">{{ courseDetails.subject.description | titlecase }} Information:</p>
 		<div fxLayout="row">
 			<div fxLayout="row" fxFlex="100" fxLayoutGap="10px">
-				<div fxFlex="100" class="course-detail-title" fxLayoutAlign="start center">
+				<div fxFlex="100" fxLayout.lt-sm="column" class="mat-dialog-actions" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="start start">
 					<a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.departmentURI }}">Website</a>
 					<a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.undergraduateCatalogURI }}">Undergraduate Info</a>
 					<a class="md-primary btn-link mat-button" href="{{ courseDetails.subject.graduateCatalogURI }}">Graduate Info</a>
diff --git a/src/app/shared/course-details/course-details.component.scss b/src/app/shared/course-details/course-details.component.scss
index c7ef3853d393c41c0ea29b2bdd428fdec402d66b..4c427f727a1878a74f7e4d2c2a1c81651e19c9dc 100644
--- a/src/app/shared/course-details/course-details.component.scss
+++ b/src/app/shared/course-details/course-details.component.scss
@@ -1,6 +1,9 @@
 @import 'assets/material-theme.scss';
 
 #course-details-content {
+    .course-details-content {
+        word-break: break-word;
+    }
     .courseDetails-list {
         margin-bottom: 20px;
         list-style: none;
@@ -44,4 +47,13 @@
             padding-bottom: 0px;
         }
     }
+}
+
+@media screen and (max-width: 605px) {
+    .course-details-footer {
+        .mat-dialog-actions a {
+            padding-left: 0px;
+            margin-left: 0px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index 0700810908d782e8aed02db9c34fa93e44f93a7c..3434a39a6bf00c2a25263ef3424ec0d62dd2237e 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -170,4 +170,12 @@ body {
     .mat-dialog-container {
         min-width: 100%;
     }
+}
+
+@media screen and (max-width: 957px) {
+    .mat-dialog-container {
+        .dialog-with-toolbar {
+            padding-top: 20px;
+        }
+    }
 }
\ No newline at end of file