diff --git a/src/app/components/main-content/time-table-mgmt/time-table-mgmt.component.html b/src/app/components/main-content/time-table-mgmt/time-table-mgmt.component.html
index 39dd1cb..03b681a 100644
--- a/src/app/components/main-content/time-table-mgmt/time-table-mgmt.component.html
+++ b/src/app/components/main-content/time-table-mgmt/time-table-mgmt.component.html
@@ -1,6 +1,7 @@
 <div class="row">
-  <div class="col-md-12">
+  <div class="col-sm-12">
     <div class="box-shadow">
+      <div *ngIf="!isSingleTimeTableViewVisible">
       <div class="panel panel-default">
         <!-- Default panel contents -->
         <div class="panel-heading">Generated TimeTables List {{noOfTimeTableMainEntities||""}}</div>
@@ -20,8 +21,8 @@
             <td>{{timeTableMainEntity.year}}</td>
             <td>{{timeTableMainEntity.timeTableName}}</td>
             <td>
-              <button class="waves-effect waves-light btn-sm btn-warning btn-rounded" (click)="deleteSubject(subject.id)">
-                Delete<i class="fa fa-eye"></i>
+              <button class="waves-effect waves-light btn-sm btn-warning btn-rounded" (click)="activateSingleTimeTableView(timeTableMainEntity)">
+                View<i class="fa fa-eye"></i>
               </button>
             </td>
           </tr>
@@ -29,6 +30,205 @@
         </table>
       </div>
 
+      </div>
+
+      <div class="row" *ngIf="isSingleTimeTableViewVisible">
+        <div class="col-sm-12">
+          <div class="btn-group pull-left btn-group-lg ">
+            <button type="button" class="btn btn-info waves-effect waves-light" (click)="activateAllTimeTablesView()"><i
+              class="fa fa-arrow-left">Back
+              To TimeTables.</i>
+            </button>
+          </div>
+
+          <div class="panel panel-default">
+            <div class="pull-right">
+              <div class="form-group m-t-10 m-b-40">
+                <h3>Select Type of TimeTable: Class/Tutor TimeTable.</h3>
+                <ng-select [allowClear]="false"
+                           [items]="timeTableTypeItems"
+                           (data)="refreshTimeTableTypeData($event)"
+                           (selected)="selectedTimeTableType($event)"
+                           (typed)="typedChar($event)"
+                           placeholder="No TimeTable Type Selected"
+                >
+                </ng-select>
+              </div>
+
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12">
+          <div *ngIf="isTutorsTimeTablesVisible">
+            <div *ngFor="let tutorPersonalTimeTableEntity of tutorPersonalTimeTableDocsList;">
+              <div class="panel panel-blue m-t-10">
+                <div class="panel panel-info">
+                  <div class="panel-heading">
+                    Tutor Name : {{tutorPersonalTimeTableEntity.tutorDoc.firstName + ' '+tutorPersonalTimeTableEntity.tutorDoc.surName}}
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <div class="table-responsive">
+                  <table class="table color-table primary-table">
+                    <thead>
+                    <tr>
+                      <th>DayName</th>
+                      <th>Period1</th>
+                      <th>Period2</th>
+                      <th>Period3</th>
+                      <th>Period4</th>
+                      <th>Period5</th>
+                      <th>Period6</th>
+                      <th>Period7</th>
+                      <th>Period8</th>
+                      <th>Period9</th>
+                      <th>Period10</th>
+                    </tr>
+                    </thead>
+
+                    <tr *ngFor="let programmeDay of tutorPersonalTimeTableEntity.programmeDaysList">
+                      <td>
+                        {{programmeDay.dayName}}
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[0].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[0].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[1].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[1].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[2].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[2].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[3].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[3].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[4].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[4].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[5].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[5].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[6].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[6].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[7].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[7].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[8].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[8].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[9].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[9].tutorFullName||'No tutor'}}</div>
+                      </td>
+
+                    </tr>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-sm-12">
+          <div *ngIf="isProgrammeGroupTimeTablesVisible">
+            <div *ngFor="let programmeGroupPersonalTimeTableEntity of programmeGroupPersonalTimeTableDocsList;">
+              <div class="panel panel-blue m-t-10">
+                <div class="panel panel-info">
+                  <div class="panel-heading">
+                    Programme Code : {{programmeGroupPersonalTimeTableEntity.programmeCode}}
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <div class="table-responsive">
+                  <table class="table color-table primary-table">
+                    <thead>
+                    <tr>
+                      <th>DayName</th>
+                      <th>Period1</th>
+                      <th>Period2</th>
+                      <th>Period3</th>
+                      <th>Period4</th>
+                      <th>Period5</th>
+                      <th>Period6</th>
+                      <th>Period7</th>
+                      <th>Period8</th>
+                      <th>Period9</th>
+                      <th>Period10</th>
+                    </tr>
+                    </thead>
+
+                    <tr *ngFor="let programmeDay of programmeGroupPersonalTimeTableEntity.programmeDaysList">
+                      <td>
+                        {{programmeDay.dayName}}
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[0].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[0].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[1].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[1].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[2].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[2].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[3].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[3].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[4].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[4].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[5].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[5].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[6].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[6].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[7].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[7].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[8].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[8].tutorFullName||'No tutor'}}</div>
+                      </td>
+                      <td>
+                        <div>{{programmeDay.periodList[9].subjectFullName||'No subject'}}</div>
+                        <div>{{programmeDay.periodList[9].tutorFullName||'No tutor'}}</div>
+                      </td>
+
+                    </tr>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/components/main-content/time-table-mgmt/time-table-mgmt.component.ts b/src/app/components/main-content/time-table-mgmt/time-table-mgmt.component.ts
index 724c1fe..74d73c8 100644
--- a/src/app/components/main-content/time-table-mgmt/time-table-mgmt.component.ts
+++ b/src/app/components/main-content/time-table-mgmt/time-table-mgmt.component.ts
@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {TimeTableGenerationService} from "../../../services/time-table-generation.service";
 import {TimeTableMainEntity} from "../../../models/time-table-main-entity";
 import {TimeTableMainEntityArrayResponsePayload} from "../../../models/time-table-main-entity-array-response-payload";
