diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index 05e6296..631e473 100644
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex bg-orange-200 h-screen overflow-y-hidden">
+    <div class="flex bg-gray-200 h-screen overflow-y-hidden">
         <Nav />
         <div v-if="authUser" class="w-full overflow-y-auto">
             <TopBar />
diff --git a/resources/js/components/Avatar.vue b/resources/js/components/Avatar.vue
index 1511269..c51decb 100644
--- a/resources/js/components/Avatar.vue
+++ b/resources/js/components/Avatar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex justify-center items-center rounded-full bg-orange-600 hover:bg-orange-800">
+    <div class="flex justify-center items-center rounded-full bg-primary-600 hover:bg-primary-800">
         <img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
         <span v-else class="text-2xl font-bold"  v-bind:class="'text-' + size">{{ alt[0] }}</span>
     </div>
diff --git a/resources/js/components/Nav.vue b/resources/js/components/Nav.vue
index edc369a..7ea23b4 100644
--- a/resources/js/components/Nav.vue
+++ b/resources/js/components/Nav.vue
@@ -1,5 +1,5 @@
 <template>
-    <nav v-bind:class="{ small: !toggleNav }" class="h-screen bg-orange-400 flex flex-col justify-between">
+    <nav v-bind:class="{ small: !toggleNav }" class="h-screen bg-primary-400 flex flex-col justify-between">
         <div class="">
             <router-link to="/" class="logo" v-bind:class="{ small: !toggleNav }">
                 <svg-vue icon="logo" />
@@ -18,7 +18,7 @@
                 <span>Jeux</span>
             </router-link>
         </div>
-        <div @click="toggleNavBar"  class="nav-toggle flex ml-2">
+        <div @click="toggleNavBar"  class="nav-toggle flex ml-2 cursor-pointer">
             <svg-vue icon="arrow" v-bind:class="{ small: !toggleNav }" />
         </div>
     </nav>
diff --git a/resources/js/components/TopBar.vue b/resources/js/components/TopBar.vue
index 40110ad..5e57bba 100644
--- a/resources/js/components/TopBar.vue
+++ b/resources/js/components/TopBar.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="top-bar flex justify-between bg-orange-300">
+    <div class="top-bar flex justify-between bg-primary-300">
         <router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
             <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
-            <span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
+            <span class="ml-2 hover:text-primary-900">{{ authUser.data.attributes.name }}</span>
         </router-link>
         <form v-if="authUser && search" class="m-2">
             <input type="search" name="search" placeholder="Search">
@@ -10,7 +10,7 @@
                 <svg-vue icon="search" />
             </button>
         </form>
-        <router-link to="/dashboard" v-if="authUser" class="text-orange-600 hover:text-orange-800">
+        <router-link to="/dashboard" v-if="authUser" class="text-primary-600 hover:text-primary-800">
             <svg-vue icon="params" class="w-10 m-2 fill-current" />
         </router-link>
         <router-link v-else to="/login">
diff --git a/resources/js/views/CssTesteur.vue b/resources/js/views/CssTesteur.vue
index ecbf122..c954a03 100644
--- a/resources/js/views/CssTesteur.vue
+++ b/resources/js/views/CssTesteur.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="m-2">
+    <div class="m-2 p-2 bg-white">
         <h1>testeur CSS</h1>
         <h2>testeur CSS</h2>
         <h3>testeur CSS</h3>
diff --git a/resources/js/views/Games/HangMan/Hangman.vue b/resources/js/views/Games/HangMan/Hangman.vue
index 18d2de6..99b664b 100644
--- a/resources/js/views/Games/HangMan/Hangman.vue
+++ b/resources/js/views/Games/HangMan/Hangman.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="p-2 game-container">
-        <h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
+        <h1 class="text-3xl text-center text-primary-900 font-bold">Pendu</h1>
         <p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
         <div class="flex justify-center dic-select">
             <div v-for="(dic, key) in dictionary" :key="key">
@@ -159,3 +159,118 @@ export default {
     }
 }
 </script>
