diff --git a/app/Http/Resources/ToDoCollection.php b/app/Http/Resources/ToDoCollection.php
index 2d53a16..076ca20 100644
--- a/app/Http/Resources/ToDoCollection.php
+++ b/app/Http/Resources/ToDoCollection.php
@@ -17,6 +17,7 @@ class ToDoCollection extends ResourceCollection
         return [
             'data' => $this->collection,
             'to_dos_count' => $this->count(),
+            'to_dos_count_check' => $this->where('checked_at', '!=', null)->count(),
         ];
     }
 }
diff --git a/resources/js/views/ToDoLists/ToDoListIndex.vue b/resources/js/views/ToDoLists/ToDoListIndex.vue
index 90deaab..9547229 100644
--- a/resources/js/views/ToDoLists/ToDoListIndex.vue
+++ b/resources/js/views/ToDoLists/ToDoListIndex.vue
@@ -2,14 +2,14 @@
     <div class="p-2">
         <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
         <div v-if="modal" class="modal px-2">
-            <p class="m-1 text-center">Add a new to-do list ?</p>
+            <p class="m-2 text-center">Add a new to-do list ?</p>
             <InputField name="name" label="Title" placeholder="Your Title" required @update:field="name = $event" :errors="errors" />
-            <div class="flex-center m-1 mt-2">
+            <div class="flex justify-center mx-2 my-4">
                 <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
                 <button class="btn-primary" @click="create">Create</button>
             </div>
         </div>
-        <div class="flex-between flex-center mb-1">
+        <div class="flex justify-between mb-1">
             <a href="#" class="btn" @click="$router.back()">Back</a>
 
             <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
@@ -23,7 +23,14 @@
                          :to="'/to-do-lists/' + toDoList.data.to_do_list_id"
                       :to-do-list="toDoList"
                       class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" >
-                {{ toDoList.data.attributes.data.name }}
+                <div class="bg-orange-300 rounded text-black m-2 p-2">
+                    <div class="flex justify-between">
+                        {{ toDoList.data.attributes.data.name }}
+                        <span class="text-orange-900">
+                            {{ toDoList.data.attributes.data.to_dos.to_dos_count_check }} / {{ toDoList.data.attributes.data.to_dos.to_dos_count }}
+                        </span>
+                    </div>
+                </div>
             </router-link>
         </div>
     </div>
diff --git a/resources/js/views/ToDoLists/ToDoListShow.vue b/resources/js/views/ToDoLists/ToDoListShow.vue
index cdcc8ed..0e55f4a 100644
--- a/resources/js/views/ToDoLists/ToDoListShow.vue
+++ b/resources/js/views/ToDoLists/ToDoListShow.vue
@@ -1,5 +1,20 @@
 <template>
-    <div class="p-4">
+    <div class="px-4 py-2">
+        <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
+        <div v-if="modal" class="modal">
+            <p class="m-2 text-center">Are you sure you want to delete this list ?</p>
+            <div class="flex justify-center mx-2 my-4">
+                <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
+                <button class="btn-alert" @click="destroy"> Delete</button>
+            </div>
+        </div>
+        <div class="flex items-center justify-between pb-2">
+            <router-link to="/memos/" class="btn-secondary">Back</router-link>
+            <div class="flex-middle">
+                <router-link :to="'/to-do-lists/' + toDoList.data.to_do_list_id" class="btn-secondary mr-2" >Edit</router-link>
+                <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
+            </div>
+        </div>
         <div v-if="!loading" class="bg-orange-400 rounded p-1">
             <h1 class="text-2xl font-bold mb-2 ml-2">{{ toDoList.data.attributes.data.name }}</h1>
             <ul class='p-1'
@@ -48,6 +63,7 @@ export default {
             loading: true,
             name: '',
             errors: null,
+            modal: false,
         }
     },
     mounted() {
@@ -125,6 +141,16 @@ export default {
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete contact.' + errorRes)
                 })
+        },
+        destroy: function () {
+            // eslint-disable-next-line no-undef
+            axios.delete('/api/to-do-lists/' + this.$route.params.id)
+                .then(() => {
+                    this.$router.push('/to-do-lists')
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete list.' + errorRes)
+                })
         }
     }
 }