diff --git a/ClientApp/src/app/home/home.component.html b/ClientApp/src/app/home/home.component.html
index fb6ce23..4952fa5 100644
--- a/ClientApp/src/app/home/home.component.html
+++ b/ClientApp/src/app/home/home.component.html
@@ -4,17 +4,27 @@
         <tr>
           <th>First name</th>
           <th>Last Name</th>
-          <th>DELETE</th>
+          <th>Manage</th>
         </tr>
     </thead>
     <tbody>
         <tr *ngFor="let instructor of instructors">
           <td>{{ instructor.firstName }}</td>
           <td>{{ instructor.lastName }}</td>
-          <td><button type="button" class="btn btn-danger" (click)="deleteInstructor(instructor)">DELETE</button></td>
+          <td>
+            <ng-template [ngIf]="changingInstructor?.id != instructor.id" [ngIfElse]="edit">
+                <button type="button" class="btn btn-primary" style="margin-right: 10px" (click)="setChangingInstructor(instructor)">Change</button>
+            </ng-template>
+            <button type="button" class="btn btn-danger" (click)="deleteInstructor(instructor)">DELETE</button>
+          </td>
         </tr>
     </tbody>
 </table>
+
+<ng-template #edit>
+    <button type="button" class="btn btn-primary" style="margin-right: 10px" (click)="clearChangingInstructor(true)">Cancel edit</button>
+</ng-template>
+
 <div style="text-align: center;"><h1>Instructor Details</h1>
   <br>
   <label><h5 style="text-align: initial">First Name</h5><input type="text" style="margin-right: 20px" [(ngModel)]="changingInstructor.firstName"></label>
diff --git a/ClientApp/src/app/home/home.component.ts b/ClientApp/src/app/home/home.component.ts
index f06ede2..8a1212a 100644
--- a/ClientApp/src/app/home/home.component.ts
+++ b/ClientApp/src/app/home/home.component.ts
@@ -11,6 +11,7 @@ import { InstructorsHttpService } from '../services/instructors-http-service';
 export class HomeComponent {
     public instructors: Instructor[];
     private changingInstructor: Instructor = new Instructor();
+    private savedInstructor: Instructor = new Instructor();
 
     constructor(private instructorsService: InstructorsHttpService) {}
 
@@ -24,16 +25,36 @@ export class HomeComponent {
         })
     }
 
+    setChangingInstructor(instructor: Instructor) {
+        Object.assign(this.savedInstructor, instructor)
+        this.changingInstructor = instructor
+    }
+
+    clearChangingInstructor(isUndo: boolean) {
+        if(isUndo) {
+            // undo edit changes
+            Object.assign(this.changingInstructor, this.savedInstructor) // copy previous object
+        }
+        this.changingInstructor = new Instructor() // remove ref
+        this.savedInstructor = new Instructor()
+    }
+
     saveChanges() {
         if(this.changingInstructor.id == null) {
+            console.log("Creating instructor...")
             this.instructorsService.createInstructor(this.changingInstructor).subscribe(result => {
                 this.instructors.push(result)
+                console.log("Instructor successfully created")
+                
             })
             
         } else {
-            this.instructorsService.updateInstructor(this.changingInstructor)
+            console.log("Updating instructor...")
+            this.instructorsService.updateInstructor(this.changingInstructor).subscribe(_ => {
+                console.log("Instructor successfully updated")
+            })
         }
-        this.changingInstructor = new Instructor()
+        this.clearChangingInstructor(false)
     }
 
     deleteInstructor(instructor: Instructor) {