diff --git a/htdocs/src/App.vue b/htdocs/src/App.vue
index c9ee5b6..3e313f1 100644
--- a/htdocs/src/App.vue
+++ b/htdocs/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <b-navbar size="lg" type="dark" variant="dark" sticky class="text-light">
+    <b-navbar style="border-bottom: 3px solid #aee64e; box-shadow: 0 0 12px 0 #08334833">
       <b-navbar-brand class="navbar-brand" to="/">
         <img alt="HappyDNS" src="<%= BASE_URL %>img/logo.png" style="height: 30px">
       </b-navbar-brand>
@@ -10,30 +10,33 @@
 
       <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
-      <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav>
-          <b-nav-item to="/zones">Zones</b-nav-item>
-          <b-nav-item to="/users" disabled>Users</b-nav-item>
-        </b-navbar-nav>
-      </b-collapse>
-
       <b-navbar-nav class="ml-auto">
         <b-nav-item-dropdown right v-if="loggedUser">
-          <template slot="button-content"><div class="btn btn-sm btn-secondary">{{ loggedUser.email }}</div></template>
-          <b-dropdown-item>Some example text that's free-flowing within the dropdown menu.</b-dropdown-item>
-          <b-dropdown-item href="#">Action</b-dropdown-item>
-          <b-dropdown-item href="#">Another action</b-dropdown-item>
+          <template slot="button-content"><div class="btn btn-sm btn-secondary"><b-icon icon="person" aria-hidden="true"></b-icon> {{ loggedUser.email }}</div></template>
+          <b-dropdown-item href="#">My Profile</b-dropdown-item>
+          <b-dropdown-divider></b-dropdown-divider>
           <b-dropdown-item @click="logout()">Logout</b-dropdown-item>
         </b-nav-item-dropdown>
-        <b-button v-if="!loggedUser" variant="success" @click="signup()"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Sign up</b-button>
-        <b-button v-if="!loggedUser" variant="primary" class="ml-2" @click="signin()"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Sign in</b-button>
+        <b-button v-if="!loggedUser" variant="outline-success" @click="signup()"><b-icon icon="person-fill" aria-hidden="true"></b-icon> Sign up</b-button>
+        <b-button v-if="!loggedUser" variant="primary" class="ml-2" @click="signin()"><b-icon icon="person-fill" aria-hidden="true"></b-icon> Sign in</b-button>
       </b-navbar-nav>
     </b-navbar>
-    <div class="progress" style="background-color: #aee64e; height: 3px; border-radius: 0;">
-      <div class="progress-bar bg-secondary" role="progressbar" style="width: 0%"></div>
-    </div>
 
     <router-view/>
+
+    <div class="mt-5 pt-3 pb-5 bg-dark text-light" style="border-top: 3px solid #aee64e; box-shadow: 0 0 12px 0 #08334833">
+      <b-container>
+        <b-row>
+          <b-col md="4">
+            &copy; HappyDNS 2019-2020 All rights reserved
+          </b-col>
+          <b-col md="4">
+          </b-col>
+          <b-col md="4">
+          </b-col>
+        </b-row>
+      </b-container>
+    </div>
   </div>
 </template>
 
@@ -53,7 +56,7 @@ function updateSession (t) {
           console.error('Invalid session, your have been logged out:', error.response.errmsg)
           t.session = null
           t.loggedUser = null
-          sessionStorage.token = undefined
+          delete sessionStorage.token
         }
       )
   }
