diff --git a/app/Http/Controllers/MemosController.php b/app/Http/Controllers/MemosController.php
index 8c10ef8..e196bd4 100644
--- a/app/Http/Controllers/MemosController.php
+++ b/app/Http/Controllers/MemosController.php
@@ -54,6 +54,24 @@ class MemosController extends Controller
         return response([], Response::HTTP_NO_CONTENT);
     }
 
+    public function home()
+    {
+        $this->authorize('viewAny', Memo::class);
+
+        $memos = request()->user()->memos;
+        $count = $memos->count();
+        $created = $memos->sortByDesc('created_at')->first();
+        $updated = $memos->sortByDesc('updated_at')->first();
+
+//        dd($count, $created, $updated);
+
+        return response(['data' => [
+            'count' => $count,
+            'last_created' => new MemoResource($created),
+            'last_updated' => new MemoResource($updated),
+        ]]);
+    }
+
     private function validateData()
     {
         return request()->validate([
diff --git a/resources/js/components/Loader.vue b/resources/js/components/Loader.vue
index c129197..cefe01d 100644
--- a/resources/js/components/Loader.vue
+++ b/resources/js/components/Loader.vue
@@ -1,6 +1,8 @@
 <template>
-    <div v-if="loading" class="flex items-center">
-        <svg-vue icon="loader" class="loader"/>
+    <div class="min-h-16 w-full">
+        <div v-if="loading" class="flex justify-center text-gray-900 m-4">
+            <svg-vue icon="loader" class="stroke-current w-12 h-12"/>
+        </div>
     </div>
 </template>
 
diff --git a/resources/js/views/Games/Quizz/Quizz.vue b/resources/js/views/Games/Quizz/Quizz.vue
index e832764..4ac3960 100644
--- a/resources/js/views/Games/Quizz/Quizz.vue
+++ b/resources/js/views/Games/Quizz/Quizz.vue
@@ -1,18 +1,18 @@
 <template>
     <div class="p-2">
-        <h1 class="text-3xl text-center text-orange-900 font-bold mb-4">Quizz</h1>
-        <div v-if="!selectedQuizz" class="flex justify-center my-4">
+        <h1 class="text-3xl text-center text-gray-900 font-bold mb-4">Quizz</h1>
+        <div v-if="!selectedQuizz" class="flex justify-center flex-wrap my-4">
             <a v-for="(quizz, key) in quizzList"
                :key="key"
-               class="btn-primary mr-1 cursor-pointer"
+               class="btn mr-1 mb-1 cursor-pointer"
                @click="selectedQuizz = key">
                {{ key }}
             </a>
         </div>
-        <div v-if="!levelQuizz" class="flex justify-center my-4">
+        <div v-if="!levelQuizz" class="flex justify-center flex-wrap my-4">
             <a  v-for="(level, index) in levels"
                 :key="index"
-                class="btn-primary mr-1 cursor-pointer"
+                class="btn mr-1 mb-1 cursor-pointer"
                 @click="levelQuizz = level">
                 Niveau {{ level }}
             </a>
@@ -20,20 +20,20 @@
         <div v-if="selectedQuizz && levelQuizz">
 
             <div v-if="!responses" class="flex justify-center my-4">
-                <span class="btn-primary" @click="startQuizz">Commencer</span>
+                <span class="btn" @click="startQuizz">Commencer</span>
             </div>
             <div v-else-if="results" class="flex flex-col items-center">
                 <div class="text-center text-2xl font-bold my-4">{{ selectedQuizz.name }}</div>
                 <div class="text-center text-2xl font-bold my-4">{{ note }} / {{ responses.length }}</div>
                 <span class="btn-primary mt-4" @click="newQuizz">Nouveau Quizz</span>
             </div>
-            <div v-else class="flex flex-col">
+            <div v-else class="flex flex-col flex-wrap">
                 <div class="text-center my-4"><span class="text-2xl font-bold">{{ currentQuestion[0] }}</span></div>
-                <div class="flex justify-center my-4">
+                <div class="flex justify-center flex-wrap my-4">
                     <div v-for="(response, index) in currentResponses"
                          :key="index"
                          @click="responsed(currentQuestion, response)"
-                         class="btn mx-1">
+                         class="btn mx-1 mb-1">
                         {{ response }}
                     </div>
                 </div>
diff --git a/resources/js/views/Home.vue b/resources/js/views/Home.vue
index 6eb2bec..22de86c 100644
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -1,17 +1,21 @@
 <template>
-    <div class="p-2">
-        <h1>Home</h1>
-        <OpenWeatherCard />
+    <div class="p-4">
+        <h1 class="page-title">Home</h1>
+        <div class="flex flex-wrap -m-2 mt-2">
+            <OpenWeatherCard class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
+            <MemoHome class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
+        </div>
     </div>
 </template>
 
 <script>
 import OpenWeatherCard from './Meteo/OpenWeatherCard'
+import MemoHome from './Memo/MemoHome'
 
 export default {
     name: 'Home',
     components: {
-        OpenWeatherCard
+        OpenWeatherCard, MemoHome
     }
 }
 </script>
diff --git a/resources/js/views/Memo/MemoHome.vue b/resources/js/views/Memo/MemoHome.vue
new file mode 100644
index 0000000..53aae6c
--- /dev/null
+++ b/resources/js/views/Memo/MemoHome.vue
@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <div class="card m-2">
+            <div v-if="loading"  class="p-2">
+                <h2>Memos</h2>
+                <Loader />
+            </div>
+            <div v-else class="p-2">
+                <router-link to="/memos"><h2 class="mb-4 text-gray-900">{{ memos.count }} Memos</h2></router-link>
+                <router-link :to="memos.last_updated.links.self" class="m-2 block">
+                    <div class="flex justify-between text-black">
+                        Dernier édité
+                        <span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_updated.data.last_updated }}</span>
+                    </div>
+                    <div class="text-2xl font-bold">{{ memos.last_updated.data.name }}</div>
+                </router-link>
+                <hr class="border border-gray-900">
+                <router-link :to="memos.last_created.links.self" class="m-2 block">
+                    <div class="flex justify-between text-black">
+                        Dernier créé
+                        <span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_created.data.last_updated }}</span>
+                    </div>
+                    <div class="text-2xl font-bold">{{ memos.last_created.data.name }}</div>
+                </router-link>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Loader from '../../components/Loader'
+
+export default {
+    name: 'MemoHome',
+    components: {
+        Loader
+    },
+    data: function () {
+        return {
+            loading: true,
+            memos: '',
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/memos/home')
+            .then(response => {
+                this.memos = response.data.data
+                console.log(this.memos)
+                this.loading = false
+            })
+            .catch(() => {
+                this.loading = false
+                console.log('Unable to fetch memos.')
+            })
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/views/Meteo/OpenWeatherCard.vue b/resources/js/views/Meteo/OpenWeatherCard.vue
index 41385ac..d666160 100644
--- a/resources/js/views/Meteo/OpenWeatherCard.vue
+++ b/resources/js/views/Meteo/OpenWeatherCard.vue
@@ -1,24 +1,22 @@
 <template>
-    <div class="my-2">
-        <h2>Météo</h2>
-        <p v-if="loading"></p>
-        <div v-else class="my-1">
-
-            <div class="flex flex-wrap -m-2 mt-2">
-                <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
-                    <div class="bg-primary-300 rounded text-black m-2 p-2 flex flex-col">
-                        <h3 class="text-2xl font-bold text-center">{{ meteo.city.name }}</h3>
-                        <div class="flex">
-                            <div class="flex flex-col justify-end">
-                                <div>{{ dateFormat(meteo.list[0].dt_txt) }}</div>
-                                <div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div>
-                                <div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div>
-                                <div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
-                            </div>
-                            <div class="flex flex-col flex-1 justify-end items-end">
-                                <i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
-                                <div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
-                            </div>
+    <div>
+        <div v-if="loading">
+            <Loader />
+        </div>
+        <div v-else class="m-2">
+            <div class="card">
+                <div class="text-black m-2 p-2 flex flex-col">
+                    <h2>{{ meteo.city.name }}</h2>
+                    <div class="flex">
+                        <div class="flex flex-col justify-end">
+                            <div>{{ dateFormat(meteo.list[0].dt_txt) }}</div>
+                            <div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div>
+                            <div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div>
+                            <div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
+                        </div>
+                        <div class="flex flex-col flex-1 justify-end items-end">
+                            <i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
+                            <div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
                         </div>
                     </div>
                 </div>
@@ -28,8 +26,13 @@
 </template>
 
 <script>
+import Loader from '../../components/Loader'
+
 export default {
     name: 'OpenWeatherCard',
+    components: {
+        Loader
+    },
     data: function () {
         return {
             loading: true,
diff --git a/resources/js/views/ToDoLists/ToDo.vue b/resources/js/views/ToDoLists/ToDo.vue
index 160bede..dd19373 100644
--- a/resources/js/views/ToDoLists/ToDo.vue
+++ b/resources/js/views/ToDoLists/ToDo.vue
@@ -9,7 +9,9 @@
         </span>
     </div>
     <div v-else class="flex items-center flex-1">
-        <input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checkedIt" class="block mr-1">
+        <CheckBoxField :check-it="!!(checked)"
+                       @update:field="checked = $event"
+                       class="block mr-1" />
         <input type="text"
                v-model="toDo.data.attributes.data.name"
                @keypress.enter="updateToDo"
@@ -58,13 +60,13 @@ export default {
         },
     },
     watch: {
-        checked: function (val) {
+        checked: function () {
             // eslint-disable-next-line no-undef
             axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.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
                     this.toDo.data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
-                    this.checked = val
+                    this.checked = !!(res.data.data.attributes.data.checked_at)
                 })
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete contact.' + errorRes)
diff --git a/resources/js/views/User/UserAdmin.vue b/resources/js/views/User/UserAdmin.vue
index 6795c09..6a25cd2 100644
--- a/resources/js/views/User/UserAdmin.vue
+++ b/resources/js/views/User/UserAdmin.vue
@@ -2,7 +2,7 @@
     <div v-if="authUser">
         <div class="flex m-4">
             <div class="avatar mr-2">
-                <Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
+                <Avatar :avatar="authUser.data.attributes.profile_image.data.attributes.path" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
             </div>
             <div class="flex flex-col justify-center ml-2">
                 <div><strong>{{ authUser.data.attributes.name }}</strong></div>
diff --git a/resources/sass/components/_base.scss b/resources/sass/components/_base.scss
index 4ac8590..e2c31e6 100644
--- a/resources/sass/components/_base.scss
+++ b/resources/sass/components/_base.scss
@@ -30,3 +30,6 @@
     max-width: 12rem;
 }
 
+.min-h-16 {
+    min-height: 4rem;
+}
diff --git a/resources/sass/components/_elements.scss b/resources/sass/components/_elements.scss
index 73a251d..ba198d6 100644
--- a/resources/sass/components/_elements.scss
+++ b/resources/sass/components/_elements.scss
@@ -1,28 +1,5 @@
 // Elements
 
-//@for $i from 1 through 9 {
-//
-//    .bg-primary-#{$i}00 {
-//        @apply bg-green-#{$i}00;
-//    }
-//
-//    .hover:bg-primary-#{$i}00 {
-//        @apply bg-green-#{$i}00;
-//    }
-//
-//    .bg-secondary-#{$i}00 {
-//        @apply bg-blue-#{$i}00;
-//    }
-//
-//    .text-primary-#{$i}00 {
-//        @apply text-gray-#{$i}00;
-//    }
-//
-//    .hover:text-primary-#{$i}00 {
-//        @apply text-gray-#{$i}00;
-//    }
-//}
-
 .page-title {
     @apply text-3xl font-bold text-gray-900;
 }
@@ -85,12 +62,4 @@ a {
     h2 {
         @apply text-2xl text-center font-bold;
     }
-
-    &:hover {
-        @apply bg-gray-500 text-gray-700;
-
-        h2 {
-            @apply text-gray-700;
-        }
-    }
 }
diff --git a/routes/api.php b/routes/api.php
index 2d23833..47453da 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -18,6 +18,7 @@ Route::middleware('auth:api')->group(function () {
 
     Route::get('auth-user', 'AuthUserController@show');
 
+    Route::get('/memos/home', 'MemosController@home');
 
     Route::apiResources([
         '/users' => 'UserController',