+import {ProgrammeGroupPersonalTimeTableEntity} from "../../../models/programme-group-personal-time-table-entity";
+import {TutorPersonalTimeTableEntity} from "../../../models/tutor-personal-time-table-entity";
 
 declare var swal: any;
 @Component({
@@ -15,11 +17,22 @@ export class TimeTableMgmtComponent implements OnInit {
   timeTableMainEntitiesList: Array<TimeTableMainEntity>;
   noOfTimeTableMainEntities: number;
 
+  isSingleTimeTableViewVisible : boolean = false;
+  isTutorsTimeTablesVisible : boolean = false;
+  isProgrammeGroupTimeTablesVisible : boolean = false;
+
+  timeTableTypeItems: Array<any> = [];
+
+  successfullyGeneratedTimeTableMainEntity: TimeTableMainEntity;
+  programmeGroupPersonalTimeTableDocsList: Array<ProgrammeGroupPersonalTimeTableEntity>;
+  tutorPersonalTimeTableDocsList: Array<TutorPersonalTimeTableEntity>;
+
   constructor(private timeTableGenerationService: TimeTableGenerationService) {
 
   }
 
   ngOnInit() {
+    this.getAllGeneratedTimeTables();
   }
 
   getAllGeneratedTimeTables(): void {
@@ -27,6 +40,7 @@ export class TimeTableMgmtComponent implements OnInit {
       (response: TimeTableMainEntityArrayResponsePayload) => {
         if ((response.status === 0) && (response.responseObject.length > 0)) {
           this.timeTableMainEntitiesList = response.responseObject;
+          console.log("timetableMainEntitiesList ==>",JSON.stringify(this.timeTableMainEntitiesList));
           this.noOfTimeTableMainEntities = response.responseObject.length;
         } else if ((response.status === 0) && (response.responseObject.length === 0)) {
           swal("Error", "No timetables generated currently.", "error");
@@ -40,4 +54,87 @@ export class TimeTableMgmtComponent implements OnInit {
     );
   }
 
+  activateSingleTimeTableView(timeTableMainEntity : TimeTableMainEntity):void{
+    this.successfullyGeneratedTimeTableMainEntity = timeTableMainEntity;
+    this.isSingleTimeTableViewVisible = true;
+    this.timeTableTypeItems = this.getTimeTableTypesItems();
+  }
+
+  activateAllTimeTablesView():void{
+    this.isSingleTimeTableViewVisible = false;
+  }
+
+  public selectedTimeTableType(value: any): void {
+    console.log('Selected value is: ', value);
+    console.log('value id=', value.id);
+    let valueToSwitch: number = value.id;
+
+    switch (valueToSwitch) {
+      case this.TIMETABLE_TYPE_PROGRAMMEGROUP :
+        //DO IMPLEMENTATION TO SHOW ALL TIMETABLE FOR ALL PROGRAMMEGROUPS RETURNED FROM SERVICE
+        this.getProgrammeGroupsTimeTables(this.successfullyGeneratedTimeTableMainEntity.programmeGroupPersonalTimeTableDocs);
+        break;
+      case this.TIMETABLE_TYPE_TUTOR :
+        //DO IMPLEMENTATION TO SHOW ALL TIMETABLE FOR ALL TUTORS RETURNED FROM SERVICE.
+        this.getTutorsTimeTables(this.successfullyGeneratedTimeTableMainEntity.tutorPersonalTimeTableDocs);
+        break;
+      default :
+        //DEFAULT IMPLEMENTAION
+        this.getTutorsTimeTables(this.successfullyGeneratedTimeTableMainEntity.tutorPersonalTimeTableDocs);
+        break;
+
+    }
+  }
+
+  /**
+   * ID of programmeGroup Type of timetable used in ng-select library
+   * @type {number}
+   */
+  TIMETABLE_TYPE_PROGRAMMEGROUP: number = 1;
+  TIMETABLE_TYPE_TUTOR: number = 2;
+
+  /**
+   * ng-select library takes data in the form of {id,text} objects.
+   *
+   * @returns {Array<any>}
+   */
+  public getTimeTableTypesItems(): Array<any> {
+    let timeTableTypes: Array<any> = [{
+      id: this.TIMETABLE_TYPE_PROGRAMMEGROUP,
+      text: 'Classes/ProgrammeGroups TimeTable'
+    }, {
+      id: this.TIMETABLE_TYPE_TUTOR,
+      text: 'Tutors TimeTable'
+    }];
+
+    console.info('TimeTable Type Objects to be populated in dropdown: ', timeTableTypes);
+    return timeTableTypes;
+  }
+
+  /**
+   * programmeGroups timetables list
+   * @param programmeGroupPersonalTimeTableDocs {@link TimeTableMainEntity.programmeGroupPersonalTimeTableDocs}
+   */
+  getProgrammeGroupsTimeTables(programmeGroupPersonalTimeTableDocs: Array<ProgrammeGroupPersonalTimeTableEntity>) {
+    this.programmeGroupPersonalTimeTableDocsList = programmeGroupPersonalTimeTableDocs;
+    //show programmeGroups timetables and hide tutors timetable.
+    this.isProgrammeGroupTimeTablesVisible = true;//show programmeGroup timetable
+    this.isTutorsTimeTablesVisible = false;//hide tutors timetable
+  }
+
+  getTutorsTimeTables(tutorPersonalTimeTableDocs: Array<TutorPersonalTimeTableEntity>) {
+    this.tutorPersonalTimeTableDocsList = tutorPersonalTimeTableDocs;
+    //show tutors timetables and hide programeGroups timetables.
+    this.isTutorsTimeTablesVisible = true;
+    this.isProgrammeGroupTimeTablesVisible = false;
+  }
+
+  refreshTimeTableTypeData(value: any): void {
+    //this.value = value;
+    console.log('Data1 =', value);
+  }
+
+  public typedChar(value: any): void {
+    console.log('New search input1: ', value);
+  }
 }
diff --git a/src/app/components/main-content/time-table/time-table.component.ts b/src/app/components/main-content/time-table/time-table.component.ts
index e526a77..6b4e11b 100644
--- a/src/app/components/main-content/time-table/time-table.component.ts
+++ b/src/app/components/main-content/time-table/time-table.component.ts
@@ -58,14 +58,14 @@ export class TimeTableComponent implements OnInit {
 
     console.log("TimeTable Generation Request ==>", timeTableGenerationRequest);
 
-
     this.timeTableGenerationService.generateTimeTable(timeTableGenerationRequest).subscribe(
       (response: TimeTableMainEntityResponsePayload) => {
         this.accessingService = false;
         console.info("response status = " + response.status);
         if (response.status === 0) {
           this.isGenerateButtonWandVisible = false;//once the response status is 0,we can hide the generate button.
-          response.responseObject = this.successfullyGeneratedTimeTableMainEntity;
+          this.successfullyGeneratedTimeTableMainEntity = response.responseObject;
+          this.timeTableTypeItems = this.getTimeTableTypesItems();
           this.isTutorsTimeTablesVisible = true;
           this.modalGenerateTimeTableDialog.dismiss();
           swal("Success", "Timetable generated successfuly", "success");