@@ -69,8 +72,8 @@ export default {
   },
 
   mounted () {
-    this.$on('login', this.login)
     updateSession(this)
+    this.$on('login', this.login)
   },
 
   methods: {
diff --git a/htdocs/src/main.js b/htdocs/src/main.js
index 63a2976..2a25f77 100644
--- a/htdocs/src/main.js
+++ b/htdocs/src/main.js
@@ -1,14 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
-import BootstrapVue from 'bootstrap-vue'
+import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
 import router from './router'
 
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-
-require('./assets/css/glyphicon.css')
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap-vue/dist/bootstrap-vue.min.css'
 
 Vue.use(BootstrapVue)
+Vue.use(BootstrapVueIcons)
 
 Vue.config.productionTip = false
 
diff --git a/htdocs/src/views/Home.vue b/htdocs/src/views/Home.vue
index fc2e940..823ce8a 100644
--- a/htdocs/src/views/Home.vue
+++ b/htdocs/src/views/Home.vue
@@ -1,18 +1,55 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <div class="text-light mb-5" style="background-image: radial-gradient(circle at top left,rgba(255,255,128,0.5) 0%,rgba(128,128,128,0.4) 58%),url(/img/ian-dooley-TevqnfbI0Zc-unsplash.jpg); background-size: cover;">
+      <h1 class="text-center display-1" style="padding-top: 20vh; padding-bottom: 5vh; text-shadow: white 0px 0px 15px">
+        HappyDNS
+      </h1>
+      <h2 class="text-center d-1" style="padding-bottom: 30vh; text-shadow: white 0px 0px 10px">
+        Finally a simple interface for domain names
+      </h2>
+    </div>
+
+    <b-container class="mb-5">
+      <b-row>
+        <h3 class="text-center font-weight-bolder mt-5 mb-5 offset-md-2 col-md-8" style="line-height: 1.5em">
+          Vous trouvez les <span class="text-highlight">interfaces des hébergeurs</span> de noms de domaine <span class="text-highlight">incompréhensibles</span> ou <span class="text-highlight">inutilisables</span>&nbsp;?
+        </h3>
+      </b-row>
+      <b-row class="mt-5 mb-5 text-justify">
+        <b-col md="4">
+          <p class="font-weight-bold" style="font-size: 1.15rem">
+            Réconciliez-vous avec vos noms de domaine, grâce à une interface pensée pour vous.
+          </p>
+        </b-col>
+        <b-col sm="6" md="4">
+          <p>
+            Amis <strong>néophytes</strong>, notre interface <strong>simple</strong> saura vous guider dans la configuration de votre nom de domaine, sans passer par la terminologie propre des noms de domaine.
+          </p>
+        </b-col>
+        <b-col sm="6" md="4">
+          <p>
+            <strong>Experts</strong> chevronnés&nbsp;: changez votre point de vue sur le DNS, avec une interface <strong>ergonomique</strong> dans l’ère du temps, qui répondra à toutes vos attentes.
+          </p>
+        </b-col>
+      </b-row>
+    </b-container>
+
+    <div class="mt-5" style="background-image: url(/img/karina-vorozheeva-rW-I87aPY5Y-unsplash.jpg); background-size: cover; background-position-y: 28%; background-attachment: fixed; padding-top: 60vh"></div>
+
+    <b-container class="mb-5">
+      <b-row>
+        <p class="mt-5 mb-5 offset-md-2 col-md-8 font-weight-bolder">
+          Rendez-vous sur <a href="https://git.happydns.org/">notre forge</a> pour télécharger le code source de notre plate-forme.<br><br>
+          Une version précompilée sera prochainement proposée au téléchargement.
+        </p>
+      </b-row>
+    </b-container>
+
   </div>
 </template>
 
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'home',
-  components: {
-    HelloWorld
+<style>
+  .text-highlight {
+    background-color: yellow;
   }
-}
-</script>
+</style>
diff --git a/htdocs/src/views/login.vue b/htdocs/src/views/login.vue
index 27fb2d7..7f915d3 100644
--- a/htdocs/src/views/login.vue
+++ b/htdocs/src/views/login.vue
@@ -1,36 +1,60 @@
 <template>
-  <form class="container mt-2" @submit.stop.prevent="testlogin" ref="form">
-    <b-form-group
-      :state="loginForm.emailState"
-      label="Email address"
-      label-for="email-input"
-      invalid-feedback="Email address is required"
-      >
-      <b-form-input
-        id="email-input"
-        v-model="loginForm.email"
-        :state="loginForm.emailState"
-        required
-        ref="loginemail"
-        ></b-form-input>
-    </b-form-group>
-    <b-form-group
-      :state="loginForm.passwordState"
-      label="Password"
-      label-for="password-input"
-      invalid-feedback="Password is required"
-      >
-      <b-form-input
-        type="password"
-        id="password-input"
-        v-model="loginForm.password"
-        :state="loginForm.passwordState"
-        required
-        ref="loginpassword"
-        ></b-form-input>
-    </b-form-group>
-    <b-button type="submit" variant="success"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Go!</b-button>
-  </form>
+  <b-container style="margin-top: 10vh; margin-bottom: 10vh;">
+    <b-row>
+      <b-col sm="4" class="d-none d-sm-flex align-items-center">
+        <div>
+          Don't already have an account on our beautiful platform?
+          <router-link to="/join" variant="outline-primary" class="font-weight-bold">Join now!</router-link>
+        </div>
+      </b-col>
+      <b-col sm="8">
+        <b-card header-tag="div">
+          <template v-slot:header>
+            <h6 class="mb-0 font-weight-bold">Happy to see you again!</h6>
+          </template>
+        <form @submit.stop.prevent="testlogin" ref="form">
+          <b-form-group
+            :state="loginForm.emailState"
+            label="Email address"
+            label-for="email-input"
+            invalid-feedback="Email address is required"
+            >
+            <b-form-input
+              id="email-input"
+              v-model="loginForm.email"
+              :state="loginForm.emailState"
+              required
+              autofocus
+              type="email"
+              placeholder="pMockapetris@usc.edu"
+              ref="loginemail"
+              ></b-form-input>
+          </b-form-group>
+          <b-form-group
+            :state="loginForm.passwordState"
+            label="Password"
+            label-for="password-input"
+            invalid-feedback="Password is required"
+            >
+            <b-form-input
+              type="password"
+              id="password-input"
+              v-model="loginForm.password"
+              :state="loginForm.passwordState"
+              required
+              placeholder="xXxXxXxXxX"
+              ref="loginpassword"
+              ></b-form-input>
+          </b-form-group>
+          <div class="d-flex justify-content-around">
+            <b-button type="submit" variant="success">Go!</b-button>
+            <b-button type="button" variant="outline-primary">Forgotten password?</b-button>
+          </div>
+        </form>
+        </b-card>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
diff --git a/htdocs/src/views/signup.vue b/htdocs/src/views/signup.vue
index 0e2577d..50d5209 100644
--- a/htdocs/src/views/signup.vue
+++ b/htdocs/src/views/signup.vue
@@ -1,4 +1,17 @@
 <template>
+  <b-container style="margin-top: 10vh; margin-bottom: 10vh;">
+    <b-row>
+      <b-col sm="4" class="d-none d-sm-flex flex-column align-items-center">
+        <img src="img/screenshot.png" alt="HappyDNS screenshoot" style="max-height: 100%; max-width: 100%;" class="mt-auto">
+        <div class="mt-3 mb-auto text-justify">
+          Join now our open source and free (as freedom) DNS platform, to manage your domains easily!
+        </div>
+      </b-col>
+      <b-col sm="8">
+        <b-card header-tag="div">
+          <template v-slot:header>
+            <h6 class="mb-0 font-weight-bold">Join our nice platform in less than 2 minutes!</h6>
+          </template>
   <form class="container mt-2" @submit.stop.prevent="goSignUp" ref="form">
     <b-form-group
       :state="signupForm.emailState"
@@ -11,6 +24,9 @@
         v-model="signupForm.email"
         :state="signupForm.emailState"
         required
+        autofocus
+        type="email"
+        placeholder="jPostel@isi.edu"
         ref="signupemail"
         ></b-form-input>
     </b-form-group>
@@ -26,6 +42,7 @@
         v-model="signupForm.password"
         :state="signupForm.passwordState"
         required
+        placeholder="xXxXxXxXxX"
         ref="signuppassword"
         ></b-form-input>
     </b-form-group>
@@ -41,11 +58,19 @@
         v-model="signupForm.passwordConfirm"
         :state="signupForm.passwordConfirmState"
         required
+        placeholder="xXxXxXxXxX"
         ref="signuppasswordconfirm"
         ></b-form-input>
     </b-form-group>
-    <b-button type="submit" variant="success"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Sign up!</b-button>
+    <div class="d-flex justify-content-around">
+      <b-button type="submit" variant="success">Sign up!</b-button>
+      <router-link to="/login" class="btn btn-outline-primary">Already member?</router-link>
+    </div>
   </form>
+        </b-card>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
diff --git a/htdocs/src/views/zone-list.vue b/htdocs/src/views/zone-list.vue
index d679d89..95aff37 100644
--- a/htdocs/src/views/zone-list.vue
+++ b/htdocs/src/views/zone-list.vue
@@ -1,31 +1,34 @@
 <template>
-  <div class="container mt-2">
-    <h2>
-      Zones
-      <b-button v-b-modal.newZoneModal variant="primary" size="sm" class="float-right ml-2"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add zone</b-button>
-    </h2>
-
-    <table class="table table-hover table-bordered table-striped">
-      <thead class="thead-dark">
-        <tr>
-          <th>
-            Domain name
-          </th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(zone, index) in zones" v-bind:key="index">
-          <td @click="show(zone)" class="text-monospace">
-            {{ zone.domain }}
-          </td>
-          <td>
-            <button type="button" @click="show(zone)" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
-            <button type="button" @click="deleteZone(zone)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <b-container class="mt-4">
+    <h1 class="text-center mb-4">Welcome to HappyDNS!</h1>
+    <b-row>
+    <div class="offset-md-2 col-md-8">
+    <b-list-group>
+      <b-list-group-item v-if="loading" class="text-center">
+        <b-spinner variant="secondary" label="Spinning"></b-spinner> Retrieving your zones...
+      </b-list-group-item>
+      <b-list-group-item :to="'zones/' + zone.domain" v-for="(zone, index) in zones" v-bind:key="index" class="d-flex justify-content-between align-items-center">
+        {{ zone.domain }}
+        <b-badge variant="success">OK</b-badge>
+      </b-list-group-item>
+    </b-list-group>
+    <b-list-group class="mt-2">
+      <form @submit.stop.prevent="showModal" v-if="!loading">
+        <b-list-group-item class="d-flex justify-content-between align-items-center">
+          <b-input-group size="sm">
+            <b-input-group-prepend>
+              <b-icon icon="plus"></b-icon>
+            </b-input-group-prepend>
+            <input placeholder="my.new.zone" v-model="newForm.domain" style="border:none; flex: 1 1 auto;">
+            <b-input-group-append v-show="newForm.domain.length">
+              <b-button type="submit" variant="outline-primary">Add new zone</b-button>
+            </b-input-group-append>
+          </b-input-group>
+        </b-list-group-item>
+      </form>
+    </b-list-group>
+      </div>
+      </b-row>
 
     <b-modal
       id="newZoneModal"
@@ -99,7 +102,7 @@
         </b-form-group>
       </form>
     </b-modal>
-  </div>
+  </b-container>
 </template>
 
 <script>
@@ -110,57 +113,34 @@ export default {
   data: function () {
     return {
       domainNameState: null,
-      newForm: { storage_facility: 'live' },
+      loading: true,
+      newForm: { domain: '', storage_facility: 'live' },
       zones: []
     }
   },
 
   mounted () {
-    axios
-      .get('/api/zones')
-      .then(response => (this.zones = response.data))
+    setTimeout(() =>
+      axios
+        .get('/api/zones')
+        .then(response => { this.zones = response.data; this.loading = false; return true })
+    , 100)
   },
 
   methods: {
-    attachZone () {
-      axios
-        .post('/api/zones', {
-          domain: this.newForm.domain,
-          server: this.newForm.server,
-          keyname: this.newForm.keyname,
-          keyblob: this.newForm.keyblob
-        })
-        .then(
-          (response) => {
-            if (this.zones == null) this.zones = []
-            this.zones.push(response.data)
-          },
-          (error) => {
-            alert('Unable to attach the given zone: ' + error.response.data.errmsg)
-          }
-        )
-    },
-
-    deleteZone (zone) {
-      axios
-        .delete('/api/zones/' + zone.domain)
-        .then(response => (
-          axios
-            .get('/api/zones')
-            .then(response => (this.zones = response.data))
-        ))
-    },
-
     show (zone) {
       this.$router.push('/zones/' + zone.domain)
     },
 
+    showModal () {
+      this.$bvModal.show('newZoneModal')
+    },
+
     modalShown () {
-      this.$refs.domainname.focus()
+      this.$refs.domainserver.focus()
     },
 
     resetModal () {
-      this.newForm.domain = ''
       this.newForm.server = ''
       this.newForm.keyname = ''
       this.newForm.keyblob = ''
@@ -182,6 +162,26 @@ export default {
       this.handleSubmit()
     },
 
+    attachZone () {
+      axios
+        .post('/api/zones', {
+          domain: this.newForm.domain,
+          server: this.newForm.server,
+          keyname: this.newForm.keyname,
+          keyblob: this.newForm.keyblob,
+          storage_facility: this.newForm.storage_facility
+        })
+        .then(
+          (response) => {
+            if (this.zones == null) this.zones = []
+            this.zones.push(response.data)
+          },
+          (error) => {
+            alert('Unable to attach the given zone: ' + error.response.data.errmsg)
+          }
+        )
+    },
+
     handleSubmit () {
       if (!this.checkFormValidity()) {
         return
@@ -193,7 +193,6 @@ export default {
         this.$refs.modal.hide()
       })
     }
-
   }
 }
 </script>