diff --git a/js/.yarnrc.yml b/js/.yarnrc.yml
index 3b4777104..283a0c81b 100644
--- a/js/.yarnrc.yml
+++ b/js/.yarnrc.yml
@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.1.1.cjs
+#yarnPath: .yarn/releases/yarn-3.1.1.cjs
diff --git a/js/src/components/Editor.vue b/js/src/components/Editor.vue
index a4628b39e..7d205f930 100644
--- a/js/src/components/Editor.vue
+++ b/js/src/components/Editor.vue
@@ -566,7 +566,7 @@ $color-white: #eee;
     }
     &.is-selected,
     &:hover {
-      background-color: rgba($color-white, 0.2);
+      background-color: rgba(#eee, 0.2);
     }
     &.is-empty {
       opacity: 0.5;
@@ -583,7 +583,7 @@ $color-white: #eee;
   padding: 0;
   font-size: 1rem;
   text-align: inherit;
-  color: $color-white;
+  color: #eee;
   border-radius: 5px;
 }
 
diff --git a/js/src/components/Event/DateCalendarIcon.vue b/js/src/components/Event/DateCalendarIcon.vue
index 0c8daabee..888aabe16 100644
--- a/js/src/components/Event/DateCalendarIcon.vue
+++ b/js/src/components/Event/DateCalendarIcon.vue
@@ -54,7 +54,7 @@ export default class DateCalendarIcon extends Vue {
 
 <style lang="scss" scoped>
 div.datetime-container {
-  background: $chapril_blue_light;
+  background: #fff;
   border: 1px solid $borders;
   border-radius: 8px;
   display: flex;
diff --git a/js/src/variables.scss b/js/src/variables.scss
index 07fb0e60e..0131736c3 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -2,6 +2,13 @@
 @import "~bulma/sass/utilities/initial-variables.sass";
 @import "~bulma/sass/utilities/derived-variables.sass";
 
+
+// chapril colors
+$chapril_blue: #2e5281;
+$chapril_blue_light: #bcd0e5;
+$chapril_orange: #ff5e00;
+$chapril_grey: #5f5f5f;
+// other
 $bleuvert: #1e7d97;
 $jaune: #ffd599;
 $violet: #424056;
@@ -20,78 +27,79 @@ $violet-3: #3c376e;
 /**
  * Borders
  */
-$borders: #d7d6de;
-$backgrounds: #ecebf2;
+$borders: mix($chapril_blue, #d7d6de);
+$backgrounds: mix($chapril_blue, #ecebf2);
 
 /**
  * Text
  */
-$purple-1: #757199;
+$purple-1: mix($chapril_blue, #757199);
 
 /**
  * Background
  */
-$purple-2: #cdcaea;
-$purple-3: #e6e4f4;
+$purple-2: mix($chapril_blue, #cdcaea);
+$purple-3: mix($chapril_blue, #e6e4f4);
 
-$orange-2: #ed8d07;
-$orange-3: #d35204;
+$orange-2: mix($chapril_blue, #ed8d07);
+$orange-3: mix($chapril_blue, #d35204);
 
-$yellow-1: #ffd599;
-$yellow-2: #fff1de;
-$yellow-3: #fbd5cb;
-$yellow-4: #f7ba30;
+$yellow-1: mix($chapril_blue, #fff1e8);
+$yellow-2: mix($chapril_blue, #fff1de);
+$yellow-3: mix($chapril_blue, #fff8f6);
+$yellow-4: mix($chapril_blue, #b4f0ff);
 
-$primary: $bleuvert;
+$primary: $chapril_blue;
 $primary-invert: findColorInvert($primary);
-$secondary: $jaune;
+$secondary: lighten($chapril_blue, 20%);
 $secondary-invert: findColorInvert($secondary);
 
-$background-color: $violet-2;
+$background-color: mix($chapril_blue, $violet-2);
+$background-color-darker: darken($background-color,10%);
 
-$success: #0d8758;
+$success: mix($chapril_blue, #0d8758);
 $success-invert: findColorInvert($success);
-$info: #36bcd4;
+$info: mix($chapril_blue, #36bcd4);
 $info-invert: findColorInvert($info);
-$danger: #cd2026;
+$danger: mix($chapril_blue, #ff2e54);
 $danger-invert: findColorInvert($danger);
 $link: $primary;
 $link-invert: $primary-invert;
-$text: $violet-1;
-$grey: #757575;
+$text: mix($chapril_blue, $violet-1);
 
 $colors: map-merge(
-  $colors,
-  (
-    "primary": (
-      $primary,
-      $primary-invert,
-    ),
-    "secondary": (
-      $secondary,
-      $secondary-invert,
-    ),
-    "success": (
-      $success,
-      $success-invert,
-    ),
-    "info": (
-      $info,
-      $info-invert,
-    ),
-    "danger": (
-      $danger,
-      $danger-invert,
-    ),
-    "link": (
-      $link,
-      $link-invert,
-    ),
-    "grey": (
-      $grey,
-      findColorInvert($grey),
-    ),
-  )
+                $colors,
+                (
+                        "primary": (
+                                $primary,
+                                $primary-invert,
+                        ),
+                        "secondary": (
+                                $secondary,
+                                $secondary-invert,
+                        ),
+                        "success": (
+                                $success,
+                                $success-invert,
+                        ),
+                        "info": (
+                                $info,
+                                $info-invert,
+                        ),
+                        "danger": (
+                                $danger,
+                                $danger-invert,
+                        ),
+                        "link": (
+                                $link,
+                                $link-invert,
+                        ),
+
+                        "grey": (
+                                $grey,
+                                findColorInvert($grey),
+                        ),
+                )
 );
 
 // Navbar
@@ -103,7 +111,7 @@ $navbar-height: 4rem;
 $footer-padding: 3rem 1.5rem 1rem;
 $footer-background-color: $background-color;
 
-$body-background-color: #efeef4;
+$body-background-color: mix( $chapril_blue, #efeef4);
 $fullhd-enabled: false;
 $hero-body-padding-medium: 6rem 1.5rem;
 
@@ -112,22 +120,26 @@ main > .container {
   min-height: 70vh;
 }
 
-$title-color: #3c376e;
+$title-color: $chapril_blue;
 $title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-  serif;
+serif;
 $title-weight: 700;
 $title-size: 40px;
 $title-sub-size: 45px;
 $title-sup-size: 30px;
 
-$subtitle-color: #3a384c;
+$subtitle-color: $chapril_grey;
 $subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-  serif;
+serif;
 $subtitle-weight: 400;
 $subtitle-size: 32px;
 $subtitle-sub-size: 30px;
 $subtitle-sup-size: 15px;
 
+.title {
+  margin: 30px auto 45px;
+}
+
 .subtitle {
   background: $secondary;
   display: inline;
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index 905bd4293..bd3681324 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -621,12 +621,12 @@ export default class Home extends Vue {
 @import "~bulma/sass/utilities/mixins.sass";
 
 main > div > .container {
-  background: $whitest;
+  background: #eee;
   padding: 1rem 0.5rem 3rem;
 }
 
 .search-autocomplete {
-  border: 1px solid #dbdbdb;
+  border: 1px solid $borders;
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -752,7 +752,7 @@ section.hero {
 }
 
 #homepage {
-  background: $white;
+  background: #eee;
 }
 
 .home-separator {