diff --git a/js/src/common.scss b/js/src/common.scss
index d4ea5f0e0..2d5871946 100644
--- a/js/src/common.scss
+++ b/js/src/common.scss
@@ -4,6 +4,7 @@
 @import "~bulma-divider";
 @import "~buefy/src/scss/buefy";
 
+
 a.out,
 .content a,
 .ProseMirror a {
@@ -20,6 +21,11 @@ main {
 
 .section {
   padding: 1rem 1% 4rem;
+
+
+  &.container {
+    min-height: 80vh;
+  }
 }
 
 figure img.is-rounded {
@@ -129,7 +135,12 @@ $list-item-hover-background-color: $chapril_blue_light !default;
 
 a.router-link-active {
   color: $list-item-active-color;
+  background: $info;
   padding: 0.25em;
+
+  nav & {
+    background: #52628d;
+  }
 }
 
 a {
@@ -144,9 +155,11 @@ a {
     display: block !important;
   }
 }
-.title{
+
+.title {
   margin: 1rem auto 1.5rem !important;
 }
+
 .setting-title {
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -161,13 +174,14 @@ a {
 }
 
 .breadcrumb {
-  a{
+  a {
     padding: 0.5em;
   }
-  li:first-child a
-  {
+
+  li:first-child a {
     padding-left: 0.5em;
   }
+
   .router-link-active,
   .is-active {
     background: $info !important;
@@ -199,11 +213,13 @@ a {
     }
   }
 }
-.date-component-container{
-  .datetime-container{
+
+.date-component-container {
+  .datetime-container {
     margin-right: 1em;
   }
 }
+
 .date-component {
   background-color: $chapril_blue_light !important;
 }
@@ -211,3 +227,12 @@ a {
 .time.datetime-container span.month {
   color: $primary-invert;
 }
+
+/**
+footer
+
+ */
+footer.footer[data-v-40ab164b] span.select select{
+  background: $chapril_blue_light;
+  color: #000;
+}
diff --git a/js/src/components/Footer.vue b/js/src/components/Footer.vue
index 50d4eaf7f..e663e3f12 100644
--- a/js/src/components/Footer.vue
+++ b/js/src/components/Footer.vue
@@ -31,6 +31,9 @@
           {{ $t("License") }}
         </a>
       </li>
+      <li>
+        <a href="https://chapril.org"> chapril.org </a>
+      </li>
     </ul>
     <div class="content has-text-centered">
       <i18n
diff --git a/js/src/components/Logo.vue b/js/src/components/Logo.vue
index be7e20083..2310c107c 100644
--- a/js/src/components/Logo.vue
+++ b/js/src/components/Logo.vue
@@ -1,18 +1,15 @@
 <template>
-  <MobilizonLogo />
+  <img
+    src='/img/pics/logo_chapril_mobilizon.png'
+    alt='logo chapril' >
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import MobilizonLogo from "../assets/mobilizon_logo.svg?inline";
 
-@Component({
-  components: {
-    MobilizonLogo,
-  },
-})
+@Component()
 export default class Logo extends Vue {
   @Prop({ type: Boolean, required: false, default: false }) invert!: boolean;
 }
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 53fdfcfc4..df68ba3b1 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -4,7 +4,7 @@
     wrapper-class="container"
     :active.sync="mobileNavbarActive"
   >
-    <template slot="brand">
+    <template slot="start">
       <b-navbar-item
         tag="router-link"
         :to="{ name: RouteName.HOME }"
@@ -12,8 +12,6 @@
       >
         <logo />
       </b-navbar-item>
-    </template>
-    <template slot="start">
       <b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
         $t("Explore")
       }}</b-navbar-item>
@@ -264,7 +262,12 @@ export default class NavBar extends Vue {
 </script>
 <style lang="scss" scoped>
 nav {
+  .navbar-star {
+    padding-left: 0.7em;
+  }
   .navbar-item {
+    min-width: 4em;
+    padding: 0 1em;
     a.button {
       font-weight: bold;
     }
@@ -304,4 +307,7 @@ nav {
     background-color: inherit;
   }
 }
+.hero {
+  margin-bottom: 2em;
+}
 </style>
diff --git a/js/src/variables.scss b/js/src/variables.scss
index 0d8c4e00e..2366fd312 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -31,7 +31,7 @@ $backgrounds: mix($chapril_blue, #ecebf2);
 /**
  * Text
  */
-$purple-1: mix($chapril_blue, #757199);
+$purple-1: #52628d;
 
 /**
  * Background