diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index 2108de73985beca85766f8e2b05b3ec604bbe13c..f9b34c737c8885414b305b52e62267667d553f3b 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -32,7 +32,12 @@
 						</mat-panel-title>
 					</mat-expansion-panel-header>
 					<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
-						<app-term-container *ngFor="let term of termsByAcademicYear[year.key].terms" [term]="term" [courses]="getCoursesByTerm(term.termCode)" fxFlex="33%"></app-term-container>
+						<app-term-container 
+							*ngFor="let term of termsByAcademicYear[year.key].terms | keyvalue" 
+							[term]="termsByAcademicYear[year.key].terms[term.key]" 
+							[courses]="getCoursesByTerm(year.key + term.key)" 
+							fxFlex="33%"
+						></app-term-container>
 					</div>
 				</mat-expansion-panel>
 			</mat-accordion>
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index 7365f5e8dc005c7c4774a37b74df3184f9050551..a78f67cb33c7d096506b00f3c2bcc2b0ad64b278 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -33,18 +33,31 @@ export class DegreePlannerComponent {
 		this.dataService.getTerms()
 		.subscribe(terms => {
 			this.terms = terms;
+			// Create an empty object to store term data in
 			this.termsByAcademicYear = {};
+
+			// Loop through each term
 			this.terms.forEach(term => {
+				// Get the 3 digit year code and 1 digit term code
 				const year = term.termCode.substring(0, 3);
+				const termCode = term.termCode.substring(3);
 
-				if (this.termsByAcademicYear[year]) {
-					this.termsByAcademicYear[year].terms.push(term);
-				} else {
+				// If this year does not exsist in the "termsByAcademicYear" create a new year
+				// This year has placeholder data for each term in the year
+				if (!this.termsByAcademicYear[year]) {
 					this.termsByAcademicYear[year] = {
 						year: year,
-						terms: [term]
+						terms: {
+							2: { termCode: `${year}2`},
+							4: { termCode: `${year}4`},
+							6: { termCode: `${year}6`}
+						}
 					};
 				}
+
+				// Overwrite the default term with the current term
+				this.termsByAcademicYear[year].terms[termCode] = term;
+
 			});
 		});
 	}
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.html b/src/app/degree-planner/shared/course-item/course-item.component.html
index c176141371cce430bb9757565171f1766e70f0d4..64a8680c72c91addf273708595572a17216fe205 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.html
+++ b/src/app/degree-planner/shared/course-item/course-item.component.html
@@ -1,4 +1,4 @@
-<div class="course-item">
+<div class="course-item {{status}}" [ngClass]="{'disabled': course.pastTerm}">
   <div class="course-row course-info">
     <div class="icon-number-wrapper">
         <p class="course-number">
@@ -10,7 +10,6 @@
             <i *ngSwitchCase="'waitlist'" class="material-icons problem-icon">report_problem</i>
             <i *ngSwitchCase="'incomplete'" class="material-icons error-icon">error</i>
             <i *ngSwitchCase="'likely-offered'" class="material-icons help-icon">help</i>
-            <i *ngSwitchCase="'not-offered'" class="material-icons not-offered">remove</i>
             <i *ngSwitchCase="'favorite'" class="material-icons favorite-icon">favorite_border</i>
         </div>
     </div>
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.scss b/src/app/degree-planner/shared/course-item/course-item.component.scss
index b9a4cad408f4a69d3414d0681e9891724fae70ea..b816d5702fdf9582d0ee1e20de62ee441a60ae0f 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.scss
+++ b/src/app/degree-planner/shared/course-item/course-item.component.scss
@@ -70,4 +70,13 @@
 .icon-number-wrapper {
     display: flex;
     align-items: center;
+}
+
+.not-offered {
+    .course-number,
+    .course-credits,
+    .course-title {
+        text-decoration: line-through;
+        opacity: .5;
+    }
 }
\ No newline at end of file
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 cdbb4b32a7d7edbe616df1b9d40c516dc81e9043..5e7fbd2de4c326605ac113424bf06acd6ac5b9a7 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -1,6 +1,6 @@
 <mat-card class="term-container">
     <div fxLayout="row" fxLayoutAlign="space-between stretch">
-        <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold credits">Credits: 13</p>
+        <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold credits">{{getTotalCredits()}} Credits</p>
     </div>
     <div cdkDropList>
         <app-course-item *ngFor="let course of courses" [course]="course" [status]="'complete'" cdkDrag></app-course-item>
diff --git a/src/app/degree-planner/term-container/term-container.component.ts b/src/app/degree-planner/term-container/term-container.component.ts
index 9a5ed3d598a8f8e7953f751b6ced79afdd93d1b5..f29680ed251ef51942a4c647b3f89f3e92e2b475 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/src/app/degree-planner/term-container/term-container.component.ts
@@ -15,4 +15,15 @@ export class TermContainerComponent {
 	terms: any[];
 
 	constructor() {}
+
+	getTotalCredits() {
+		if (!this.courses) {
+			return '0';
+		}
+		let total = 0;
+		for (const course of this.courses) {
+			total += course.credits;
+		}
+		return total;
+	}
 }