diff --git a/app/Http/Controllers/ToDoListController.php b/app/Http/Controllers/ToDoListController.php
index 98fa2a3..e3ad9e2 100644
--- a/app/Http/Controllers/ToDoListController.php
+++ b/app/Http/Controllers/ToDoListController.php
@@ -8,6 +8,13 @@ use Illuminate\Http\Request;
 
 class ToDoListController extends Controller
 {
+    public function index()
+    {
+        $this->authorize('viewAny', ToDoList::class);
+
+        return ToDoListResource::collection(request()->user()->toDoLists);
+    }
+
     public function store()
     {
         $this->authorize('create', ToDoList::class);
diff --git a/app/Http/Resources/ToDoList.php b/app/Http/Resources/ToDoList.php
index 534445f..7de7c44 100644
--- a/app/Http/Resources/ToDoList.php
+++ b/app/Http/Resources/ToDoList.php
@@ -23,7 +23,7 @@ class ToDoList extends JsonResource
                     'data' => [
                         'name' => $this->name,
                         'to_dos' => new ToDoCollection($this->toDos),
-                        'posted_by' => new UserResource($this->user),
+                        'posted_by' => new UserResource($this->author),
                         'last_updated' => $this->updated_at->diffForHumans(),
 //                    'cover_image' => new ImageResource($this->coverImage),
                     ]
diff --git a/app/Models/User.php b/app/Models/User.php
index 3d8cfcd..7d0fe28 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -59,6 +59,11 @@ class User extends Authenticatable
         return $this->hasMany(Memo::class);
     }
 
+    public function toDoLists() : HasMany
+    {
+        return $this->hasMany(ToDoList::class);
+    }
+
     public function images(): MorphMany
     {
         return $this->morphMany(Image::class, 'imageable');
@@ -83,9 +88,4 @@ class User extends Authenticatable
                 $userImage->path = 'images/default-cover.jpg';
             });
     }
-
-    public function toDoLists(): HasMany
-    {
-        return $this->hasMany(ToDoList::class);
-    }
 }
diff --git a/resources/js/components/InputField.vue b/resources/js/components/InputField.vue
index 17b92b6..aff686b 100644
--- a/resources/js/components/InputField.vue
+++ b/resources/js/components/InputField.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="relative mt-1">
+    <div class="relative mt-1" :classes="classes">
         <label :for="name" class="pb-1">{{ label }}</label>
         <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
         <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
@@ -27,6 +27,7 @@
             },
             errors: Object,
             data: String,