+
+<style scoped>
+
+    .game-container {
+        max-width: 80rem;
+        margin: 0 auto;
+    }
+    .game-container-box {
+        padding: 2rem 3rem;
+        position: relative;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .dic-select {
+        min-height: 6rem;
+    }
+
+    .figure-container {
+        fill: transparent;
+        stroke: orange;
+        stroke-width: 4px;
+        stroke-linecap: round;
+    }
+
+    .figure-part {
+        display: none;
+        stroke: #7b341e;
+    }
+
+    .wrong-letters-container {
+        top: 4rem;
+        display: flex;
+        flex-direction: column;
+        text-align: right;
+    }
+
+    .wrong-letters-container .wrong-letters {
+        height: 3.5rem;
+    }
+
+    .wrong-letters-container p {
+        margin: 0 0 5px;
+    }
+
+    .wrong-letters-container span {
+        font-size: 2.4rem;
+    }
+
+    .word {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        bottom: 1rem;
+    }
+
+    .word .letter {
+        border-bottom: 3px solid #c05621;
+        display: inline-flex;
+        font-size: 30px;
+        align-items: center;
+        justify-content: center;
+        margin: 0 3px;
+        height: 50px;
+        width: 20px;
+    }
+
+    .popup-container {
+        position: absolute;
+        width: calc(100% - 6rem);
+    }
+
+    .popup-container .popup {
+        background-color: #c05621;
+        border-radius: 5px;
+        color: #fbd38d;
+        min-height: 10rem;
+        padding: 20px;
+        text-align: center;
+    }
+
+    .popup-container .popup button {
+        cursor: pointer;
+        background-color: #fff;
+        color: #7b341e;
+        border: 0;
+        margin-top: 20px;
+        padding: 12px 20px;
+        font-size: 16px;
+    }
+
+    .popup-container .popup button:active {
+         transform: scale(0.98);
+     }
+
+    .popup-container .popup button:focus {
+         outline: 0;
+     }
+
+    .notification-container {
+        background-color: #ed8936;
+        border-radius: 2px;
+        padding: 1rem;
+        text-align: center;
+        margin-bottom: 6rem;
+    }
+
+    .notification-container p {
+        margin: 0;
+    }
+
+
+</style>
diff --git a/resources/js/views/Memo/MemoIndex.vue b/resources/js/views/Memo/MemoIndex.vue
index f0d09e0..27fb5c1 100755
--- a/resources/js/views/Memo/MemoIndex.vue
+++ b/resources/js/views/Memo/MemoIndex.vue
@@ -13,10 +13,10 @@
                 <div class="m-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
                     <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
                     <div class="px-6 py-4">
-                        <h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
+                        <h1 class="text-gray-700">{{ memo.data.name }}</h1>
                     </div>
                     <div class="flex justify-end py-2">
-                        <span class="inline-block bg-orange-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
+                        <span class="inline-block bg-primary-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
                     </div>
                 </div>
             </router-link>
diff --git a/resources/js/views/Memo/MemoShow.vue b/resources/js/views/Memo/MemoShow.vue
index ee373f5..fe114e5 100755
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -30,8 +30,8 @@
     <!--           <TagBox :memo="memo" />-->
             <div class="p-4">
 
-                <div class="memo-style p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
-                <div class="bg-orange-400 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
+                <div class="memo-style rounded-t-sm p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
+                <div class="bg-primary-400 rounded-b-sm px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
             </div>
         </div>
     </div>
diff --git a/resources/js/views/Meteo/OpenWeatherCard.vue b/resources/js/views/Meteo/OpenWeatherCard.vue
index 5a2912d..41385ac 100644
--- a/resources/js/views/Meteo/OpenWeatherCard.vue
+++ b/resources/js/views/Meteo/OpenWeatherCard.vue
@@ -6,7 +6,7 @@
 
             <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-orange-300 rounded text-black m-2 p-2 flex flex-col">
+                    <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">
diff --git a/resources/js/views/ToDoLists/ToDo.vue b/resources/js/views/ToDoLists/ToDo.vue
index 2ab1a4a..f55ad99 100644
--- a/resources/js/views/ToDoLists/ToDo.vue
+++ b/resources/js/views/ToDoLists/ToDo.vue
@@ -11,7 +11,7 @@
         <input type="text"
                v-model="toDo.data.attributes.data.name"
                @keypress.enter="updateToDo"
-               class="flex-1 rounded-sm border border-orange-600 pl-1">
+               class="flex-1 rounded-sm border border-primary-600 pl-1">
         <span @click="edit = !edit">
             <svg-vue icon="close"  class="inline w-4 fill-current cursor-pointer mx-2" />
         </span>
diff --git a/resources/js/views/ToDoLists/ToDoListIndex.vue b/resources/js/views/ToDoLists/ToDoListIndex.vue
index 5633a9a..e4b0fa3 100644
--- a/resources/js/views/ToDoLists/ToDoListIndex.vue
+++ b/resources/js/views/ToDoLists/ToDoListIndex.vue
@@ -23,10 +23,10 @@
                       :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="bg-primary-300 rounded text-black m-2 p-2">
                     <div class="flex justify-between">
                         <span class="font-bold">{{ toDoList.data.attributes.data.name }}</span>
-                        <span class="text-orange-900">
+                        <span class="text-primary-900">
                             {{ toDoList.data.attributes.data.to_dos.to_dos_count_check }} / {{ toDoList.data.attributes.data.to_dos.to_dos_count }}
                         </span>
                     </div>
diff --git a/resources/js/views/ToDoLists/ToDoListShow.vue b/resources/js/views/ToDoLists/ToDoListShow.vue
index ef35d61..3c2e636 100644
--- a/resources/js/views/ToDoLists/ToDoListShow.vue
+++ b/resources/js/views/ToDoLists/ToDoListShow.vue
@@ -12,7 +12,7 @@
             <router-link to="/to-do-lists/" class="btn-secondary">Back</router-link>
             <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
         </div>
-        <div v-if="!loading" class="bg-orange-400 rounded p-1">
+        <div v-if="!loading" class="bg-primary-400 rounded p-1">
             <h1 class="mb-2 ml-2 todo" >
                 <span v-if="!listNameEdit" class="text-2xl font-bold flex items-center">{{ toDoList.data.attributes.data.name }}
                     <span @click="listNameEdit = !listNameEdit">
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 8e1625d..1f02206 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -11,7 +11,5 @@
 
 @import "pages/memos";
 
-@import "pages/games/hangman";
-
 
 @tailwind utilities;
diff --git a/resources/sass/components/_btn.scss b/resources/sass/components/_btn.scss
index 99ab789..5d1b5fe 100644
--- a/resources/sass/components/_btn.scss
+++ b/resources/sass/components/_btn.scss
@@ -1,77 +1,10 @@
 // Button
 
-//.btn {
-//    font-size: 1.6rem;
-//    border: 1px solid transparent;
-//    padding: 0.5rem 1rem;
-//    border-radius: 0.5rem;
-//    cursor: pointer;
-//    box-shadow: 1px 1px 2px $grey;
-//    text-decoration: none;
-//    transition: background-color 0.2s, color 0.2s;
-//
-//    &:hover {
-//        transition: background-color 0.2s, color 0.2s;
-//        background-color: $mediumDark;
-//        color: $white;
-//    }
-//}
-//
-//.btn-primary {
-//    @extend .btn;
-//    background-color: $medium;
-//    border-color: $medium;
-//    color: $white;
-//
-//    &:visited,
-//    &:focus {
-//        color: $white;
-//    }
-//}
-//
-//.btn-secondary {
-//    @extend .btn;
-//    background-color: $mediumLight;
-//    border-color: $mediumLight;
-//    color: $dark;
-//}
-//
-//.btn-alert {
-//    @extend .btn;
-//    background-color: $error;
-//    border-color: $error;
-//    color: $white;
-//
-//    &:hover {
-//        background-color: $dark;
-//    }
-//}
-//
-//.btn-icon {
-//    @extend .btn;
-//    display: flex;
-//    align-items: center;
-//    height: 4rem;
-//
-//    &:hover svg {
-//        fill: $white;
-//    }
-//
-//    svg {
-//        height: 3rem;
-//        margin-right: 1rem;
-//
-//        &:hover {
-//            fill: $white;
-//        }
-//    }
-//}
-
 .btn {
-    @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md cursor-pointer;
+    @apply border bg-primary-400 text-white py-2 px-4 shadow-sm rounded-md cursor-pointer;
 
     &:hover {
-        @apply text-white bg-orange-600 transition-all duration-300;
+        @apply text-white bg-primary-600 transition-all duration-300;
     }
 
     svg {
@@ -81,19 +14,19 @@
 
 .btn-primary {
     @extend .btn;
-    @apply bg-orange-600;
+    @apply bg-primary-600;
 
     &:hover {
-        @apply bg-orange-800;
+        @apply bg-primary-800;
     }
 }
 
 .btn-secondary {
     @extend .btn;
-    @apply bg-orange-600;
+    @apply bg-primary-600;
 
     &:hover {
-        @apply bg-orange-800;
+        @apply bg-primary-800;
     }
 }
 
diff --git a/resources/sass/components/_elements.scss b/resources/sass/components/_elements.scss
index 97bb124..2c487e6 100644
--- a/resources/sass/components/_elements.scss
+++ b/resources/sass/components/_elements.scss
@@ -20,15 +20,38 @@
     max-height: 16rem;
 }
 
+@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-orange-900;
+    @apply text-3xl font-bold text-primary-900;
 }
 
 a {
-    @apply text-orange-700;
+    @apply text-primary-700;
 
     &:hover {
-        @apply text-orange-900;
+        @apply text-primary-900;
     }
 }
 
@@ -50,10 +73,10 @@ a {
     @apply shadow;
 
     &-header {
-        @apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
+        @apply flex justify-between items-center px-4 py-2 rounded bg-primary-400 font-bold cursor-pointer;
 
         svg {
-            @apply w-8 text-orange-600 fill-current;
+            @apply w-8 text-primary-600 fill-current;
         }
     }
 
@@ -73,7 +96,7 @@ a {
 }
 
 .card {
-    @apply bg-orange-300 rounded;
+    @apply bg-primary-300 rounded;
 
     svg {
         @apply max-w-full max-h-64 m-auto fill-current;
@@ -84,10 +107,10 @@ a {
     }
 
     &:hover {
-        @apply bg-orange-500;
+        @apply bg-primary-500;
 
         h2 {
-            @apply text-orange-700;
+            @apply text-primary-700;
         }
     }
 }
diff --git a/resources/sass/components/alert_box.scss b/resources/sass/components/alert_box.scss
deleted file mode 100644
index 94783ce..0000000
--- a/resources/sass/components/alert_box.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.alert-box {
-    border: 1px solid $medium;
-    color: $medium;
-    font-weight: bold;
-    border-radius: 3px;
-
-}
-
-.alert-success {
-    @extend .alert-box;
-    border-color: $success;
-    background-color: $success;
-    color: $white;
-}
-
-.alert-error {
-    @extend .alert-box;
-    border-color: $error;
-    background-color: $error;
-    color: $white;
-}
diff --git a/resources/sass/components/avatar.scss b/resources/sass/components/avatar.scss
deleted file mode 100644
index 61f5f9c..0000000
--- a/resources/sass/components/avatar.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.avatar {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: $dark;
-    border-radius: 50%;
-    color: $light;
-    font-weight: bold;
-    text-decoration: none;
-
-    &-small {
-        $size: 3rem;
-        width: $size;
-        height: $size;
-        font-size: $size *2/3;
-    }
-
-    &-medium {
-        $size: 5rem;
-        width: $size;
-        height: $size;
-        font-size: $size *2/3;
-    }
-
-    &-large {
-        $size: 8rem;
-        width: $size;
-        height: $size;
-        font-size: $size *2/3;
-    }
-}
-
-.avatar-box {
-    text-decoration: none;
-}
diff --git a/resources/sass/components/events.scss b/resources/sass/components/events.scss
deleted file mode 100644
index 5b036cf..0000000
--- a/resources/sass/components/events.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.text-alert {
-    color: $error;
-}
-
-.error-field {
-    border-color: $error;
-}
diff --git a/resources/sass/components/images.scss b/resources/sass/components/images.scss
deleted file mode 100644
index 124dd07..0000000
--- a/resources/sass/components/images.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.cover {
-    width: 100%;
-    //height: 100%;
-    object-fit: cover;
-    object-position: 50% 50%;
-}
-
-.profile {
-    width: 20rem;
-    height: 20rem;
-    border-radius: 50%;
-    left: 3rem;
-    bottom: -3rem;
-}
diff --git a/resources/sass/components/loader.scss b/resources/sass/components/loader.scss
deleted file mode 100644
index e112963..0000000
--- a/resources/sass/components/loader.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.loader {
-    margin-top: 25vh;
-    stroke: $dark;
-    width: 10rem;
-}
diff --git a/resources/sass/components/main.scss b/resources/sass/components/main.scss
deleted file mode 100644
index d4459d7..0000000
--- a/resources/sass/components/main.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-body {
-    overflow: hidden;
-    height: 100vh;
-}
-
-main {
-    overflow: auto;
-    width: 100%;
-    height: calc(100vh - 4.5rem);
-}
diff --git a/resources/sass/components/modal.scss b/resources/sass/components/modal.scss
deleted file mode 100644
index 22c7da5..0000000
--- a/resources/sass/components/modal.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-$modal-duration: 1s;
-
-.modal-container {
-    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
-}
-
-.modal {
-    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 400px;
-    animation-name: modalopen;
-    animation-duration: $modal-duration;
-}
-
-@keyframes modalopen {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
diff --git a/resources/sass/components/nav.scss b/resources/sass/components/nav.scss
index 02c1948..b66721a 100644
--- a/resources/sass/components/nav.scss
+++ b/resources/sass/components/nav.scss
@@ -1,117 +1,14 @@
 
-//nav {
-//    background-color: $mediumDark;
-//    height: 100vh;
-//    width: 15rem;
-//    flex-shrink: 0;
-//    display: flex;
-//    flex-direction: column;
-//    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
-//    transition: width $transition-delay;
-//
-//    &.small {
-//        width: 5.5rem;
-//    }
-//
-//    hr {
-//        width: 90%;
-//        border-radius: 1px;
-//        border: 1px solid $dark;
-//    }
-//
-//    .nav-item {
-//        display: flex;
-//        align-items: center;
-//        text-decoration: none;
-//        color: $light;
-//        padding-top: 1rem;
-//        padding-bottom: 1rem;
-//
-//        span {
-//            overflow: hidden;
-//        }
-//
-//        svg {
-//            margin: 0 1rem;
-//            width: 3rem;
-//            transition: fill 0.2s;
-//            fill: $light;
-//        }
-//
-//        &:hover {
-//            color: $dark;
-//            background-color: $light;
-//            transition: color 0.2s, background-color 0.2s;
-//
-//            svg {
-//                fill: $dark;
-//                transition: fill 0.2s;
-//            }
-//        }
-//
-//        //&:visited {
-//        //    color: $dark;
-//        //}
-//    }
-//}
-//
-//.site-logo {
-//    width: 3rem;
-//    fill: $light;
-//    transition: fill 0.2s;
-//
-//    &:hover {
-//        fill: $dark;
-//        transition: fill 0.2s;
-//    }
-//}
-//
-//.navhidden {
-//    width: 0;
-//}
-//
-//
-//.site-logo-main {
-//    @extend .site-logo;
-//    display: block;
-//    margin: 1rem;
-//    width: 13rem;
-//    transition: width $transition-delay;
-//
-//    svg {
-//
-//        width: 100%;
-//    }
-//
-//    &.small {
-//        //padding-bottom: 10rem;
-//        width: 3.5rem;
-//    }
-//}
-//
-//.nav-toggle {
-//    @extend .site-logo;
-//    align-self: center;
-//
-//    svg {
-//        transition: transform $transition-delay;
-//    }
-//
-//    svg.small {
-//            transform: rotate(-180deg);
-//    }
-//}
-
 nav {
     @apply w-48;
     transition: width 0.3s;
 
     svg {
-        @apply fill-current text-orange-600 w-12 p-2;
+        @apply fill-current text-primary-600 w-12 p-2;
         transition: color 0.3s;
 
         &:hover {
-            @apply text-orange-800;
+            @apply text-primary-800;
         }
     }
 
@@ -133,16 +30,16 @@ nav {
             transition: width 0.3s;
 
             &:hover {
-                @apply text-orange-800;
+                @apply text-primary-800;
             }
         }
 
         &:hover {
-            @apply bg-orange-500;
+            @apply bg-primary-500;
 
             span,
             svg {
-                @apply text-orange-800;
+                @apply text-primary-800;
             }
         }
     }
diff --git a/resources/sass/components/search_box.scss b/resources/sass/components/search_box.scss
deleted file mode 100644
index e3a2446..0000000
--- a/resources/sass/components/search_box.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.search-box {
-    display: flex;
-    align-items: center;
-
-    button {
-        background: none;
-        border: none;
-        cursor: pointer;
-    }
-
-    svg {
-        width: 2.4rem;
-    }
-}
diff --git a/resources/sass/components/topbar.scss b/resources/sass/components/topbar.scss
deleted file mode 100644
index bddb9bd..0000000
--- a/resources/sass/components/topbar.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.topbar {
-    background-color: $medium;
-    width: initial;
-    box-shadow: 3px 2px 3px rgba(0,0,0,0.2);
-
-    svg {
-        width: 3rem;
-        fill: $light;
-        transition: fill 0.2s;
-
-        &:hover {
-            fill: $dark;
-            transition: fill 0.2s;
-        }
-    }
-}
diff --git a/resources/sass/pages/auth.scss b/resources/sass/pages/auth.scss
deleted file mode 100644
index e8a3465..0000000
--- a/resources/sass/pages/auth.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// Auth box
-
-.auth {
-    max-width: 350px;
-    width: 100%;
-    background-color: $light;
-    margin: 3rem auto;
-    border-radius: 1rem;
-    box-shadow: 1px 1px 2px $grey;
-
-    .title-page {
-        font-size: 2.4rem;
-        font-weight: bold;
-        text-align: center;
-        color: $fontTitle;
-    }
-}
-
-.logo {
-    text-align: center;
-    font-size: 2.8rem;
-    color: $dark;
-    font-weight: bold;
-}
diff --git a/resources/sass/pages/games.scss b/resources/sass/pages/games.scss
deleted file mode 100644
index b332110..0000000
--- a/resources/sass/pages/games.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-
-.card {
-
-
-}
diff --git a/resources/sass/pages/games/hangman.scss b/resources/sass/pages/games/hangman.scss
deleted file mode 100644
index cb53665..0000000
--- a/resources/sass/pages/games/hangman.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-.game-container {
-    max-width: 80rem;
-    margin: 0 auto;
-}
-.game-container-box {
-    padding: 2rem 3rem;
-    position: relative;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.dic-select {
-    min-height: 6rem;
-}
-
-.figure-container {
-    fill: transparent;
-    stroke: orange;
-    stroke-width: 4px;
-    stroke-linecap: round;
-}
-
-.figure-part {
-    display: none;
-    stroke: #7b341e;
-}
-
-.wrong-letters-container {
-    top: 4rem;
-    display: flex;
-    flex-direction: column;
-    text-align: right;
-
-    .wrong-letters {
-        height: 3.5rem;
-    }
-
-    p {
-        margin: 0 0 5px;
-    }
-
-    span {
-        font-size: 2.4rem;
-    }
-}
-
-.word {
-    @apply flex justify-center items-center;
-    bottom: 1rem;
-
-    .letter {
-        border-bottom: 3px solid #c05621;
-        display: inline-flex;
-        font-size: 30px;
-        align-items: center;
-        justify-content: center;
-        margin: 0 3px;
-        height: 50px;
-        width: 20px;
-    }
-}
-
-.popup-container {
-    position: absolute;
-    width: calc(100% - 6rem);
-
-    .popup {
-        background-color: #c05621;
-        border-radius: 5px;
-        color: #fbd38d;
-        min-height: 10rem;
-        padding: 20px;
-        text-align: center;
-
-        button {
-            cursor: pointer;
-            background-color: #fff;
-            color: #7b341e;
-            border: 0;
-            margin-top: 20px;
-            padding: 12px 20px;
-            font-size: 16px;
-
-            &:active {
-                transform: scale(0.98);
-            }
-
-            &:focus {
-                outline: 0;
-            }
-        }
-    }
-}
-
-.notification-container {
-    background-color: #ed8936;
-    border-radius: 2px;
-    padding: 1rem;
-    text-align: center;
-    margin-bottom: 6rem;
-
-    p {
-        margin: 0;
-    }
-}
diff --git a/resources/sass/pages/meteo.scss b/resources/sass/pages/meteo.scss
deleted file mode 100644
index 5bc7916..0000000
--- a/resources/sass/pages/meteo.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.meteo {
-    width: 25rem;
-
-    &-date {
-        font-size: 1.2rem;
-    }
-
-    .owf {
-        color: $mediumDark;
-    }
-}
diff --git a/resources/sass/pages/users.scss b/resources/sass/pages/users.scss
deleted file mode 100644
index b0010b7..0000000
--- a/resources/sass/pages/users.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.profile-title {
-    position: relative;
-    color: $white;
-    z-index: 2;
-    padding-bottom: 2rem;
-    left: 25rem;
-    text-shadow: 1px 1px 2px $dark;
-}
diff --git a/resources/sass/setup/_colors.scss b/resources/sass/setup/_colors.scss
deleted file mode 100644
index b7cd4c3..0000000
--- a/resources/sass/setup/_colors.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// Colors
-
-$white: #ffffff;
-$black: #1a1a1a;
-$grey: grey;
-$greyLight: #eeeeee;
-
-
-
-$dark: #1F2605;
-$mediumDark: #1F6521;
-$medium: #53900F;
-$mediumLight: #A4A71E;
-$light: #D6CE15;
-
-
-$primary: $mediumDark;
-$secondary: #000;
-$interactive: #000;
-$success: green;
-$error: red;
-$disabled: #000;
-
-$font: $black;
-$fontTitle: $dark;
diff --git a/resources/sass/setup/_containers.scss b/resources/sass/setup/_containers.scss
deleted file mode 100644
index 9ea1254..0000000
--- a/resources/sass/setup/_containers.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-.container-cards-list {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-gap: 10px;
-    grid-auto-rows: minmax(100px, auto);
-}
-
-.card {
-    background-color: $light;
-    display: flex;
-    //padding: 1rem;
-    box-shadow: 1px 1px 2px $grey;
-    border-radius: 2px;
-    text-decoration: none;
-    flex-direction: column;
-    justify-content: space-between;
-    cursor: pointer;
-
-    img,
-    svg {
-        max-height: 15rem;
-    }
-}
-
-
-.bg-b {
-    background-color: royalblue;
-}
-
-@media (max-width: 1200px) {
-    .container-cards-list {
-        grid-template-columns: repeat(3, 1fr);
-
-    }
-}
-
-@media (max-width: 800px) {
-    .container-cards-list {
-        grid-template-columns: repeat(2, 1fr);
-
-    }
-}
-
-@media (max-width: 500px) {
-    .container-cards-list {
-        grid-template-columns: repeat(1, 1fr);
-
-    }
-}
-
-
-.box-toggle {
-    box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
-
-    &-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background-color: $light;
-        padding: 0.5rem 1rem;
-        border-radius: 0.2rem;
-        cursor: pointer;
-
-        svg {
-            width: 2rem;
-        }
-    }
-
-    svg {
-        transform: rotate(270deg);
-        transition: transform 0.3s;
-
-        &.open {
-            transform: rotate(90deg);
-        }
-    }
-
-    &-content {
-        padding: 0.5rem 1rem;
-    }
-}
diff --git a/resources/sass/setup/_effects.scss b/resources/sass/setup/_effects.scss
deleted file mode 100644
index 92213f7..0000000
--- a/resources/sass/setup/_effects.scss
+++ /dev/null
@@ -1 +0,0 @@
-$transition-delay: 0.2s;
diff --git a/resources/sass/setup/_fonts.scss b/resources/sass/setup/_fonts.scss
deleted file mode 100644
index ce46521..0000000
--- a/resources/sass/setup/_fonts.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// Fonts
-@import url('https://fonts.googleapis.com/css?family=Open+Sans');
-
-$fontMain: 'Open Sans', sans-serif;
-
-html {
-    font-size: 62.5%;
-}
-
-body {
-    font-family: $fontMain;
-    font-size: 1.6rem;
-    color: $font;
-}
-
diff --git a/resources/sass/setup/_positions.scss b/resources/sass/setup/_positions.scss
deleted file mode 100644
index 7deb098..0000000
--- a/resources/sass/setup/_positions.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-// Positions
-
-$base: 1rem;
-
-.relative {
-    position: relative;
-}
-
-.absolute {
-    position: absolute;
-}
-
-.block {
-    display: block;
-}
-
-.inline {
-    display: inline;
-}
-
-.flex {
-    display: flex;
-}
-
-.flex-col {
-    display: flex;
-    flex-direction: column;
-}
-
-.flex-center {
-    display: flex;
-    justify-content: center;
-}
-
-.flex-middle {
-    display: flex;
-    align-items: center;
-}
-
-.flex-end {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.flex-between {
-    display: flex;
-    justify-content: space-between;
-}
-
-.flex-shrink {
-    flex-shrink: 0;
-}
-
-.w-100{
-    width: 100%;
-}
-
-.h-100{
-    height: 100%;
-}
-
-.m-auto {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.p-auto {
-    padding-left: auto;
-    padding-right: auto;
-}
-
-@for $i from 0 through 5 {
-    .flex-#{$i} {
-        flex: $i;
-    }
-
-    .m-#{$i} {
-        margin: $i * $base;
-    }
-
-    .mx-#{$i} {
-        margin-left: $i * $base;
-        margin-right: $i * $base;
-    }
-
-    .my-#{$i} {
-        margin-top: $i * $base;
-        margin-bottom: $i * $base;
-    }
-
-    .mt-#{$i} {
-        margin-top: $i * $base;
-    }
-
-    .ml-#{$i} {
-        margin-left: $i * $base;
-    }
-
-    .mr-#{$i} {
-        margin-right: $i * $base;
-    }
-
-    .mb-#{$i} {
-        margin-bottom: $i * $base;
-    }
-
-    .p-#{$i} {
-        padding: $i * $base;
-    }
-
-    .px-#{$i} {
-        padding-left: $i * $base;
-        padding-right: $i * $base;
-    }
-
-    .py-#{$i} {
-        padding-top: $i * $base;
-        padding-bottom: $i * $base;
-    }
-
-    .pt-#{$i} {
-        padding-top: $i * $base;
-    }
-
-    .pl-#{$i} {
-        padding-left: $i * $base;
-    }
-
-    .pb-#{$i} {
-        padding-bottom: $i * $base;
-    }
-}
-
-.t-0 {
-    top: 0;
-}
-
-.l-0 {
-    left: 0;
-}
-
-.r-0 {
-    right: 0;
-}
-
-.b-0 {
-    bottom: 0;
-}
-
-.z-10 {
-    z-index: 10;
-}
-
-.text-left {
-    text-align: left;
-}
-
-.text-right {
-    text-align: right;
-}
-
-.text-center {
-    text-align: center;
-}
diff --git a/resources/sass/setup/_reset.scss b/resources/sass/setup/_reset.scss
deleted file mode 100644
index f34b16b..0000000
--- a/resources/sass/setup/_reset.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// Reset
-
-body {
-    margin: 0;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-@for $i from 1 through 6 {
-    h#{$i} {
-        margin: 0;
-    }
-}
-
-ul {
-    margin-top:0;
-    margin-bottom: 0;
-    padding-left: 0;
-
-    li {
-        list-style: none;
-    }
-}