diff --git a/ClientApp/src/app/home/home.component.html b/ClientApp/src/app/home/home.component.html
index 7a1ebae..f724d64 100644
--- a/ClientApp/src/app/home/home.component.html
+++ b/ClientApp/src/app/home/home.component.html
@@ -17,9 +17,9 @@
 </table>
 <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"></label>
-  <label><h5 style="text-align: initial">Middle Name</h5><input type="text" style="margin-right: 20px"></label>
-  <label><h5 style="text-align: initial">Last Name</h5><input type="text"></label>
+  <label><h5 style="text-align: initial">First Name</h5><input type="text" style="margin-right: 20px" [(ngModel)]="changingInstructor.firstName"></label>
+  <label><h5 style="text-align: initial">Middle Name</h5><input type="text" style="margin-right: 20px" [(ngModel)]="changingInstructor.middleName"></label>
+  <label><h5 style="text-align: initial">Last Name</h5><input type="text" [(ngModel)]="changingInstructor.lastName"></label>
   <br>
   <button type="button" class="btn btn-primary">ADD/SAVE</button>
 </div>
diff --git a/ClientApp/src/app/home/home.component.ts b/ClientApp/src/app/home/home.component.ts
index c18a930..146d96b 100644
--- a/ClientApp/src/app/home/home.component.ts
+++ b/ClientApp/src/app/home/home.component.ts
@@ -1,22 +1,26 @@
 import { Component, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Instructor } from '../models/instructor';
+import { InstructorsHttpService } from '../services/instructors-http-service';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
+  providers: [InstructorsHttpService]
 })
 export class HomeComponent {
-    public instructors: any[] = [{id: "1", firstName: "Test", lastName: "Testov"}];
+    public instructors: Instructor[];
+    private changingInstructor: Instructor = new Instructor();
 
-    constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
-        /*http.get<Instructor[]>(baseUrl + 'api/v1/instructors').subscribe(result => {
-          this.instructors = result;
-        }, error => console.error(error));*/
+    constructor(private instructorsService: InstructorsHttpService) {}
+
+    ngOnInit() {
+      this.loadInstructors()
     }
-}
 
-interface Instructor {
-    id: string,
-    firstName: string,
-    lastName: string
+    private loadInstructors() {
+      this.instructorsService.getInstructors().subscribe(result => {
+        this.instructors = result;
+      })
+    }
 }
\ No newline at end of file
diff --git a/ClientApp/src/app/models/instructor.ts b/ClientApp/src/app/models/instructor.ts
new file mode 100644
index 0000000..f2e5165
--- /dev/null
+++ b/ClientApp/src/app/models/instructor.ts
@@ -0,0 +1,7 @@
+export class Instructor {
+    constructor(
+        public id?: string,
+        public firstName?: string,
+        public middleName?: string,
+        public lastName?: string) { }
+}
\ No newline at end of file
diff --git a/ClientApp/src/app/services/instructors-http-service.ts b/ClientApp/src/app/services/instructors-http-service.ts
new file mode 100644
index 0000000..44ac374
--- /dev/null
+++ b/ClientApp/src/app/services/instructors-http-service.ts
@@ -0,0 +1,24 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient} from '@angular/common/http';
+import { Instructor } from '../models/instructor';
+ 
+@Injectable()
+export class InstructorsHttpService {
+    constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {}
+
+    getInstructors() {
+        return this.http.get<Instructor[]>(this.baseUrl + "api/v1/instructors")
+    }
+
+    createInstructor(instructor: Instructor) {
+        return this.http.post(this.baseUrl + "api/v1/instructors/add", instructor)
+    }
+
+    updateInstructor(instructor: Instructor) {
+        return this.http.put(this.baseUrl + "api/v1/instructors/" + instructor.id, instructor)
+    }
+
+    deleteInstructor(id: string) {
+        return this.http.delete(this.baseUrl + "api/v1/instructors/" + id)
+    }
+}
\ No newline at end of file