diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index b361933fdfd830d7f1725515aeb9440a7b3b29fe..87796ef8b73ed8a9651a355dd492dd0dbcd31374 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -32,8 +32,12 @@
 				<mat-icon>settings</mat-icon>
 			</button>
 			<mat-menu #degreePlanMenu="matMenu">
-				<button mat-menu-item (click)="onRenamePlanClick()">Rename plan</button>
-				<button mat-menu-item (click)="onPrintPlanClick()">Print plan</button>
+        <button mat-menu-item (click)="onCreatePlanClick()">Create new plan</button>
+        <button mat-menu-item (click)="onRenamePlanClick()">Rename plan</button>
+        <button mat-menu-item (click)="onDeletePlanClick()">Delete plan</button>
+        <button mat-menu-item (click)="onMakePrimayClick()">Make primary</button>
+        <hr>
+        <button mat-menu-item (click)="onPrintPlanClick()">Print plan</button>
 				<button mat-menu-item (click)="onSharePlanClick()">Share plan</button>
 			</mat-menu>
 		</div>
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index 8a8b8da1fa91c2fe64fb5509fb2962fd468aebff..7ed5ebcfb467d44ed525decf7744abf941c07c83 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { select } from '@ngrx/store';
 import { Component } from '@angular/core';
 import { MatSelectChange } from '@angular/material';
+import { MatDialog } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { MediaMatcher } from '@angular/cdk/layout';
 