+            classes: String,
         },
         data: function () {
             return {
diff --git a/resources/js/components/Nav.vue b/resources/js/components/Nav.vue
index e046cd6..e6d2eae 100644
--- a/resources/js/components/Nav.vue
+++ b/resources/js/components/Nav.vue
@@ -9,7 +9,7 @@
             <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
         </router-link>
         <router-link to="/to-do-lists" class="nav-item">
-            <svg-vue icon="memos" />
+            <svg-vue icon="list" />
             <span v-bind:class="{ navhidden: !toggleNav }">To Do Lists</span>
         </router-link>
         <router-link to="/jeux" class="nav-item">
diff --git a/resources/js/views/ToDoLists/ToDoList.vue b/resources/js/views/ToDoLists/ToDoList.vue
new file mode 100644
index 0000000..a8bce22
--- /dev/null
+++ b/resources/js/views/ToDoLists/ToDoList.vue
@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <h1>{{ toDoList.data.attributes.data.name }}</h1>
+        <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
+            ------- no to Do -------
+        </div>
+        <div v-else v-for="toDo in toDoList.data.attributes.data.to_dos.data">{{ toDo.data.attributes.data.name }}</div>
+        <div>
+            <InputField name="name" classes="inline" placeholder="New To Do" required @update:field="name = $event" :errors="errors" />
+            <button class="btn-primary" @click="addToDo">ADD</button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import InputField from "../../components/InputField";
+
+    export default {
+        name: "ToDoList",
+        components: {
+            InputField
+        },
+        data: function () {
+            return {
+                name: '',
+                errors: null,
+            }
+        },
+        props: {
+            toDoList: {
+                type: Object,
+                require: true
+            }
+        },
+        methods: {
+            addToDo: function () {
+                axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
+                    .then(res => {
+                        console.log(res.data.data)
+                        this.modal = false
+                        this.name = ''
+                        this.toDoList.data.attributes.data.to_dos.data.push(res.data)
+                    })
+                    .catch(errorRes => {
+                        console.log('Internal Error, Unable to delete contact.' + errorRes)
+                    })
+            }
+        }
+    }
+</script>
diff --git a/resources/js/views/ToDoLists/ToDoListIndex.vue b/resources/js/views/ToDoLists/ToDoListIndex.vue
index 379ce19..0218f7b 100644
--- a/resources/js/views/ToDoLists/ToDoListIndex.vue
+++ b/resources/js/views/ToDoLists/ToDoListIndex.vue
@@ -15,17 +15,24 @@
             <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
         </div>
         <Loader v-if="loading" />
+        <div v-else>
+            <div v-if="toDoLists.length < 1">No List Yet</div>
+            <div v-else v-for="toDoList in toDoLists">
+                <ToDoList :to-do-list="toDoList" />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
     import Loader from "../../components/Loader";
     import InputField from "../../components/InputField";
+    import ToDoList from "./ToDoList";
 
     export default {
         name: "ToDoListIndex",
         components: {
-            Loader, InputField
+            Loader, InputField, ToDoList
         },
         data: function () {
             return {
@@ -38,8 +45,8 @@
         },
         mounted() {
             axios.get('/api/to-do-lists')
-                .then(response => {
-                    this.toDoLists = response.data.data
+                .then(res => {
+                    this.toDoLists = res.data.data
                     this.loading = false
                 })
                 .catch(errorRes => {
@@ -56,7 +63,7 @@
                         console.log(res)
                         this.modal = false
                         this.name = ''
-                        // this.$router.push('/memos')
+                        this.toDoLists.push(res.data)
                     })
                     .catch(errorRes => {
                         console.log('Internal Error, Unable to delete contact.' + errorRes)
diff --git a/resources/svg/list.svg b/resources/svg/list.svg
new file mode 100644
index 0000000..890c1bb
--- /dev/null
+++ b/resources/svg/list.svg
@@ -0,0 +1,11 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
+<g>
+	<rect x="0" y="170.667" width="42.667" height="42.667"/>
+	<rect x="0" y="85.333" width="42.667" height="42.667"/>
+	<rect x="0" y="256" width="42.667" height="42.667"/>
+	<rect x="85.333" y="85.333" width="298.667" height="42.667"/>
+	<rect x="85.333" y="170.667" width="298.667" height="42.667"/>
+	<rect x="85.333" y="256" width="298.667" height="42.667"/>
+</g>
+</svg>
diff --git a/tests/Feature/ToDoListsTest.php b/tests/Feature/ToDoListsTest.php
index 4bedbcf..7c21539 100644
--- a/tests/Feature/ToDoListsTest.php
+++ b/tests/Feature/ToDoListsTest.php
@@ -88,6 +88,50 @@ class ToDoListsTest extends TestCase
         $response->assertStatus(403);
     }
 
+    /** @test */
+    public function a_user_can_retrueved_all_this_to_do_lists()
+    {
+        $this->actingAs($user = factory(User::class)->create(), 'api');
+        $toDoListOne = factory(ToDoList::class)->create(['user_id' => $user->id]);
+        $toDoListTwo = factory(ToDoList::class)->create(['user_id' => $user->id]);
+
+        $response = $this->get('/api/to-do-lists');
+
+        $response->assertJson([
+            'data' => [
+                [
+                    'data' => [
+                        'to_do_list_id' => $toDoListOne->id,
+                        'attributes' => [
+                            'data' => [
+                                'name' => $toDoListOne->name,
+                                'last_updated' => $toDoListOne->updated_at->diffForHumans(),
+                            ]
+                        ],
+                    ],
+                    'links' => [
+                        'self' => $toDoListOne->path(),
+                    ]
+                ],
+                [
+                    'data' => [
+                        'to_do_list_id' => $toDoListTwo->id,
+                        'attributes' => [
+                            'data' => [
+                                'name' => $toDoListTwo->name,
+                                'last_updated' => $toDoListTwo->updated_at->diffForHumans(),
+                            ]
+                        ],
+                    ],
+                    'links' => [
+                        'self' => $toDoListTwo->path(),
+                    ]
+                ]
+            ]
+
+        ]);
+    }
+
     /** @test */
     public function a_to_do_list_can_be_patch()
     {