diff --git a/js/src/common.scss b/js/src/common.scss
index 2805f2cb8..db8c24c8f 100644
--- a/js/src/common.scss
+++ b/js/src/common.scss
@@ -12,13 +12,10 @@ a.out,
 .content a,
 .ProseMirror a {
   text-decoration: underline;
-  text-decoration-color: #ed8d07;
+  text-decoration-color: $primary-dark;
   text-decoration-thickness: 2px;
 }
 
-// input.input {
-//   border-color: $input-border-color !important;
-// }
 
 .section {
   padding: 1rem 1% 4rem;
diff --git a/js/src/components/Footer.vue b/js/src/components/Footer.vue
index a84743775..43061ba6c 100644
--- a/js/src/components/Footer.vue
+++ b/js/src/components/Footer.vue
@@ -1,6 +1,10 @@
 <template>
   <footer class="footer" ref="footer">
-    <img :src="`/img/pics/footer_${random}.jpg`" alt="" />
+<!--    <img :src="`/img/pics/footer_${random}.jpg`" alt="" />-->
+    <a href="https://openstreetmap.fr">
+    OpenStreetMap.fr
+
+    </a>
     <ul>
       <li>
         <router-link :to="{ name: RouteName.ABOUT }">{{ $t("About") }}</router-link>
@@ -44,8 +48,12 @@ export default class Footer extends Vue {
 </script>
 <style lang="scss" scoped>
 @import "~bulma/sass/utilities/mixins.sass";
+
+
 footer.footer {
-  color: $secondary;
+  color: white;
+  background: $primary;
+
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/js/src/components/Logo.vue b/js/src/components/Logo.vue
index be7e20083..7765e2363 100644
--- a/js/src/components/Logo.vue
+++ b/js/src/components/Logo.vue
@@ -20,7 +20,7 @@ export default class Logo extends Vue {
 <style lang="scss" scoped>
 svg {
   fill: $background-color;
-
+  width: 5em;
   &.invert {
     fill: $secondary;
   }
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 5af8b3f00..feb77b393 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -6,22 +6,22 @@
       </b-navbar-item>
     </template>
     <template slot="start">
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
-        $t("Explore")
-      }}</b-navbar-item>
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{
-        $t("My events")
-      }}</b-navbar-item>
+      <b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }"
+        >{{ $t("Explore") }}
+      </b-navbar-item>
+      <b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }"
+        >{{ $t("My events") }}
+      </b-navbar-item>
       <b-navbar-item
         tag="router-link"
         :to="{ name: RouteName.MY_GROUPS }"
         v-if="config && config.features.groups"
-        >{{ $t("My groups") }}</b-navbar-item
-      >
+        >{{ $t("My groups") }}
+      </b-navbar-item>
       <b-navbar-item tag="span" v-if="config && config.features.eventCreation">
-        <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary">{{
-          $t("Create")
-        }}</b-button>
+        <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary"
+          >{{ $t("Create") }}
+        </b-button>
       </b-navbar-item>
     </template>
     <template slot="end">
@@ -65,9 +65,9 @@
           <hr class="navbar-divider" />
         </b-navbar-item>
 
-        <b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">{{
-          $t("My account")
-        }}</b-navbar-item>
+        <b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }"
+          >{{ $t("My account") }}
+        </b-navbar-item>
 
         <!--          <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
         <!--            {{ $t('Create group') }}-->
@@ -77,8 +77,8 @@
           v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
           tag="router-link"
           :to="{ name: RouteName.ADMIN_DASHBOARD }"
-          >{{ $t("Administration") }}</b-navbar-item
-        >
+          >{{ $t("Administration") }}
+        </b-navbar-item>
 
         <b-navbar-item tag="span">
           <span @click="logout">{{ $t("Log out") }}</span>
@@ -95,9 +95,9 @@
             <strong>{{ $t("Sign up") }}</strong>
           </router-link>
 
-          <router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{
-            $t("Log in")
-          }}</router-link>
+          <router-link class="button is-light" :to="{ name: RouteName.LOGIN }"
+            >{{ $t("Log in") }}
+          </router-link>
         </div>
       </b-navbar-item>
     </template>
@@ -232,7 +232,11 @@ export default class NavBar extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-nav {
+@import "../variables.scss";
+
+.nav {
+  background: $primary !important;
+
   .navbar-item {
     a.button {
       font-weight: bold;
diff --git a/js/src/variables.scss b/js/src/variables.scss
index 31bb37e6e..07cd60ab1 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -6,6 +6,7 @@ $bleuvert: #1e7d97;
 $jaune: #ffd599;
 $violet: #424056;
 $green_osm: #77cc6d;
+$light_green_osm: lighten(#77cc6d,30%);
 $text_osm: #444;
 
 /**
@@ -38,15 +39,16 @@ $purple-3: #e6e4f4;
 
 $orange-2: #ed8d07;
 $orange-3: #d35204;
+$red: #ff2e54;
 
 $yellow-1: #ffd599;
 $yellow-2: #fff1de;
 $yellow-3: #fbd5cb;
 $yellow-4: #f7ba30;
 
-$primary: $bleuvert;
+$primary: $green_osm;
 $primary-invert: findColorInvert($primary);
-$secondary: $jaune;
+$secondary: $light_green_osm;
 $secondary-invert: findColorInvert($secondary);
 
 $background-color: $violet-2;
@@ -55,11 +57,11 @@ $success: #0d8758;
 $success-invert: findColorInvert($success);
 $info: mix($green_osm , #36bcd4);
 $info-invert: findColorInvert(  mix($green_osm , $info));
-$danger: #ff2e54;
+$danger: $orange-2;
 $danger-invert: findColorInvert($danger);
 $link: $primary;
 $link-invert: $primary-invert;
-$text: $violet-1;
+$text: $text_osm;
 
 $colors: map-merge(
   $colors,
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index dd1a84e23..be59db90d 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="homepage">
     <section class="hero" v-if="config && (!currentUser.id || !currentActor.id)">
-      <div class="hero-body">
+      <div class="hero-body has-background-primary">
         <div class="container">
           <h1 class="title">{{ config.slogan || $t("Gather ⋅ Organize ⋅ Mobilize") }}</h1>
           <p