diff --git a/app/Http/Controllers/ToDoController.php b/app/Http/Controllers/ToDoController.php
index 719236d..94f29d2 100644
--- a/app/Http/Controllers/ToDoController.php
+++ b/app/Http/Controllers/ToDoController.php
@@ -59,6 +59,18 @@ class ToDoController extends Controller
             ->setStatusCode(200);
     }
 
+    public function checkedToogle(ToDoList $toDoList, ToDo $toDo)
+    {
+        $this->authorize('update', $toDoList);
+
+        ($toDo->checked_at) ? $toDo->checked_at = NULL :  $toDo->checked_at = now();
+        $toDo->save();
+
+        return (new ToDoResource($toDo))
+            ->response()
+            ->setStatusCode(200);
+    }
+
     private function validateData()
     {
         return request()->validate([
diff --git a/app/Http/Resources/Memo.php b/app/Http/Resources/Memo.php
index b95f4d8..dcfc970 100644
--- a/app/Http/Resources/Memo.php
+++ b/app/Http/Resources/Memo.php
@@ -23,6 +23,7 @@ class Memo extends JsonResource
                 'name' => $this->name,
                 'memo' => $this->memo,
                 'last_updated' => $this->updated_at->diffForHumans(),
+                'last_updated_timestamp' => $this->updated_at->timestamp,
                 'attributes' => [
                     'posted_by' => new UserResource($this->user),
                     'cover_image' => new ImageResource($this->coverImage),
diff --git a/app/Http/Resources/ToDo.php b/app/Http/Resources/ToDo.php
index 0fbf4c0..b8f3cb6 100644
--- a/app/Http/Resources/ToDo.php
+++ b/app/Http/Resources/ToDo.php
@@ -22,7 +22,7 @@ class ToDo extends JsonResource
                     'data' => [
                         'name' => $this->name,
                         'order' => (int) $this->order,
-                        'checked_at' => optional($this->checked_at)->diffForHumans(),
+                        'checked_at' => ($this->checked_at) ? 1 : null,
                         'last_updated' => $this->updated_at->diffForHumans(),
                     ]
                 ]
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/Memo/MemoCreate.vue b/resources/js/views/Memo/MemoCreate.vue
index b4016cc..b340166 100755
--- a/resources/js/views/Memo/MemoCreate.vue
+++ b/resources/js/views/Memo/MemoCreate.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="p-4">
-        <div class="flex justify-between flex-center mb-4">
-            <router-link to="/memos/" class="btn">Back</router-link>
-            <button class="btn-primary">Add New Memo</button>
-        </div>
         <form @submit.prevent="submitForm">
+            <div class="flex justify-between flex-center mb-4">
+                <router-link to="/memos/" class="btn">Back</router-link>
+                <button class="btn-primary">Add New Memo</button>
+            </div>
             <InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
             <TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
         </form>
diff --git a/resources/js/views/Memo/MemoIndex.vue b/resources/js/views/Memo/MemoIndex.vue
index bc2bda5..f0d09e0 100755
--- a/resources/js/views/Memo/MemoIndex.vue
+++ b/resources/js/views/Memo/MemoIndex.vue
@@ -43,12 +43,20 @@ export default {
         axios.get('/api/memos')
             .then(response => {
                 this.memos = response.data.data
+                this.reorderList()
                 this.loading = false
             })
             .catch(() => {
                 this.loading = false
                 console.log('Unable to fetch memos.')
             })
+    },
+    methods: {
+        reorderList() {
+            this.memos.sort(function(a, b) {
+                return a.data.last_updated_timestamp + b.data.last_updated_timestamp
+            })
+        }
     }
 }
 </script>
diff --git a/resources/js/views/ToDoLists/ToDo.vue b/resources/js/views/ToDoLists/ToDo.vue
deleted file mode 100644
index ded8bd2..0000000
--- a/resources/js/views/ToDoLists/ToDo.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-    <li class="todo flex justify-between items-center bg-white rounded mb-1 px-2 py-1"
-        >
-        <div class="flex flex-1">
-            <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
-            {{ toDo.data.attributes.data.name }}
-        </div>
-        <div class="flex">
-            <svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
-            <input type="checkbox" v-model="checked">
-            <span v-if="edit" @click="deleteToDo(toDo, position)">X</span>
-        </div>
-    </li>
-</template>
-
-<script>
-export default {
-    name: 'ToDo',
-    data: function () {
-        return {
-            name: this.toDo.data.attributes.data.name,
-            errors: null,
-            edit: false,
-            checked: false,
-        }
-    },
-    props: {
-        toDo: {
-            type: Object,
-            require: true
-        },
-        position: {
-            type: Number,
-            require: true
-        }
-    },
-    mounted() {
-        console.log(this.$key)
-    }
-}
-</script>
-
-<style scoped>
-    .edit-icon {
-        opacity: 0;
-        transition: opacity 0.2s;
-    }
-
-    .todo:hover .edit-icon {
-        opacity: 1;
-        transition: opacity 0.2s;
-    }
-</style>
diff --git a/resources/js/views/ToDoLists/ToDoList.vue b/resources/js/views/ToDoLists/ToDoList.vue
deleted file mode 100644
index bfbd72e..0000000
--- a/resources/js/views/ToDoLists/ToDoList.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-    <div>
-        <div class="m-2 px-2 pt-2 bg-orange-400 rounded flex flex-col justify-between shadow">
-            <div>
-                <h1 class="text-2xl font-bold mb-2">{{ toDoList.data.attributes.data.name }}</h1>
-                <ul class="draggable-list drop-zone"
-                    @drop='onDrop($event, toDoList)'
-                    @dragover.prevent
-                    @dragenter.prevent
-                >
-                    <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
-                        ------- no to Do -------
-                    </div>
-                    <ToDo v-else
-                          v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
-                          :key="indexToDo"
-                          :toDo="toDo"
-                          :position="indexToDo"
-                          draggable
-                          @dragstart='startDrag($event, toDo)'
-                          class='drag-el'
-                          />
-                </ul>
-            </div>
-            <div class="flex items-center mt-2">
-                <InputField name="name" classes="py-1" placeholder="New To Do" required @update:field="name = $event" :errors="errors" />
-                <button class="btn-primary ml-1 mb-2 py-1" @click="addToDo">ADD</button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import InputField from '../../components/InputField'
-import ToDo from './ToDo'
-//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
-
-export default {
-    name: 'ToDoList',
-    components: {
-        InputField, ToDo
-    },
-    data: function () {
-        return {
-            name: '',
-            errors: null,
-            dragStartIndex: null,
-            edit: false,
-        }
-    },
-    props: {
-        toDoList: {
-            type: Object,
-            require: true
-        }
-    },
-    methods: {
-        addToDo: function () {
-            // eslint-disable-next-line no-undef
-            axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
-                .then(res => {
-                    this.toDoList.data.attributes.data.to_dos.data.push(res.data)
-                    this.name = ''
-                })
-                .catch(errorRes => {
-                    console.log('Internal Error, Unable to delete contact.' + errorRes)
-                })
-        },
-        deleteToDo: function (toDo, position) {
-            // eslint-disable-next-line no-undef
-            axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
-                .then(() => {
-                    this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
-                })
-                .catch(errorRes => {
-                    console.log('Internal Error, Unable to delete contact.' + errorRes)
-                })
-        },
-        startDrag: (evt, item) => {
-            console.log('StartDrag', evt, item)
-            evt.dataTransfer.dropEffect = 'move'
-            evt.dataTransfer.effectAllowed = 'move'
-            evt.dataTransfer.setData('itemID', item.id)
-        },
-        onDrop (evt, list) {
-            console.log('onDrop', evt, list, this.toDoList)
-            const itemID = evt.dataTransfer.getData('itemID')
-            const item = this.toDoList.data.attributes.data.to_dos.data.find(item => item.id == itemID)
-            item.list = list
-        },
-    }
-}
-</script>
-
-
diff --git a/resources/js/views/ToDoLists/ToDoListIndex.vue b/resources/js/views/ToDoLists/ToDoListIndex.vue
index d057b24..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>
@@ -17,11 +17,21 @@
         <Loader v-if="loading" />
         <div v-else class="flex flex-wrap -m-2 mt-2">
             <div v-if="toDoLists.length < 1">No List Yet</div>
-                <ToDoList v-else
-                          v-for="(toDoList, index) in toDoLists"
-                          :key="index"
-                          :to-do-list="toDoList"
-                          class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
+            <router-link v-else
+                      v-for="(toDoList, index) in toDoLists"
+                      :key="index"
+                         :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" >
+                <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>
 </template>
@@ -29,12 +39,11 @@
 <script>
 import Loader from '../../components/Loader'
 import InputField from '../../components/InputField'
-import ToDoList from './ToDoList'
 
 export default {
     name: 'ToDoListIndex',
     components: {
-        Loader, InputField, ToDoList
+        Loader, InputField
     },
     data: function () {
         return {
diff --git a/resources/js/views/ToDoLists/ToDoListShow.vue b/resources/js/views/ToDoLists/ToDoListShow.vue
index 5751e3a..0e55f4a 100644
--- a/resources/js/views/ToDoLists/ToDoListShow.vue
+++ b/resources/js/views/ToDoLists/ToDoListShow.vue
@@ -1,9 +1,171 @@
 <template>
-    <div></div>
+    <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'
+                  v-for="(toDo, index) in toDoList.data.attributes.data.to_dos.data"
+                  :key="index"
+                  @drop='onDrop($event, toDo)'
+                  @dragover.prevent
+                  @dragenter.prevent >
+                <li
+                    draggable
+                    @dragstart='startDrag($event, toDo)'
+                    class='drag-el todo flex justify-between items-center bg-white rounded-sm mb-1 px-2 py-1' >
+                    <div class="flex flex-1">
+                        <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
+                        <span v-bind:class="{ 'line-through' : toDo.data.attributes.data.checked_at }">{{ toDo.data.attributes.data.name }}</span>
+                    </div>
+                    <div class="flex">
+                        <svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
+                        <input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checked(toDo, index)">
+                        <span @click="deleteToDo(toDo, index)" class="cursor-pointer ml-2 font-bold">X</span>
+                    </div>
+                </li>
+
+            </ul>
+            <div class="flex items-center mt-2 ml-2">
+                <InputField name="name" classes="py-1" placeholder="New To Do" required @update:field="name = $event" :errors="errors" @keyup.enter="addToDo" />
+                <button class="btn-primary ml-1 mb-2 py-1" @click="addToDo">ADD</button>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+import InputField from '../../components/InputField'
+//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
+//https://jsfiddle.net/jf9nrtds/
+
 export default {
-    name: 'ToDoListShow'
+    name: 'ToDoListShow',
+    components: {
+        InputField
+    },
+    data () {
+        return {
+            toDoList: null,
+            loading: true,
+            name: '',
+            errors: null,
+            modal: false,
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/to-do-lists/' + this.$route.params.id)
+            .then(res => {
+                this.toDoList = res.data
+                this.loading = false
+
+                this.reorderList()
+            })
+            .catch(errorRes => {
+                this.loading = false
+                if (errorRes.response.status === 404) {
+                    this.$router.push('/')
+                }
+            })
+
+    },
+    methods: {
+        startDrag: (evt, item) => {
+            evt.dataTransfer.dropEffect = 'move'
+            evt.dataTransfer.effectAllowed = 'move'
+            evt.dataTransfer.setData('toDoID', item.data.to_do_id)
+            evt.dataTransfer.setData('toDoOrder', item.data.attributes.data.order)
+        },
+        onDrop (evt, toDoEnd) {
+            const toDoID = parseInt(evt.dataTransfer.getData('toDoID'), 10)
+            const toDoOrder = parseInt(evt.dataTransfer.getData('toDoOrder'), 10)
+            let toDoMove = this.toDoList.data.attributes.data.to_dos.data.find(toDo => toDo.data.to_do_id === toDoID)
+
+            // eslint-disable-next-line no-undef
+            axios.patch('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDoMove.data.to_do_id + '/change', { 'new-order': toDoEnd.data.attributes.data.order })
+                .then(() => {
+                    toDoMove.data.attributes.data.order = toDoEnd.data.attributes.data.order
+                    toDoEnd.data.attributes.data.order = toDoOrder
+                    this.reorderList()
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
+                })
+        },
+        reorderList() {
+            this.toDoList.data.attributes.data.to_dos.data.sort(function(a, b) {
+                return a.data.attributes.data.order - b.data.attributes.data.order
+            })
+        },
+        addToDo: function () {
+            // eslint-disable-next-line no-undef
+            axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
+                .then(res => {
+                    this.toDoList.data.attributes.data.to_dos.data.push(res.data)
+                    this.name = ''
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
+                })
+        },
+        deleteToDo: function (toDo, position) {
+            // eslint-disable-next-line no-undef
+            axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
+                .then(() => {
+                    this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
+                })
+        },
+        checked: function (toDo, position) {
+            // eslint-disable-next-line no-undef
+            axios.patch('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id + '/check')
+                .then(res => {
+                    this.toDoList.data.attributes.data.to_dos.data[position].data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
+                })
+                .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)
+                })
+        }
+    }
 }
 </script>
+
+<style scoped>
+
+    .edit-icon {
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    .todo:hover .edit-icon {
+        opacity: 1;
+        transition: opacity 0.2s;
+    }
+
+</style>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 95bd339..0f0ded1 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -3,33 +3,13 @@
 @tailwind components;
 
 
-//@import "setup/reset";
-//@import "setup/colors";
-//@import "setup/fonts";
-//@import "setup/positions";
-//@import "setup/containers";
-//@import "setup/effects";
-//
-@import "components/transitions";
-@import "components/btn";
 @import "components/elements";
-//@import "components/loader";
-//@import "components/main";
+@import "components/btn";
 @import "components/nav";
-//@import "components/topbar";
-//@import "components/modal";
-//@import "components/images";
-//@import "components/avatar";
-//@import "components/alert_box";
-//@import "components/search_box";
-//@import "components/owfont-regular";
-//
-//@import "pages/auth";
-//@import "pages/users";
+@import "components/transitions";
+
 @import "pages/memos";
-//@import "pages/meteo";
-//@import "pages/games";
-//
+
 @import "pages/games/hangman";
 
 
diff --git a/resources/sass/components/_elements.scss b/resources/sass/components/_elements.scss
index 3edc9bf..97bb124 100644
--- a/resources/sass/components/_elements.scss
+++ b/resources/sass/components/_elements.scss
@@ -32,8 +32,6 @@ a {
     }
 }
 
-$modal-duration: 1s;
-
 .modal-container {
     @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
 }
@@ -45,7 +43,7 @@ $modal-duration: 1s;
     transform: translate(-50%, -50%);
     width: 400px;
     animation-name: modalopen;
-    animation-duration: $modal-duration;
+    animation-duration: 0.5s;
 }
 
 .box-toggle {
@@ -64,12 +62,13 @@ $modal-duration: 1s;
         transition: transform 0.3s;
 
         &.open {
+            //@apply rotate-90;
             transform: rotate(90deg);
         }
     }
 
     &-content {
-        padding: 0.5rem 1rem;
+        @apply px-4 py-2;
     }
 }
 
diff --git a/routes/api.php b/routes/api.php
index f248b77..2d23833 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -32,5 +32,6 @@ Route::middleware('auth:api')->group(function () {
     Route::post('/images/users/{users}', 'ImageController@users');
     Route::post('/images/memos/{memo}', 'ImageController@memos');
     Route::patch('/to-do-lists/{toDoList}/to-do/{toDo}/change', 'ToDoController@changeOrder');
+    Route::patch('/to-do-lists/{toDoList}/to-do/{toDo}/check', 'ToDoController@checkedToogle');
 
 });