@@ -24,6 +25,8 @@ import {
 // Actions
 import { ChangeVisiblePlanRequest } from '@app/degree-planner/store/actions/plan.actions';
 
+import { ModifyPlanDialogComponent } from './dialogs/modify-plan-dialog/modify-plan-dialog.component';
+
 @Component({
   selector: 'cse-degree-planner',
   templateUrl: './degree-planner.component.html',
@@ -43,6 +46,7 @@ export class DegreePlannerComponent implements OnInit {
   constructor(
     private store: Store<GlobalState>,
     public mediaMatcher: MediaMatcher,
+    public dialog: MatDialog,
   ) {
     this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
   }
@@ -63,9 +67,30 @@ export class DegreePlannerComponent implements OnInit {
     }
   }
 
+  public onCreatePlanClick() {
+    // TODO
+    console.log('onCreatePlanClick');
+    const data = {};
+    this.dialog.open(ModifyPlanDialogComponent, { data });
+  }
+
   public onRenamePlanClick() {
     // TODO
     console.log('onRenamePlanClick');
+    const data = {};
+    this.dialog.open(ModifyPlanDialogComponent, { data });
+  }
+
+  public onMakePrimayClick() {
+    // TODO
+    // open confirm dialog
+    console.log('onMakePrimaryClick');
+  }
+
+  public onDeletePlanClick() {
+    // TODO
+    // open confirm dialog
+    console.log('onDeletePlanClick');
   }
 
   public onPrintPlanClick() {
diff --git a/src/app/degree-planner/degree-planner.module.ts b/src/app/degree-planner/degree-planner.module.ts
index 12364b4e427b8739319d8fa38667d3272ebd8e2d..26ae0532b03b7826e7a90f01cc92cfd3994bbef5 100644
--- a/src/app/degree-planner/degree-planner.module.ts
+++ b/src/app/degree-planner/degree-planner.module.ts
@@ -7,27 +7,28 @@ import { TermContainerComponent } from './term-container/term-container.componen
 import { SidenavMenuItemComponent } from './sidenav-menu-item/sidenav-menu-item.component';
 import { SavedForLaterContainerComponent } from './favorites-container/favorites-container.component';
 import { CourseItemComponent } from './shared/course-item/course-item.component';
-import { CourseDetailsDialogComponent } from './dialogs/course-details-dialog/course-details-dialog.component';
 import { NotesDialogComponent } from './dialogs/notes-dialog/notes-dialog.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { RemoveCourseConfirmDialogComponent } from './dialogs/remove-course-confirm-dialog/remove-course-confirm-dialog.component';
+import { ModifyPlanDialogComponent } from './dialogs/modify-plan-dialog/modify-plan-dialog.component';
 
 @NgModule({
-	imports: [SharedModule, DragDropModule, DegreePlannerRoutingModule],
-	exports: [DragDropModule],
-	declarations: [
-		DegreePlannerComponent,
-		TermContainerComponent,
-		CourseItemComponent,
-		SidenavMenuItemComponent,
-		SavedForLaterContainerComponent,
-		NotesDialogComponent,
-		RemoveCourseConfirmDialogComponent
-	],
-	entryComponents: [
-		CourseDetailsDialogComponent,
-		NotesDialogComponent,
-		RemoveCourseConfirmDialogComponent
-	]
+  imports: [SharedModule, DragDropModule, DegreePlannerRoutingModule],
+  exports: [DragDropModule],
+  declarations: [
+    DegreePlannerComponent,
+    TermContainerComponent,
+    CourseItemComponent,
+    SidenavMenuItemComponent,
+    SavedForLaterContainerComponent,
+    NotesDialogComponent,
+    RemoveCourseConfirmDialogComponent,
+    ModifyPlanDialogComponent,
+  ],
+  entryComponents: [
+    NotesDialogComponent,
+    RemoveCourseConfirmDialogComponent,
+    ModifyPlanDialogComponent,
+  ],
 })
 export class DegreePlannerModule {}
diff --git a/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..69d7213e25ca5bdf145771f3aa3254e077ea1870
--- /dev/null
+++ b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
@@ -0,0 +1,53 @@
+<style>
+  .form-field-stretch {
+    padding-top: 20px;
+    width: 100%;
+  }
+</style>
+
+<mat-toolbar color="primary" class="dialog-toolbar">
+  <span class="dialog-toolbar-title">Modify Plan</span>
+  <button mat-button mat-dialog-close class="close-btn">
+    <i class="material-icons">clear</i>
+  </button>
+</mat-toolbar>
+
+<mat-dialog-content class="mat-typography dialog-with-toolbar">
+    <div class="create-plan-content" *ngIf="true">
+        <mat-dialog-content [formGroup]="form">
+          <mat-form-field class="form-field-stretch">
+            <input matInput placeholder="Name" formControlName="planName">
+          </mat-form-field>
+        </mat-dialog-content>
+      </div>
+
+    <div class="rename-plan-content" *ngIf="false">
+      <mat-dialog-content [formGroup]="form">
+        <mat-form-field class="form-field-stretch">
+          <input matInput placeholder="Name" formControlName="planName">
+        </mat-form-field>
+      </mat-dialog-content>
+    </div>
+
+    <div class="delete-plan-content" *ngIf="false">
+      <mat-dialog-content [formGroup]="form">
+        <mat-form-field>
+          <input matInput placeholder="Name" formControlName="planName">
+        </mat-form-field>
+      </mat-dialog-content>
+    </div>
+
+    <div class="make-plan-primary-content" *ngIf="false">
+      <mat-dialog-content [formGroup]="form">
+        <mat-form-field>
+          <input matInput placeholder="Name" formControlName="planName">
+        </mat-form-field>
+      </mat-dialog-content>
+    </div>
+
+    <mat-dialog-actions align="end">
+      <button mat-button class="btn-secondary" mat-dialog-close aria-label="Close note dialog"> Cancel </button>
+      <button mat-raised-button class="btn-primary mat-button" (click)="createPlanSave()" *ngIf="false">Save</button>
+      <button mat-raised-button class="btn-primary mat-button" (click)="renamePlanSave()">Save</button>
+    </mat-dialog-actions>
+</mat-dialog-content>
\ No newline at end of file
diff --git a/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.ts b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c8639052b62ab13f10970c3cd865f0f6804d88e0
--- /dev/null
+++ b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.ts
@@ -0,0 +1,29 @@
+import { FormGroup, FormControl } from '@angular/forms';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'cse-course-details-dialog',
+  templateUrl: './modify-plan-dialog.component.html',
+})
+export class ModifyPlanDialogComponent implements OnInit {
+  public form: FormGroup;
+
+  constructor() {
+    this.form = new FormGroup({
+      planName: new FormControl(),
+    });
+  }
+
+  ngOnInit() {}
+
+  renamePlanSave() {
+    console.log('PUT /degreePlan/<planId> { primary: <bool>, name: <string> }');
+  }
+  makePlanPrimarySave() {
+    // Open confirm dialog
+    console.log('PUT /degreePlan/<planId> { primary: true, name: <string> }');
+  }
+  createPlanSave() {
+    console.log('POST /degreePlan { primary: <bool>, name: <string> }');
+  }
+}
diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html
index 44610219157b724059b0183a583c2b6706bd03b0..da66fcf06115cf7c58190a51e6e959989a4f6f5f 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -58,6 +58,6 @@
 		</div>
 	</div>
 	<div class="add-new-wrapper" *ngIf="isActiveTerm$ | async">
-		<button mat-raised-button (click)="openAddSidenav()">+ Add Course</button>
+		<button mat-raised-button (click)="openAddSidenav()" class="add-course-button">+ Add Course</button>
 	</div>
 </mat-card>
\ No newline at end of file
diff --git a/src/app/degree-planner/term-container/term-container.component.scss b/src/app/degree-planner/term-container/term-container.component.scss
index 618434dfc9e38606011038f6ea20c49b61747ee6..61593de73cc44e0f69175f7bf9d0d310f945cdd1 100644
--- a/src/app/degree-planner/term-container/term-container.component.scss
+++ b/src/app/degree-planner/term-container/term-container.component.scss
@@ -1,111 +1,115 @@
 @import 'assets/material-theme.scss';
 
 .term-container {
-	background-color: #EEF1F3;
-	padding: 0;
+  background-color: #eef1f3;
+  padding: 0;
+}
+
+.add-course-button {
+  text-transform: uppercase;
 }
 
 .term-inner {
-	padding: 4px 8px 4px 8px;
+  padding: 4px 8px 4px 8px;
 }
 
 .term-header {
-	margin: 0;
+  margin: 0;
 
-	h2 {
-		margin: 0;
-	}
+  h2 {
+    margin: 0;
+  }
 
-	.mat-icon-button {
-		line-height: 20px;
-		margin-left: 5px;
-		color: #2879A8;
-	}
+  .mat-icon-button {
+    line-height: 20px;
+    margin-left: 5px;
+    color: #2879a8;
+  }
 }
 
 .term-container h2 {
-	color: #494949;
-	font-weight: 400;
-	font-size: 18px;
+  color: #494949;
+  font-weight: 400;
+  font-size: 18px;
 }
 
 .credits {
-	display: flex;
-	// justify-content: flex-end;
-	align-items: center;
-	font-size: 14px;
-	font-weight: 400;
+  display: flex;
+  // justify-content: flex-end;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
 }
 
 .cdk-drop-list-dragging {
-	position: relative;
-	&:after {
-		content: 'Add course to term';
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		background-color: #EEF1F3;
-		border: dashed 2px #2879A8;
-		color: #2879A8;
-		font-weight: bold;
-		text-transform: uppercase;
-		border-radius: 5px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
+  position: relative;
+  &:after {
+    content: 'Add course to term';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #eef1f3;
+    border: dashed 2px #2879a8;
+    color: #2879a8;
+    font-weight: bold;
+    text-transform: uppercase;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .add-new-wrapper {
-	border-top: solid #E0E4E7 1px;
-	padding: 8px;
-
-	button {
-		width: 100%;
-		box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
-		color: #2879A8;
-	}
+  border-top: solid #e0e4e7 1px;
+  padding: 8px;
+
+  button {
+    width: 100%;
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+    color: #2879a8;
+  }
 }
 
 .add-note-icon {
-	color: map-get($uw-primary, 500);
+  color: map-get($uw-primary, 500);
 }
 
 .note-item {
-    position: relative;
-    display: block;
-    width: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    border: solid 1px white;
-    background-color: white;
-    border-radius: 5px;
-    font-family: "Helvetica Neue", Georgia, Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    margin-bottom: 10px;
-
-    &:hover {
-		cursor: pointer;
-        border-color: #0679A8;
-        box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .25)
-    }
-
-    p {
-        margin: 0;
-        padding: 0;
-	}
-	.note-excerpt {
-		height: 32px;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: solid 1px white;
+  background-color: white;
+  border-radius: 5px;
+  font-family: 'Helvetica Neue', Georgia, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  margin-bottom: 10px;
+
+  &:hover {
+    cursor: pointer;
+    border-color: #0679a8;
+    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.25);
+  }
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+  .note-excerpt {
+    height: 32px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 }
 
 .no-courses {
-	text-align: center;
-	padding: 25px 0;
-	font-weight: bold;
-}
\ No newline at end of file
+  text-align: center;
+  padding: 25px 0;
+  font-weight: bold;
+}
diff --git a/src/assets/material-theme.scss b/src/assets/material-theme.scss
index 2318b366162e666038a8eaf19dae3adc0b20305a..496dcc56706f9857804f6d9a72246479253fdd31 100644
--- a/src/assets/material-theme.scss
+++ b/src/assets/material-theme.scss
@@ -1,115 +1,117 @@
 @import '~@angular/material/theming';
 
 $uw-accent: (
-	50 : #f8e1e2,
-	100 : #eeb4b6,
-	200 : #e28286,
-	300 : #d65055,
-	400 : #ce2b30,
-	500 : #c5050c,
-	600 : #bf040a,
-	700 : #b80408,
-	800 : #b00306,
-	900 : #a30103,
-	A100 : #ffcece,
-	A200 : #ff9b9b,
-	A400 : #ff6868,
-	A700 : #ff4e4e,
-	contrast: (
-		50 : #000000,
-		100 : #000000,
-		200 : #000000,
-		300 : #ffffff,
-		400 : #ffffff,
-		500 : #ffffff,
-		600 : #ffffff,
-		700 : #ffffff,
-		800 : #ffffff,
-		900 : #ffffff,
-		A100 : #000000,
-		A200 : #000000,
-		A400 : #000000,
-		A700 : #000000,
-	)
+  50: #f8e1e2,
+  100: #eeb4b6,
+  200: #e28286,
+  300: #d65055,
+  400: #ce2b30,
+  500: #c5050c,
+  600: #bf040a,
+  700: #b80408,
+  800: #b00306,
+  900: #a30103,
+  A100: #ffcece,
+  A200: #ff9b9b,
+  A400: #ff6868,
+  A700: #ff4e4e,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000,
+  ),
 );
 
 $uw-primary: (
-	50 : #e1eff5,
-	100 : #b4d7e5,
-	200 : #82bcd4,
-	300 : #4fa1c2,
-	400 : #2a8db5,
-	500 : #0479a8,
-	600 : #0371a0,
-	700 : #036697,
-	800 : #025c8d,
-	900 : #01497d,
-	A100 : #aad6ff,
-	A200 : #77bdff,
-	A400 : #44a5ff,
-	A700 : #2a99ff,
-	contrast: (
-		50 : #000000,
-		100 : #000000,
-		200 : #000000,
-		300 : #000000,
-		400 : #ffffff,
-		500 : #ffffff,
-		600 : #ffffff,
-		700 : #ffffff,
-		800 : #ffffff,
-		900 : #ffffff,
-		A100 : #000000,
-		A200 : #000000,
-		A400 : #000000,
-		A700 : #000000,
-	)
+  50: #e1eff5,
+  100: #b4d7e5,
+  200: #82bcd4,
+  300: #4fa1c2,
+  400: #2a8db5,
+  500: #0479a8,
+  600: #0371a0,
+  700: #036697,
+  800: #025c8d,
+  900: #01497d,
+  A100: #aad6ff,
+  A200: #77bdff,
+  A400: #44a5ff,
+  A700: #2a99ff,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000,
+  ),
 );
 
 $uw-warn: (
-	50 : #fff0e0,
-	100 : #ffd9b3,
-	200 : #ffc080,
-	300 : #ffa64d,
-	400 : #ff9326,
-	500 : #ff8000,
-	600 : #ff7800,
-	700 : #ff6d00,
-	800 : #ff6300,
-	900 : #ff5000,
-	A100 : #ffffff,
-	A200 : #fff5f2,
-	A400 : #ffcfbf,
-	A700 : #ffbca6,
-	contrast: (
-		50 : #000000,
-		100 : #000000,
-		200 : #000000,
-		300 : #000000,
-		400 : #000000,
-		500 : #000000,
-		600 : #000000,
-		700 : #000000,
-		800 : #000000,
-		900 : #ffffff,
-		A100 : #000000,
-		A200 : #000000,
-		A400 : #000000,
-		A700 : #000000,
-	)
+  50: #fff0e0,
+  100: #ffd9b3,
+  200: #ffc080,
+  300: #ffa64d,
+  400: #ff9326,
+  500: #ff8000,
+  600: #ff7800,
+  700: #ff6d00,
+  800: #ff6300,
+  900: #ff5000,
+  A100: #ffffff,
+  A200: #fff5f2,
+  A400: #ffcfbf,
+  A700: #ffbca6,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #000000,
+    600: #000000,
+    700: #000000,
+    800: #000000,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000,
+  ),
 );
 
-$custom-typography: mat-typography-config($font-family: '"Helvetica Neue", Georgia, Helvetica, Arial, sans-serif');
+$custom-typography: mat-typography-config(
+  $font-family: '"Helvetica Neue", Georgia, Helvetica, Arial, sans-serif',
+);
 @include mat-core($custom-typography);
 
 $my-app-primary: mat-palette($uw-primary);
-$my-app-accent:  mat-palette($uw-accent);
-$my-app-warn:    mat-palette($uw-warn);
+$my-app-accent: mat-palette($uw-accent);
+$my-app-warn: mat-palette($uw-warn);
 $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
 
 @include angular-material-theme($my-app-theme);
 
 // Since we're not using uw-style for buttons we need to add a few styles to mirror its appearance.
 button {
-	text-transform: uppercase;
+  // text-transform: uppercase;
 }
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index 3e9ccb7c7179ac9b70af791ecfbd96d3ac8b5637..308fbf5ff774faad269f208c30d8abb9d98d5b1d 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -1,76 +1,78 @@
 @import 'assets/material-theme.scss';
 
 body {
-    background-color: #ccc;
-    margin: 0px;
+  background-color: #ccc;
+  margin: 0px;
 }
 
 .text-right {
-    text-align: right;
+  text-align: right;
 }
 
 .text-left {
-    text-align: left;
+  text-align: left;
 }
 
 .text-center {
-    text-align: center;
+  text-align: center;
 }
 
 .semi-bold {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 .btn-primary[disabled] {
-    color: rgba(0,0,0,.26) !important;
-    background-color: rgba(0,0,0,.12) !important;
+  color: rgba(0, 0, 0, 0.26) !important;
+  background-color: rgba(0, 0, 0, 0.12) !important;
 }
 
-.btn-primary, .btn-secondary, .btn-delete {
-    min-width: 100px !important;
-    font-weight: 400 !important;
-    letter-spacing: 1px;
-    font-size: 14px;
+.btn-primary,
+.btn-secondary,
+.btn-delete {
+  min-width: 100px !important;
+  font-weight: 400 !important;
+  letter-spacing: 1px;
+  font-size: 14px;
 }
 
 .btn-primary {
-    background-color: #0479a8 !important;
-    color: white !important;
+  background-color: #0479a8 !important;
+  color: white !important;
 }
 
 .btn-secondary {
-    color: map-get($uw-primary, 500) !important;
-    border: 1px solid #b7b7b7 !important;
-    border-radius: 4px !important;
+  color: map-get($uw-primary, 500) !important;
+  border: 1px solid #b7b7b7 !important;
+  border-radius: 4px !important;
 }
 
 .btn-link {
-    color: map-get($uw-primary, 500) !important;
+  color: map-get($uw-primary, 500) !important;
 }
 
 .btn-delete {
-    background-color: #b5261e;
-    color: white;
+  background-color: #b5261e;
+  color: white;
 }
 
 .complete-icon {
-    color: #457A3B;
+  color: #457a3b;
 }
 
 .in-progress-icon {
-    color: #9CBA99;
+  color: #9cba99;
 }
 
 .problem-icon {
-    color: #F7C376;
+  color: #f7c376;
 }
 
 .error-icon {
-    color: map-get($uw-accent, 600);
+  color: map-get($uw-accent, 600);
 }
 
 .help-icon {
-    color: map-get($uw-primary, 500);
+  color: map-get($uw-primary, 500);
 }
 
 .complete-icon,
@@ -79,49 +81,49 @@ body {
 .error-icon,
 .help-icon,
 .not-offered {
-    font-size: 16px !important;
-    margin-left: 5px;
-    padding-top: 5px;
+  font-size: 16px !important;
+  margin-left: 5px;
+  padding-top: 5px;
 }
 
 #favoriteCourse-dropZone {
-    .course-favorite {
-        .course-item {
-            border: 1px solid #b7b7b7;
-            border-radius: 4px;
-            padding: 5px 10px;
-        }
+  .course-favorite {
+    .course-item {
+      border: 1px solid #b7b7b7;
+      border-radius: 4px;
+      padding: 5px 10px;
     }
+  }
 }
 
 .cdk-drag-placeholder {
-    position: relative;
-    opacity: 0;
-    height: 0;
+  position: relative;
+  opacity: 0;
+  height: 0;
 }
 
 .course-wrapper:not(.cdk-drag-preview) {
-    transform: translate(0) !important;
+  transform: translate(0) !important;
 }
 
 .cdk-drag-preview {
-	.course-wrapper-inner {
-		transform: rotate(-3deg);
-		border-radius: 5px;
-		box-shadow: -3px 3px 3px 2px rgba(0, 0, 0, 0.26);
-	}
+  .course-wrapper-inner {
+    transform: rotate(-3deg);
+    border-radius: 5px;
+    box-shadow: -3px 3px 3px 2px rgba(0, 0, 0, 0.26);
+  }
 }
 
 .no-courses {
-	padding: 20px 10px;
+  padding: 20px 10px;
 }
 
 .list-comma::before {
-    content: ', ';
+  content: ', ';
 }
 
 .list-comma:first-child::before {
-    content: '';
+  content: '';
 }
 
 /*
@@ -139,61 +141,62 @@ body {
 
 */
 .term-container-wrapper {
-	display: none !important;
+  display: none !important;
 }
 
-.mat-expanded, .ng-animating {
-	.term-container-wrapper {
-		display: flex !important;
-	}
+.mat-expanded,
+.ng-animating {
+  .term-container-wrapper {
+    display: flex !important;
+  }
 }
 
 // Menus styles
 
 .course-item-menu,
 .mat-menu-content {
-    width: 200px !important;
+  width: 200px !important;
 }
 
 .favorites-list {
-    border-bottom: 1px solid #f1f1f1 !important;
+  border-bottom: 1px solid #f1f1f1 !important;
 }
 
 // Dialogs styles
 
 .mat-dialog-container {
-    min-width: 700px;
-    padding: 0px !important;
-    .dialog-with-toolbar {
-        padding: 0 45px 25px 45px;
-        margin: 0px;
-    }
+  min-width: 400px;
+  padding: 0px !important;
+  .dialog-with-toolbar {
+    padding: 0 45px 25px 45px;
+    margin: 0px;
+  }
 }
 
 .dialog-toolbar {
-    height: 54px !important;
-    padding-right: 0px !important;
-    .dialog-toolbar-title {
-        flex: 1 1 auto;
-        font-weight: 400;
-    }
-    .close-btn {
-        min-height: 55px;
-    }
+  height: 54px !important;
+  padding-right: 0px !important;
+  .dialog-toolbar-title {
+    flex: 1 1 auto;
+    font-weight: 400;
+  }
+  .close-btn {
+    min-height: 55px;
+  }
 }
 
 // Media queries
 
 @media screen and (max-width: 800px) {
-    .mat-dialog-container {
-        min-width: 100%;
-    }
+  .mat-dialog-container {
+    min-width: 100%;
+  }
 }
 
 @media screen and (max-width: 957px) {
-    .mat-dialog-container {
-        .dialog-with-toolbar {
-            padding-top: 20px;
-        }
+  .mat-dialog-container {
+    .dialog-with-toolbar {
+      padding-top: 20px;
     }
-}
\ No newline at end of file
+  }
+}