diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8961495..39bd155 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,6 +6,7 @@ import { TodosIndexComponent } from './todos-index/todos-index.component';
 import { TodosCreateComponent } from './todos-create/todos-create.component';
 
 import { FormsModule } from '@angular/forms';
+import { TodoService } from './todo.service'
 
 @NgModule({
   declarations: [
@@ -17,7 +18,7 @@ import { FormsModule } from '@angular/forms';
     BrowserModule,
     FormsModule
   ],
-  providers: [],
+  providers: [TodoService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src/app/todo.services.ts b/src/app/todo.service.ts
similarity index 100%
rename from src/app/todo.services.ts
rename to src/app/todo.service.ts
diff --git a/src/app/todos-index/todos-index.component.html b/src/app/todos-index/todos-index.component.html
index a32956d..403fad6 100644
--- a/src/app/todos-index/todos-index.component.html
+++ b/src/app/todos-index/todos-index.component.html
@@ -1 +1,4 @@
 <h2>List of Todos</h2>
+<ul>
+    <li *ngFor="let todo of todos">{{todo}}</li>
+</ul>
diff --git a/src/app/todos-index/todos-index.component.ts b/src/app/todos-index/todos-index.component.ts
index 5c6e35e..b73bb86 100644
--- a/src/app/todos-index/todos-index.component.ts
+++ b/src/app/todos-index/todos-index.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { TodoService } from '../todo.service';
 
 @Component({
   selector: 'app-todos-index',
@@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TodosIndexComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+      private todoService: TodoService
+  ) { }
+
+  todos;
 
   ngOnInit() {
+      this.todos = this.todoService.getTodos();
   }
 
 }