diff --git a/yacs-admin-angular/src/app/course/course-detail/course-detail.component.html b/yacs-admin-angular/src/app/course/course-detail/course-detail.component.html
index 63d5116..80a0b67 100644
--- a/yacs-admin-angular/src/app/course/course-detail/course-detail.component.html
+++ b/yacs-admin-angular/src/app/course/course-detail/course-detail.component.html
@@ -12,7 +12,7 @@ <h2 id="detailHeading">
       <label for="numInput">Course #: </label>
       <input id="numInput" class="form-control" [(ngModel)]="course.number" placeholder="num" #newNum>
     </div>
-    
+
   </div>
   <div class="form-row">
   <div id="nameField" class="form-group form-inline">
@@ -42,7 +42,7 @@ <h2 id="detailHeading">
   </div>
 
   <div id="buttonHolder">
-    <!-- These are intentionally left without a (click) function 
+    <!-- These are intentionally left without a (click) function
       for now, TODO implement functionality -->
     <button class="btn btn-search" id="save" (click)="saveCourse()">Save Changes</button>
     <button class="btn btn-search" id="cancel" (click)="goBack()">Cancel</button>
diff --git a/yacs-admin-angular/src/app/mock-data.ts b/yacs-admin-angular/src/app/mock-data.ts
index ce9d3f6..777ce66 100644
--- a/yacs-admin-angular/src/app/mock-data.ts
+++ b/yacs-admin-angular/src/app/mock-data.ts
@@ -2,12 +2,21 @@ import { School } from './school/school';
 import { Department } from './department/department';
 import { Course } from './course/course';
 import { Section } from './section/section';
