diff --git a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.html b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.html
index 28e5d6bd68b011576a5eaaa7ac74ece794b04621..8e8f7047259f4b214aba8517a0b2b980a4904103 100644
--- a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.html
+++ b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.html
@@ -23,23 +23,27 @@
 		<p>{{ courseDetails.description }}</p>
 		<p *ngIf="courseDetails.advisoryPrerequisites && courseDetails.advisoryPrerequisites.length > 0"><span class="semi-bold">Requisites:</span>{{ courseDetails.advisoryPrerequisites }}</p>
 		
-		<ul>
+		<ul class="courseDetails-list">
 			<li *ngIf="courseDetails.creditRange"><span class="semi-bold">Credits:</span> {{ courseDetails.creditRange }}</li>
 			<li *ngIf="courseDetails.levels && courseDetails.levels.length > 0"><span class="semi-bold">Level:</span>
-				{{ mapDescriptions(courseDetails.levels) }}
+				<span *ngFor="let levels of courseDetails.levels">
+					<span class="list-comma">{{ levels.description }}</span>
+				</span>
 			</li>
-			<li *ngIf="courseDetails.breadths && courseDetails.breadths.length > 0"><span class="semi-bold">Breadth:</span> 
-				{{ mapDescriptions(courseDetails.breadths) }}
+			<li *ngIf="courseDetails.breadths && courseDetails.breadths.length > 0"><span class="semi-bold">Breadth:</span>
+				<span *ngFor="let breadths of courseDetails.breadths">
+					<span class="list-comma">{{ breadths.description }}</span>
+				</span>
 			</li>
 			<li *ngIf="courseDetails.lettersAndScienceCredits"><span class="semi-bold">L&amp;S Credit Type:</span>
 				{{ courseDetails.lettersAndScienceCredits.description }}
 			</li>
 		</ul>
 
-		<ul>
+		<ul class="courseDetails-list">
 			<li *ngIf="courseDetails.lastTaught"><span class="semi-bold">Last Taught:</span> {{ courseDetails.lastTaught | getTermDescription }}</li>
 			<li *ngIf="(courseDetails.gradCourseWork || courseDetails.workplaceExperience || courseDetails.foreignLanguage)" ><span class="semi-bold">Course Options:</span>
-				<ul class="course-options-list">
+				<ul class="courseDetails-nested-list">
 					<li>
 						<span *ngIf="courseDetails.gradCourseWork">50% Graduate Coursework Requirement</span>
 						<span *ngIf="courseDetails.workplaceExperience">{{ courseDetails.workplaceExperience.description }}</span>
diff --git a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.scss b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.scss
index 4a0054db64fb6e2042f58f3899de9c2c5a56861f..8a7491839b71e74c263f3866203edcfa284fa5e7 100644
--- a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.scss
+++ b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.scss
@@ -1,12 +1,12 @@
 @import 'assets/material-theme.scss';
 
 #course-details-content {
-    ul {
+    .courseDetails-list {
         margin-bottom: 20px;
         list-style: none;
         padding-inline-start: 0px;
     }
-    .course-options-list {
+    .courseDetails-nested-list {
         list-style: circle;
         -webkit-padding-start: 1.2em;
         padding-inline-start: 1.2em;
diff --git a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.ts b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.ts
index 0347ea6a11a2d258b97d48fb728872a1f7e86fa8..59aff05bef43975eb0f23f56483d2d8a1d8e555b 100644
--- a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.ts
+++ b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.ts
@@ -16,10 +16,6 @@ export class CourseDetailsDialogComponent implements OnInit {
 		this.courseDetails = data.courseDetails;
 	}
 
-	mapDescriptions(objects) {
-		return objects.map(object => object.description);
-	}
-
 	ngOnInit() {
 	}
 }
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index 3a96171cd53122fb05462bbad031e5e8e7632d02..d3c95358b7793d8089943bf97b27a361f72e1819 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -94,6 +94,14 @@ body {
 	padding: 20px 10px;
 }
 
+.list-comma::before {
+    content: ', ';
+}
+
+.list-comma:first-child::before {
+    content: '';
+}
+
 /*
 
 	Note: The follow styles need to be in the global styles file