+import { Period } from './section/period';
 
 export const SECTIONS: Section[] = [
     {id: 1, course_id: 1, name: '01', crn: 87654, instructors: ["Goldschmidt", "Krishnamoorthy"],
-    seats: 10, seats_taken: 5, conflicts: [1, 2, 3], num_periods: 2},
+    seats: 10, seats_taken: 5, conflicts: [1, 2, 3],
+    periods: [
+      new Period(800, 950, 2),
+      new Period(800, 950, 5),
+    ], num_periods: 2},
     {id: 2, course_id: 1, name: '02', crn: 87655, instructors: ["Goldschmidt"],
-    seats: 10, seats_taken: 3, conflicts: [1, 2, 3], num_periods: 2},
+    seats: 10, seats_taken: 3, conflicts: [1, 2, 3],
+    periods: [
+      new Period(1600, 1750, 1),
+      new Period(1600, 1750, 4),
+    ], num_periods: 2},
 ];
 
 export const COURSES: Course[] = [
diff --git a/yacs-admin-angular/src/app/school/school-detail/school-detail.component.html b/yacs-admin-angular/src/app/school/school-detail/school-detail.component.html
index 2ae46dc..6c2a34d 100644
--- a/yacs-admin-angular/src/app/school/school-detail/school-detail.component.html
+++ b/yacs-admin-angular/src/app/school/school-detail/school-detail.component.html
@@ -2,11 +2,11 @@
   <h2 id="detailHeading">{{school.name}} Details</h2>
   <div id="nameField" class="form-group">
     <label for="nameInput">Name: </label>
-    <input id="nameInput" class="form-control" [(ngModel)]="school.name" placeholder="name" #newName/> 
+    <input id="nameInput" class="form-control" [(ngModel)]="school.name" placeholder="name" #newName/>
   </div>
 
   <div id="buttonHolder">
     <button class="btn btn-search" id="save" (click) ="save(newName)">Save Changes</button>
     <button class="btn btn-search" id="cancel" (click)="cancel(newName)" >Cancel</button>
   </div>
-</div>"
+</div>
diff --git a/yacs-admin-angular/src/app/section/period.ts b/yacs-admin-angular/src/app/section/period.ts
index 1c28e91..687bdf5 100644
--- a/yacs-admin-angular/src/app/section/period.ts
+++ b/yacs-admin-angular/src/app/section/period.ts
@@ -1,7 +1,12 @@
 export class Period {
-  type: string;
-  day: number;
-  // start and end are in MINUTES SINCE START OF THE WEEK // no?
+  //type: string;
   start: number;
   end: number;
+  day: number;
+
+  constructor(start, end, day) {
+    this.start = start;
+    this.end = end;
+    this.day = day;
+  }
 }
diff --git a/yacs-admin-angular/src/app/section/section-detail/section-detail.component.html b/yacs-admin-angular/src/app/section/section-detail/section-detail.component.html
index 2b24326..75d243c 100644
--- a/yacs-admin-angular/src/app/section/section-detail/section-detail.component.html
+++ b/yacs-admin-angular/src/app/section/section-detail/section-detail.component.html
@@ -1,10 +1,23 @@
 <div id ="sectionDetail" *ngIf="section">
-  <h2 id="detailHeading">{{section.name}} Details</h2>
-  <div id="nameField" class="form-group">
+  <h2 id="detailHeading">
+    Section {{section.department_code}} {{section.number}} {{section.name}} Details
+  </h2>
+
+  <div id="nameField" class="form-group form-inline">
     <label for="nameInput">Name: </label>
     <input id="nameInput" class="form-control" [(ngModel)]="section.name" placeholder="name" #newName/>
   </div>
 
+  <div id = "crnField" class="form-group form-inline">
+    <label for = "crnField">CRN: &nbsp;</label>
+    <input id ="crnField" class="form-control" style="width:100px !important;" [(ngModel)]="section.crn" placeholder="crn" #newCode/>
+  </div>
+
+  <div id = "instructorField" class="form-group form-inline">
+    <label for="instructorInput">Instructor(s): </label>
+    <input id ="instructorField" class="form-control" [(ngModel)]="section.instructors" placeholder="instructors" #newInstructors/>
+  </div>
+
   <div id="buttonHolder">
     <button class="btn btn-search" id="save" (click) ="save(newName)">Save Changes</button>
     <button class="btn btn-search" id="cancel" (click)="cancel(newName)" >Cancel</button>
diff --git a/yacs-admin-angular/src/app/section/section-detail/section-detail.component.spec.ts b/yacs-admin-angular/src/app/section/section-detail/section-detail.component.spec.ts
index d68e31f..ff3b793 100644
--- a/yacs-admin-angular/src/app/section/section-detail/section-detail.component.spec.ts
+++ b/yacs-admin-angular/src/app/section/section-detail/section-detail.component.spec.ts
@@ -9,6 +9,7 @@ import { ActivatedRoute} from '@angular/router';
 import { Observable} from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 import { Section } from '../section';
+import { Period } from '../period';
 import { SectionDetailComponent} from './section-detail.component';
 import { YacsService} from '../../services/yacs.service';
 
@@ -30,7 +31,7 @@ describe('SectionDetailComponent', () => {
     fixture = TestBed.createComponent(SectionDetailComponent);
     component = fixture.componentInstance;
     component.section = new Section(1, 1, '01', 87654, ['Goldschmidt', 'Krishnamoorthy'],
-                                    10, 5, [1, 2, 3], 2);
+                                    10, 5, [1, 2, 3], [new Period(800, 950, 2), new Period(800, 950, 5)], 2);
     spyOn(component, 'getSection');
     fixture.detectChanges();
     fixture.whenStable().then(()=>{
diff --git a/yacs-admin-angular/src/app/section/section-list/section-list.component.html b/yacs-admin-angular/src/app/section/section-list/section-list.component.html
index 94aa28a..210e49e 100644
--- a/yacs-admin-angular/src/app/section/section-list/section-list.component.html
+++ b/yacs-admin-angular/src/app/section/section-list/section-list.component.html
@@ -17,15 +17,24 @@ <h2 *ngIf="selectedCourse">Sections of {{selectedCourse.name}}</h2>
   </thead>
 
   <tbody>
-  <tr *ngFor="let section of sections">
+  <tr *ngFor="let section of sections" style="display: block">
     <td class="id">{{section.id}}</td>
     <td class="id">{{section.name}}</td>
     <td class="code">{{section.crn}}</td>
     <td>{{ section.instructors.join(', ') }}</td>
-    <td class="code">{{ section.seats-section.seats_taken }}/{{section.seats}}</td>
+    <td class="code">{{section.seats-section.seats_taken}}/{{section.seats}}</td>
     <td class="id" style="text-align: center !important;"><a routerLink="{{section.id}}">Details</a></td>
-    <td class="id" style="text-align: center !important;"><a routerLink="/sections" [queryParams]="{section_id: section.id }">Show Periods</a></td>
-    <td class="id" style="text-align: center !important;"><a class="delete" (click)="deleteSection(section)" >Delete</a></td>
+    <td class="id" style="text-align: center !important;"><a id="showPeriods" (click)="showPeriods(section)">Show Periods</a></td>
+    <td class="id" style="text-align: center !important;"><a class="delete" (click)="deleteSection(section)">Delete</a></td>
+
+    <ng-container *ngIf="section === selectedSection">
+      <table style="margin: 5px;">
+        <b>Periods</b>
+        <td *ngFor="let period of section.periods">
+          Start: {{period.start}}  End: {{period.end}}  Day: {{getDay(period)}}
+        </td>
+      </table>
+    </ng-container>
   </tr>
 
   </tbody>
diff --git a/yacs-admin-angular/src/app/section/section-list/section-list.component.spec.ts b/yacs-admin-angular/src/app/section/section-list/section-list.component.spec.ts
index 516a8c3..48c7b8a 100644
--- a/yacs-admin-angular/src/app/section/section-list/section-list.component.spec.ts
+++ b/yacs-admin-angular/src/app/section/section-list/section-list.component.spec.ts
@@ -9,7 +9,7 @@ import {InMemoryDataService} from '../../services/in-memory-data.service';
 import {HttpClientInMemoryWebApiModule} from 'angular-in-memory-web-api';
 import {YacsService} from '../../services/yacs.service';
 describe('SectionListComponent', ()=>{
-  
+
 
   describe('no parameters queried', ()=>{
 
@@ -22,7 +22,7 @@ describe('SectionListComponent', ()=>{
         imports: [RouterTestingModule, HttpClientModule, HttpClientInMemoryWebApiModule.forRoot(    InMemoryDataService, {dataEncapsulation: false, passThruUnknownUrl: true, delay: 100} )],
         declarations: [ SectionListComponent ],
         providers: [
-          {provide: YacsService, useClass: FakeYacsService}, 
+          {provide: YacsService, useClass: FakeYacsService},
           {provide: ActivatedRoute, useValue: {'queryParams': Observable.from(mockParams)}}]
       })
       .compileComponents();
@@ -41,7 +41,7 @@ describe('SectionListComponent', ()=>{
       fixture.whenStable().then(()=>{
         fixture.detectChanges();
       });
-       
+
     });
 
 
@@ -88,7 +88,7 @@ describe('SectionListComponent', ()=>{
         imports: [RouterTestingModule, HttpClientModule, HttpClientInMemoryWebApiModule.forRoot(    InMemoryDataService, {dataEncapsulation: false, passThruUnknownUrl: true, delay: 100} )],
         declarations: [ SectionListComponent ],
         providers: [
-          {provide: YacsService, useClass: FakeYacsService}, 
+          {provide: YacsService, useClass: FakeYacsService},
           {provide: ActivatedRoute, useValue: {'queryParams': Observable.from(mockParams)}}]
       })
       .compileComponents();
@@ -107,7 +107,7 @@ describe('SectionListComponent', ()=>{
       fixture.whenStable().then(()=>{
         fixture.detectChanges();
       });
-       
+
     });
 
 
@@ -144,6 +144,23 @@ describe('SectionListComponent', ()=>{
       expect(document.getElementsByClassName('table')).toBeTruthy();
     });
 
+
+    describe('when showPeriods clicked', ()=>{
+      beforeEach(async()=>{
+        let periodsButton=document.getElementById('showPeriods');
+        periodsButton.click();
+      });
+
+      beforeEach(()=>{
+        spyOn(component, 'showPeriods');
+      });
+
+      it('should call showPeriods()', async()=>{
+        tick();
+        expect(component.showPeriods).toHaveBeenCalled();
+      });
+    });
+
   });
 
 
diff --git a/yacs-admin-angular/src/app/section/section-list/section-list.component.ts b/yacs-admin-angular/src/app/section/section-list/section-list.component.ts
index 1df7435..e873f33 100644
--- a/yacs-admin-angular/src/app/section/section-list/section-list.component.ts
+++ b/yacs-admin-angular/src/app/section/section-list/section-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { YacsService } from '../../services/yacs.service';
-import { Section } from '../section';
 import { Course } from '../../course/course';
+import { Section } from '../section';
 import { Period } from '../period';
 import { ActivatedRoute } from '@angular/router';
 const SHORT_DAYS: string[] = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
@@ -13,15 +13,12 @@ const SHORT_DAYS: string[] = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 })
 export class SectionListComponent implements OnInit{
   sections: Section[];
+  test_periods: Period[];
+  selectedSection: Section;
   selectedCourse: Course;
   course_id: number;
   constructor(private route: ActivatedRoute, private yacsService: YacsService) { }
 
-  getSections(): void{
-    this.yacsService.getSections()
-      .subscribe(sections => this.sections = sections);
-  }
-
   ngOnInit() {
     this.setCourseId();
     //this.getSelectedCourse(0);
@@ -33,6 +30,10 @@ export class SectionListComponent implements OnInit{
     else{
       this.getSections();
     }
+    this.test_periods = [
+      {start:800, end:950, day:2},
+      {start:800, end:950, day:5},
+    ];
   }
 
   setCourseId(): void{
@@ -43,6 +44,11 @@ export class SectionListComponent implements OnInit{
       });
   }
 
+  getSections(): void{
+    this.yacsService.getSections()
+      .subscribe(sections => this.sections = sections);
+  }
+
   getCourseSections(course_id: number): void{
     this.yacsService.getSectionsByCourseID(course_id)
       .subscribe(sections => {
@@ -77,6 +83,11 @@ export class SectionListComponent implements OnInit{
 
   }
 
+  showPeriods(section): void{
+    this.selectedSection = section;
+    console.log(section.periods);
+  }
+
 
   public getDay(period: Period) : string {
     return SHORT_DAYS[period.day];
diff --git a/yacs-admin-angular/src/app/section/section.spec.ts b/yacs-admin-angular/src/app/section/section.spec.ts
index e1ea7a5..a71ffde 100644
--- a/yacs-admin-angular/src/app/section/section.spec.ts
+++ b/yacs-admin-angular/src/app/section/section.spec.ts
@@ -2,7 +2,7 @@ import { Section } from './section';
 import { Period } from './period';
 describe('Section', () => {
   const section = new Section(1, 1, '01', 87654, ['Goldschmidt', 'Krishnamoorthy'],
-  10, 5, [1, 2, 3], 2);
+  10, 5, [1, 2, 3], [new Period(800, 950, 2), new Period(800, 950, 5)], 2);
 
   it('has id', () => {
     expect(section.id).toBe(1);
@@ -37,11 +37,11 @@ describe('Section', () => {
     expect(section.conflicts).toEqual([1, 2, 3]);
   });
 
-  // it('has periods', () => {
-  //   const dept1 = new Department(1,'CPYP','Copying and Pasting',1);
-  //   const school = new School(1, 'School of StackOverflow',[dept1]);
-  //   expect(school.departments[0].name).toBe('Copying and Pasting');
-  // });
+  it('has periods', () => {
+    expect(section.periods[0].start).toEqual(800);
+    expect(section.periods[0].end).toEqual(950);
+    expect(section.periods[0].day).toEqual(2);
+  });
 
   it('has num_periods', () => {
     expect(section.num_periods).toBe(2);
diff --git a/yacs-admin-angular/src/app/section/section.ts b/yacs-admin-angular/src/app/section/section.ts
index c17551a..190b3cd 100644
--- a/yacs-admin-angular/src/app/section/section.ts
+++ b/yacs-admin-angular/src/app/section/section.ts
@@ -13,10 +13,10 @@ export class Section {
   seats: number;
   seats_taken: number;
   conflicts: number[];
-  //periods: Period[];
+  periods: Period[];
   num_periods: number;
 
-  constructor(id, course_id, name, crn, instructors, seats, seats_taken, conflicts, num_periods) {
+  constructor(id, course_id, name, crn, instructors, seats, seats_taken, conflicts, periods, num_periods) {
     this.id = id;
     this.course_id = course_id;
     this.name = name;
@@ -25,7 +25,7 @@ export class Section {
     this.seats = seats;
     this.seats_taken = seats_taken;
     this.conflicts = conflicts;
-    //this.periods = periods;
+    this.periods = periods;
     this.num_periods = num_periods;
   }
 }
diff --git a/yacs-admin-angular/src/app/services/in-memory-data.service.ts b/yacs-admin-angular/src/app/services/in-memory-data.service.ts
index 0ceb1e2..3571abc 100644
--- a/yacs-admin-angular/src/app/services/in-memory-data.service.ts
+++ b/yacs-admin-angular/src/app/services/in-memory-data.service.ts
@@ -6,7 +6,17 @@ export class InMemoryDataService implements InMemoryDbService {
   createDb(){
     const sections= [
       {id: 1, course_id: 1, name: '01', crn: 87654, instructors: ["Goldschmidt", "Krishnamoorthy"],
-      seats: 10, seats_taken: 5, conflicts: [1, 2, 3], num_periods: 2},
+      seats: 10, seats_taken: 5, conflicts: [1, 2, 3],
+      periods: [
+        {start: 800, end: 950, day: 2},
+        {start: 800, end: 950, day: 5},
+      ], num_periods: 2},
+      {id: 2, course_id: 1, name: '02', crn: 87655, instructors: ["Goldschmidt", "Krishnamoorthy"],
+      seats: 10, seats_taken: 3, conflicts: [1, 2, 3],
+      periods: [
+        {start: 1600, end: 1750, day: 1},
+        {start: 1600, end: 1750, day: 4},
+      ], num_periods: 2},
     ];
     const courses = [
       {id: 1, name: 'Stars, Galaxies and the Cosmos', number: '1960', department_code: 'ASTR',