diff --git a/api/campuses.js b/api/campuses.js
new file mode 100644
index 0000000..e37f29f
--- /dev/null
+++ b/api/campuses.js
@@ -0,0 +1,14 @@
+export const ENTITY_PLURAL = 'campuses';
+
+export default axios => ({
+  async getCampuses(mask, { search = null } = {}) {
+    const response = await axios.get(
+      `/${ENTITY_PLURAL}`,
+      {
+        params: { mask, search },
+      },
+    );
+
+    return response;
+  },
+});
diff --git a/api/forms.js b/api/forms.js
new file mode 100644
index 0000000..2874a8a
--- /dev/null
+++ b/api/forms.js
@@ -0,0 +1,10 @@
+export const ENTITY_PLURAL = 'forms';
+
+export default axios => ({
+  async postFormContact(fields) {
+    return axios.post(
+      `/${ENTITY_PLURAL}/contact`,
+      fields,
+    );
+  },
+});
diff --git a/api/index.js b/api/index.js
index 1822ad0..5bce9f7 100644
--- a/api/index.js
+++ b/api/index.js
@@ -1,12 +1,16 @@
 import rides from './rides';
 import routing from './routing';
 import status from './status';
+import campuses from './campuses';
+import forms from './forms';
 
 export default function (ctx, inject) {
   const api = {
     rides: rides(ctx.$axios),
     routing,
     status,
+    campuses: campuses(ctx.$axios),
+    forms: forms(ctx.$axios),
   };
   ctx.$api = api;
   inject('api', api);
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index dc7289d..100bd7b 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -1,9 +1,10 @@
 /**************
  *   Colors   *
  **************/
-$blue-medium: #005cee;
+$blue-medium: #0053b3;
 $blue-light: #006be6;
 $blue-dark: #003b80;
+$color-input: #abb8cb;
 
 $white: hsl(0, 0%, 100%);
 $white-20: rgba($white, 0.2);
@@ -21,24 +22,30 @@ $background: $blue-light;
 $primary: $blue-medium;
 $family-sans-serif: 'Source Sans Pro', sans-serif;
 $link: $white;
-$link-hover: darken($white, 15%);
+$link-hover: $white;
 $title-color: $text;
 $menu-item-radius: 0;
 
+//Navbar
+$navbar-item-hover-background-color: transparent;
+$navbar-item-color: $white;
+$navbar-item-img-max-height: none;
+
+//Title
+$subtitle-color: $text;
+
 // Forms
-$radius: 0;
-$input-background-color: transparent;
-$input-border-color: $text;
-$input-hover-border-color: $text;
-$input-color: $text;
-$input-hover-color: $text;
-$input-icon-color: $text;
-$input-icon-active-color: $text;
+$label-color: $blue-medium;
+$input-background-color: $white;
+$input-border-color: $color-input;
+$input-hover-border-color: $color-input;
+$input-color: $black;
+$input-hover-color: $color-input;
 $input-shadow: none;
 $input-focus-box-shadow-size: 0;
-$input-focus-border-color: $link-hover;
+$input-focus-border-color: $color-input;
 
 // Buttons
-
 $button-color: $primary;
 $button-hover-color: $button-color;
+$button-background-color:transparent;
diff --git a/assets/css/elements/button.scss b/assets/css/elements/button.scss
deleted file mode 100644
index 6d7925f..0000000
--- a/assets/css/elements/button.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.button {
-  text-transform: uppercase;
-  font-weight: $weight-semibold;
-}
diff --git a/assets/css/elements/form.scss b/assets/css/elements/form.scss
deleted file mode 100644
index 6463d26..0000000
--- a/assets/css/elements/form.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.input {
-  border: none;
-  border-bottom: 1px solid;
-  &::placeholder {
-    color: white;
-    opacity: 0.9;
-  }
-}
-
-label.vfl-label {
-  color: $text;
-  &.vfl-label-on-input {
-    color: $text;
-  }
-  &.vfl-label-on-focus {
-    color: $text;
-  }
-}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 710b745..2312b76 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -7,18 +7,17 @@
 @import "~bulma/sass/base/helpers.sass";
 
 @import "~bulma/sass/elements/button.sass";
-@import "elements/button";
 @import "~bulma/sass/elements/container.sass";
 //@import "~bulma/sass/elements/content.sass";
 @import "~bulma/sass/elements/form.sass";
-@import "elements/form";
 @import "~bulma/sass/elements/icon.sass";
+@import "~bulma/sass/elements/notification.sass";
 //@import "~bulma/sass/elements/image.sass";
 //@import "~bulma/sass/elements/progress.sass";
 //@import "~bulma/sass/elements/table.sass";
 //@import "~bulma/sass/elements/tag.sass";
-//@import "~bulma/sass/elements/title.sass";
-//@import "~bulma/sass/elements/other.sass";
+@import "~bulma/sass/elements/title.sass";
+@import "~bulma/sass/elements/other.sass";
 
 //@import "~bulma/sass/components/breadcrumb.sass";
 //@import "~bulma/sass/components/card.sass";
@@ -30,17 +29,10 @@
 //@import "~bulma/sass/components/pagination.sass";
 //@import "~bulma/sass/components/panel.sass";
 //@import "~bulma/sass/components/tabs.sass";
+@import "~bulma/sass/components/navbar.sass";
 
-//@import "~bulma/sass/grid/columns.sass";
-//@import "~bulma/sass/grid/tiles.sass";
+@import "~bulma/sass/grid/columns.sass";
+@import "~bulma/sass/grid/tiles.sass";
 
 //@import "~bulma/sass/layout/hero.sass";
-//@import "~bulma/sass/layout/section.sass";
-
-
-html, body, #__nuxt, #__layout {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background: $background;
-  height: 100%;
-}
+@import "~bulma/sass/layout/section.sass";
diff --git a/components/footer.vue b/components/footer.vue
new file mode 100644
index 0000000..5625bde
--- /dev/null
+++ b/components/footer.vue
@@ -0,0 +1,66 @@
+<template>
+  <footer>
+    <div class="container">
+      <div class="columns">
+        <div class="column is-3 has-text-centered-mobile">
+          <img
+            src="logo_ec_blue.svg"
+            alt="E-chauffeur"
+          >
+        </div>
+        <div class="column has-text-centered-mobile">
+          <img
+            src="logo_dirisi.png"
+            alt="DIRISI"
+          >
+          <img
+            src="logo_ma.png"
+            alt="Ministère des Armées"
+          >
+          <img
+            src="start_up_etat.png"
+            alt="Une Startup d'Etat"
+          >
+          <img
+            src="logo_fab_num.png"
+            alt="Fabrique Numérique"
+          >
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+  @import "~assets/css/head";
+
+  .container {
+    margin-top: 100px;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    border-top: 1px solid $grey-lighter;
+
+    .columns {
+      .column {
+        &:last-child {
+          text-align: right;
+
+          img {
+          vertical-align: middle;
+            &:first-child {
+              margin-right: 75px;
+            }
+            &:nth-child(3) {
+              margin-right: 50px;
+            }
+          }
+        }
+
+        &:first-child {
+          margin-top: auto;
+          margin-bottom: auto;
+        }
+      }
+    }
+  }
+</style>
diff --git a/components/form/field.vue b/components/form/field.vue
index 2312aca..9ea4895 100644
--- a/components/form/field.vue
+++ b/components/form/field.vue
@@ -1,48 +1,26 @@
 <template>
-  <div
-    :class="{'is-horizontal': isHorizontal}"
-    class="field"
-  >
-    <div
+  <div class="field">
+    <label
       v-if="label"
-      class="field-label is-normal"
+      :for="id"
+      class="label"
     >
-      <label
-        :for="fieldId"
-        class="label"
-      >
-        {{ label }}
-      </label>
-    </div>
-    <div class="field-body">
-      <div class="field">
-        <p class="control">
-          <float-label>
-            <slot />
-          </float-label>
-        </p>
-      </div>
+      {{ label }}
+    </label>
+    <div class="control">
+      <slot />
     </div>
   </div>
 </template>
 
 <script>
-import floatLabel from 'vue-float-label/components/FloatLabel';
-
 export default {
-  components: {
-    floatLabel,
-  },
   props: {
-    isHorizontal: {
-      type: Boolean,
-      default: true,
-    },
     label: {
       type: String,
       default: null,
     },
-    fieldId: {
+    id: {
       type: String,
       default: null,
     },
@@ -50,9 +28,8 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-  @import "~assets/css/head";
-.control {
-  margin-top: 1.3em;
-}
+<style lang="scss" scoped>
+  .label::first-letter {
+    text-transform: capitalize;
+  }
 </style>
diff --git a/components/header.vue b/components/header.vue
new file mode 100644
index 0000000..3cb53ae
--- /dev/null
+++ b/components/header.vue
@@ -0,0 +1,105 @@
+<template>
+  <header>
+    <nav class="navbar">
+      <div class="navbar-brand">
+        <nuxt-link
+          class="navbar-item"
+          :to="{name: 'index'}"
+        >
+          <img
+            :src="logoPath[$route.name]"
+            alt="E-chauffeur"
+          >
+        </nuxt-link>
+        <a
+          class="navbar-burger burger"
+          :class="{ 'is-active': isBurgerMenu }"
+          @click="toogleBurgerMenu()"
+        >
+          <span aria-hidden="true" />
+          <span aria-hidden="true" />
+          <span aria-hidden="true" />
+        </a>
+      </div>
+
+      <div
+        class="navbar-menu"
+        :class="{
+          'is-active': isBurgerMenu,
+          'is-blue': isBurgerMenu && isBurgerMenuBlueColor
+        }"
+      >
+        <div class="navbar-end">
+          <nuxt-link
+            class="navbar-item"
+            :to="{name: 'index'}"
+          >
+            Accueil
+          </nuxt-link>
+          <nuxt-link
+            class="navbar-item"
+            :to="{name: 'contact'}"
+          >
+            Nous contacter
+          </nuxt-link>
+        </div>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<script>
+const LOGO = 'logo_ec.svg';
+const LOGO_BLUE = 'logo_ec_blue.svg';
+
+export default {
+  data() {
+    return {
+      logoPath: {
+        index: LOGO,
+        contact: LOGO_BLUE,
+      },
+      isBurgerMenu: false,
+      isBurgerMenuBlueColor: this.$route.name !== 'index',
+    };
+  },
+
+  methods: {
+    toogleBurgerMenu() {
+      this.isBurgerMenu = !this.isBurgerMenu;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "~assets/css/head";
+
+  $text-color: $blue-medium;
+
+  header {
+    background-color: transparent;
+    margin-bottom: 50px;
+
+    nav {
+      background-color: transparent;
+
+      .navbar-menu {
+        background-color: transparent;
+
+        &.is-blue {
+          color: $text-color;
+          a, a:hover {
+            color: $text-color;
+          }
+        }
+
+        .navbar-item {
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 772a283..19bfb1f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,3 +1,16 @@
 <template>
-  <nuxt />
+  <div>
+    <nuxt />
+    <ec-footer />
+  </div>
 </template>
+
+<script>
+import ecFooter from '~/components/footer.vue';
+
+export default {
+  components: {
+    ecFooter,
+  },
+};
+</script>
diff --git a/layouts/ride.vue b/layouts/ride.vue
new file mode 100644
index 0000000..772a283
--- /dev/null
+++ b/layouts/ride.vue
@@ -0,0 +1,3 @@
+<template>
+  <nuxt />
+</template>
diff --git a/nuxt.config.js b/nuxt.config.js
index 72c202b..dc8dc22 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -41,6 +41,8 @@ module.exports = {
     '~/api',
     '~/plugins/axios.js',
     '~/plugins/socket.js',
+    '~/plugins/markdown.js',
+    '~/plugins/validator.js',
   ],
 
   /*
@@ -63,7 +65,7 @@ module.exports = {
     packs: [
       {
         package: '@fortawesome/free-solid-svg-icons',
-        icons: ['faFlag', 'faMapMarkerAlt', 'faDotCircle'],
+        icons: ['faFlag', 'faMapMarkerAlt', 'faDotCircle', 'faChevronRight'],
       },
     ],
   },
diff --git a/package.json b/package.json
index 52e07a6..a9080e4 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,9 @@
     "qs": "^6.6.0",
     "sass-loader": "^7.1.0",
     "socket.io-client": "^2.2.0",
+    "vee-validate": "^2.1.7",
     "vue-float-label": "^1.6.1",
+    "vue-simple-markdown": "^1.0.9",
     "vue-socket.io-extended": "^3.2.1"
   },
   "devDependencies": {
diff --git a/pages/_ride_id.vue b/pages/_ride_id.vue
index 4edfd19..e716808 100644
--- a/pages/_ride_id.vue
+++ b/pages/_ride_id.vue
@@ -126,6 +126,8 @@ export default {
     ecBox,
   },
 
+  layout: 'ride',
+
   computed: {
     ...mapGetters({
       ride: 'ride/ride',
diff --git a/pages/contact.vue b/pages/contact.vue
new file mode 100644
index 0000000..fd97522
--- /dev/null
+++ b/pages/contact.vue
@@ -0,0 +1,423 @@
+<template>
+  <div class="container">
+    <div
+      id="shape-top-right"
+    />
+    <div
+      id="shape-bottom-left"
+      class="is-hidden-touch"
+    />
+    <ec-header />
+    <main>
+      <section
+        id="ec-questions"
+        class="section"
+      >
+        <div class="columns">
+          <div class="column is-5">
+            <h1 class="title">
+              Des questions sur le service e-Chauffeur ?
+            </h1>
+            <p>
+              Si vous avez la moindre question, n’hésitez pas à remplir le formulaire ci-dessous.
+              Nous tâcherons de revenir vers vous dans les plus brefs délais.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <form @submit.prevent="sendForm">
+        <div class="columns">
+          <div class="column">
+            <ec-field
+              id="ec-form-firstname"
+              label="votre prénom"
+            >
+              <input
+                id="ec-form-firstname"
+                v-model="fields.firstname"
+                v-validate="'required'"
+                type="text"
+                class="input"
+                name="firstname"
+                data-vv-as="prénom"
+                :class="{ 'is-danger': errors.has('firstname') }"
+                :placeholder="'Tapez votre prénom'"
+              >
+              <p class="help is-danger">
+                {{ errors.first('firstname') }}
+              </p>
+            </ec-field>
+          </div>
+
+          <div class="column">
+            <ec-field
+              id="ec-form-lastname"
+              label="votre nom"
+            >
+              <input
+                id="ec-form-nom"
+                v-model="fields.lastname"
+                v-validate="'required'"
+                type="text"
+                class="input"
+                name="lastname"
+                data-vv-as="nom"
+                :class="{ 'is-danger': errors.has('lastname') }"
+                :placeholder="'Tapez votre nom'"
+              >
+              <p class="help is-danger">
+                {{ errors.first('lastname') }}
+              </p>
+            </ec-field>
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column">
+            <ec-field
+              id="ec-form-email"
+              label="votre courriel"
+            >
+              <input
+                id="ec-form-email"
+                v-model="fields.email"
+                v-validate="'required|email'"
+                type="email"
+                class="input"
+                name="email"
+                data-vv-as="courriel"
+                :class="{ 'is-danger': errors.has('email') }"
+                :placeholder="'Tapez votre courriel'"
+              >
+              <p class="help is-danger">
+                {{ errors.first('email') }}
+              </p>
+            </ec-field>
+          </div>
+
+          <div class="column">
+            <ec-field
+              id="ec-form-phone"
+              label="votre numéro de téléphone"
+            >
+              <input
+                id="ec-form-phone"
+                v-model="fields.phone"
+                v-validate="'numeric'"
+                type="tel"
+                class="input"
+                name="phone"
+                data-vv-as="téléphone"
+                :class="{ 'is-danger': errors.has('phone') }"
+                :placeholder="'Tapez votre numéro de téléphone'"
+              >
+              <p class="help is-danger">
+                {{ errors.first('phone') }}
+              </p>
+            </ec-field>
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-6">
+            <ec-field
+              id="ec-form-gsbdd"
+              label="votre GSBdD"
+            >
+              <div
+                class="select is-full"
+                :class="{ 'is-danger': errors.has('gsbdd') }"
+              >
+                <select
+                  id="ec-form-gsbdd"
+                  v-model="fields.gsbdd"
+                  v-validate="'required'"
+                  name="gsbdd"
+                  :class="{ 'placeholder': !fields.gsbdd }"
+                >
+                  <option value="">
+                    Sélectionnez votre GSBdD
+                  </option>
+                  <option
+                    v-for="gsbdd in gsbddList"
+                    :key="gsbdd.id"
+                  >
+                    {{ gsbdd }}
+                  </option>
+                </select>
+              </div>
+              <p class="help is-danger">
+                {{ errors.first('gsbdd') }}
+              </p>
+            </ec-field>
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column">
+            <ec-field
+              id="ec-form-message"
+              label="votre message"
+            >
+              <textarea
+                id="ec-form-message"
+                v-model="fields.message"
+                v-validate="'required'"
+                class="textarea"
+                name="message"
+                :class="{ 'is-danger': errors.has('message') }"
+                :placeholder="'Tapez votre message'"
+              />
+              <p class="help is-danger">
+                {{ errors.first('message') }}
+              </p>
+            </ec-field>
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column">
+            <div class="control has-text-right">
+              <button
+                class="button is-primary submit"
+                :class="{ 'is-loading': pending }"
+                :disabled="isBtnSubDisabled"
+              >
+                <span class="message">
+                  <em>envoyer</em> mon <em>message</em>
+                </span>
+                <span>
+                  <fa-icon
+                    :icon="['fas', 'chevron-right']"
+                  />
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+
+      <div
+        v-if="hasNotifications()"
+        class="notification"
+        :class="notification.class"
+      >
+        <button
+          class="delete"
+          @click="closeNotification()"
+        />
+        {{ notification.mess }}
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+import ecHeader from '~/components/header.vue';
+import ecField from '~/components/form/field.vue';
+
+export default {
+  components: {
+    ecHeader,
+    ecField,
+  },
+
+  data() {
+    return {
+      fields: {
+        firstname: null,
+        lastname: null,
+        email: null,
+        phone: null,
+        gsbdd: '',
+        message: null,
+      },
+      notification: {},
+      pending: false,
+      gsbddList: this.$store.state.gsbdd.list,
+    };
+  },
+
+  computed: {
+    isBtnSubDisabled() {
+      return (!this.fields.firstname || !this.fields.lastname || !this.fields.gsbdd
+          || !this.fields.email || !this.fields.message);
+    },
+  },
+
+  methods: {
+    hasNotifications() {
+      return Object.keys(this.notification).length > 0;
+    },
+
+    closeNotification() {
+      this.notification = {};
+    },
+
+    async validateForm() {
+      await this.$validator.validate();
+      return !Object.keys(this.veeFields).some(key => this.veeFields[key].valid === false);
+    },
+
+    async sendForm() {
+      const validation = await this.validateForm();
+      if (!validation) {
+        return;
+      }
+
+      this.pending = true;
+
+      try {
+        await this.$api.forms.postFormContact(this.fields);
+        this.notification = {
+          class: 'is-success',
+          mess: 'votre message a bien été envoyé.',
+        };
+      } catch (e) {
+        this.notification = {
+          class: 'is-danger',
+          mess: 'un problème est survenue dans l\'envoi de votre message.',
+        };
+      }
+
+      this.pending = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "~assets/css/head";
+
+  $select-color-placeholder: rgba(28,28,28,0.3);
+  $select-color-placeholder-options: $black;
+  $select-border-color: #abb8cb;
+  $btn-submit-bg-color-disabled: #c8d3e0;
+  $text-color: $blue-medium;
+
+  $form-pading-left-right: $control-padding-horizontal;
+
+  .container {
+    position: initial;
+  }
+
+  #ec-questions {
+    position: relative;
+    color: $text-color;
+
+    h1 {
+      color: $text-color;
+    }
+
+    p {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+  }
+  main {
+    .notification {
+      animation: slide-show 1s 1 forwards ;
+      position: fixed;
+      top: 15px;
+      right: -225px;
+      width: 225px;
+      z-index: 1500;
+
+      &::first-letter {
+        text-transform: capitalize;
+      }
+    }
+  }
+
+  @keyframes slide-show {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-250px); }
+  }
+
+  form {
+    margin-top: 150px;
+    padding-left: $form-pading-left-right;
+    padding-right: $form-pading-left-right;
+
+    .select {
+      &:not(.is-multiple):not(.is-loading)::after {
+        border-color: $select-border-color;
+      }
+
+      &.is-full {
+        width: 100%;
+        select {
+          width: 100%;
+
+          &.placeholder {
+            color: $select-color-placeholder;
+            option {
+              color: $select-color-placeholder-options;
+            }
+          }
+        }
+      }
+    }
+
+    .button.submit {
+      height: auto;
+      text-align: left;
+
+      em {
+        font-weight: bold;
+        font-style: normal;
+      }
+
+       &[disabled] {
+         background-color: $btn-submit-bg-color-disabled;
+       }
+
+      .message {
+        display: inline-block;
+        margin-right: 15px;
+        vertical-align: middle;
+
+        em:first-child {
+          display: block;
+
+          &::first-letter {
+            text-transform: capitalize;
+          }
+        }
+      }
+    }
+  }
+
+  #shape-top-right {
+    position: absolute;
+    top: 0px;
+    right: 0;
+    height: 500px;
+    width: 35%;
+    background-image: linear-gradient(to right, #5534ff, #288eff 51%, #9df8cf);
+    border-bottom-left-radius: 100% 100%;
+  }
+
+  #shape-bottom-left {
+    position: absolute;
+    top: 450px;
+    left: 0;
+    height: 500px;
+    width: 8%;
+    background-image: linear-gradient(to top, #ff82a2, #ff5071);
+    border-top-right-radius: 150% 65%;
+    border-bottom-right-radius: 150% 100%;
+  }
+</style>
+
+<style lang="scss">
+  form {
+    label[for=ec-form-phone]::after {
+      content: " - facultatif";
+      font-style: italic;
+      font-weight: normal;
+    }
+  }
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index b756096..9339453 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,57 +1,241 @@
 <template>
-  <div class="container has-text-centered">
-    <img
-      src="~/static/logo.svg"
-      alt="e-Chauffeur"
-    >
-    <form @submit.prevent="loadRide(rideId, token)">
-      <ec-field>
-        <input
-          v-model="rideId"
-          class="input"
-          type="text"
-          placeholder="Identifiant de course"
-        >
-      </ec-field>
-      <ec-field>
-        <input
-          v-model="token"
-          class="input"
-          type="text"
-          placeholder="Jeton de course"
-        >
-      </ec-field>
-      <button
-        :disabled="!rideId"
-        class="button"
-        type="submit"
+  <div class="container">
+    <div
+      id="shape-top"
+    />
+    <ec-header />
+    <main>
+      <section
+        id="ec-pres"
+        class="section"
       >
-        Voir la course
-      </button>
-    </form>
+        <div class="columns">
+          <div class="column is-6">
+            <h1 class="title">
+              Faites vous conduire à votre prochain rendez-vous professionnel.
+            </h1>
+            <p>
+              E-Chauffeur est un service de véhicule de trasport avec chauffeur accessible à tous les personnels du
+              Ministère des Armées pour les trajets professionnels uniquement.
+            </p>
+            <ul>
+              <li>Appelez le numéro e-Chauffeur de votre GS</li>
+              <li>Indiquez vos lieux de départ et de destination</li>
+              <li>Suivez l'arrivée de votre e-Chauffeur sur votre téléphone</li>
+            </ul>
+          </div>
+          <div class="column">
+            <img
+              src="smart_tab.png"
+              alt="E-chauffeur sur smartphone et tablette"
+              class="is-hidden-mobile"
+            >
+          </div>
+        </div>
+      </section>
+
+      <section
+        v-if="campuses.length"
+        id="ec-bn"
+        class="section"
+      >
+        <div class="bn-link">
+          <a
+            v-for="campuse in campuses"
+            :key="campuse.id"
+            class="button"
+            :class="{
+              'is-active': btnActive[campuse.id]
+            }"
+            @click="setInformation(campuse.id)"
+          >
+            {{ campuse.id }}
+          </a>
+        </div>
+
+        <div class="columns">
+          <div class="column is-4 has-text-centered-mobile bn-infos">
+            <h1 class="title">
+              Informations
+            </h1>
+            <vue-simple-markdown :source="information" />
+          </div>
+
+          <div class="column">
+            <img
+              :src="image"
+              width="770px"
+              height="540px"
+            >
+          </div>
+        </div>
+      </section>
+    </main>
   </div>
 </template>
 
 <script>
-import ecField from '~/components/form/field.vue';
+import ecHeader from '~/components/header.vue';
 
 export default {
   components: {
-    ecField,
+    ecHeader,
   },
-  data: () => ({ rideId: null, token: null }),
+
+  data() {
+    return {
+      campuses: [],
+      information: '',
+      image: '',
+      btnActive: {},
+    };
+  },
+
+  async created() {
+    this.campuses = await this.getCampuses();
+    if (this.campuses.length) {
+      this.setInformation(this.campuses[0].id);
+    }
+  },
+
   methods: {
-    loadRide(rideId, token) {
-      this.$router.push({ name: 'ride_id', params: { ride_id: rideId }, query: { token } });
+    async getCampuses() {
+      const response = await this.$api.campuses.getCampuses('id,information');
+      const campuses = response.data;
+      return campuses;
+    },
+
+    setInformation(id) {
+      this.campuses.forEach((campuse) => {
+        this.btnActive[campuse.id] = false;
+      });
+
+      this.btnActive[id] = true;
+      this.information = this.campuses[this.campuses.findIndex(campuse => campuse.id === id)].information;
+      this.image = `${id}.png`;
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "~assets/css/head";
-.container {
-  max-width: 500px;
-  padding: $size-1;
-}
+  @import "~assets/css/head";
+
+  $text-color-blue: $blue-medium;
+
+  .container {
+    position: initial;
+  }
+
+  #ec-pres {
+    position: relative;
+
+    p {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+    ul {
+      list-style: decimal;
+      padding-left: 15px;
+
+      li {
+        margin-bottom: 10px;
+        font-weight: bold;
+      }
+    }
+
+    img {
+      position: absolute;
+      top: -90px;
+      right: -405px;
+    }
+  }
+
+  #ec-bn {
+    color: $text-color-blue;
+    background-color: rgba(234, 239, 244, 0.4);
+
+    a, .button {
+      color: $text-color-blue;
+      text-transform: uppercase;
+    }
+
+    img {
+      box-shadow: 10px 53px 105px -34px rgba(0,0,0,0.3);
+    }
+
+    .bn-link {
+      margin-bottom: 15px;
+
+      .button {
+        width: 90px;
+        border: 0;
+        border-radius: 0;
+
+        &.is-active, &:hover {
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+        }
+
+        &.is-active {
+          background-color: $white;
+          color: $text-color-blue;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .bn-infos {
+      margin-top: 30px;
+
+      h1 {
+        color: $text-color-blue;
+      }
+
+      .markdown-body {
+        color: $text-color-blue;
+        & /deep/ strong {
+          color: $text-color-blue;
+        }
+      }
+    }
+  }
+
+  #shape-top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 600px;
+    width: 100%;
+    background-image: linear-gradient(to right, #5534ff, #288eff 51%, #9df8cf);
+    border-bottom-left-radius: 100% 150%;
+    border-bottom-right-radius: 150% 200%;
+  }
+
+
+  @media screen and (min-width: $widescreen) {
+    #ec-bn {
+      margin-top: 350px;
+    }
+  }
+
+  @media screen and (max-width: $widescreen) {
+    #ec-bn {
+      margin-top: 200px;
+    }
+  }
+
+  @media screen and (max-width: $desktop) {
+    #shape-top {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  @media screen and (max-width: $tablet) {
+    #shape-top {
+      height: 525px;
+    }
+  }
+
 </style>
diff --git a/plugins/markdown.js b/plugins/markdown.js
new file mode 100644
index 0000000..d0f3222
--- /dev/null
+++ b/plugins/markdown.js
@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import VueSimpleMarkdown from 'vue-simple-markdown';
+import 'vue-simple-markdown/dist/vue-simple-markdown.css';
+
+Vue.use(VueSimpleMarkdown);
diff --git a/plugins/validator.js b/plugins/validator.js
new file mode 100644
index 0000000..19b566d
--- /dev/null
+++ b/plugins/validator.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import VeeValidate from 'vee-validate';
+
+const dictionary = {
+  fr: {
+    messages: {
+      required: field => `Le champ ${field} est requis.`,
+      email: field => `Le champ ${field} doit être une adresse courriel valide.`,
+      numeric: field => `Le champ ${field} ne doit contenir que des chiffres.`,
+    },
+  },
+};
+
+VeeValidate.Validator.localize(dictionary);
+
+const config = {
+  fieldsBagName: 'veeFields',
+  locale: 'fr',
+};
+
+Vue.use(VeeValidate, config);
diff --git a/static/bsl.png b/static/bsl.png
new file mode 100644
index 0000000..fbe07ed
Binary files /dev/null and b/static/bsl.png differ
diff --git a/static/logo_dirisi.png b/static/logo_dirisi.png
new file mode 100644
index 0000000..1d18640
Binary files /dev/null and b/static/logo_dirisi.png differ
diff --git a/static/logo.svg b/static/logo_ec.svg
similarity index 100%
rename from static/logo.svg
rename to static/logo_ec.svg
diff --git a/static/logo_ec_blue.svg b/static/logo_ec_blue.svg
new file mode 100644
index 0000000..dee3ba8
--- /dev/null
+++ b/static/logo_ec_blue.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="169" height="40" fill="none" viewBox="0 0 169 40">
+    <mask id="a" width="41" height="40" x="0" y="0" maskUnits="userSpaceOnUse">
+        <ellipse cx="20" cy="20" fill="#C4C4C4" rx="20" ry="20"/>
+    </mask>
+    <g mask="url(#a)">
+        <path fill="#EAEFF4" d="M2.67-16.64L-3.61 1.893l54.574 18.49 6.28-18.536zM-9.557 19.61l-6.28 18.535 54.574 18.49 6.28-18.536z" opacity=".3" style="mix-blend-mode:hard-light"/>
+        <path fill="#E2011C" d="M56.158 4.946L37.616-1.316 22.983 42.008l18.542 6.263z" style="mix-blend-mode:hard-light"/>
+        <path fill="#002C7B" d="M19.066-4.281L.524-10.544l-17.75 52.552L1.318 48.27z" style="mix-blend-mode:hard-light"/>
+        <path fill="#fff" d="M38.67-4.491l-17.512-5.915-17.75 52.552 17.513 5.914z" style="mix-blend-mode:hard-light"/>
+    </g>
+    <path fill="#0053B3" d="M18.16 21.936a.532.532 0 0 0-.024.168c0 .272.072.496.216.672.144.16.32.296.528.408.208.096.432.168.672.216.24.032.456.048.648.048.4 0 .792-.064 1.176-.192a3.04 3.04 0 0 0 1.032-.648l3.624 2.496c-.831.848-1.784 1.44-2.856 1.776a11.088 11.088 0 0 1-3.336.504c-.896 0-1.752-.12-2.568-.36-.8-.24-1.504-.6-2.112-1.08a5.315 5.315 0 0 1-1.416-1.776c-.352-.72-.528-1.56-.528-2.52 0-1.072.192-2.072.576-3 .384-.944.92-1.76 1.608-2.448a7.529 7.529 0 0 1 2.496-1.608c.976-.4 2.048-.6 3.216-.6.928 0 1.76.136 2.497.408.735.256 1.36.632 1.871 1.128a4.73 4.73 0 0 1 1.177 1.776c.288.688.431 1.464.431 2.328 0 .352-.032.736-.096 1.152-.047.416-.128.8-.24 1.152H18.16zm4.248-2.856a.453.453 0 0 0 .024-.144v-.144c0-.4-.152-.72-.456-.96-.288-.24-.696-.36-1.224-.36-.336 0-.64.056-.912.168-.256.112-.48.248-.672.408-.192.16-.352.336-.48.528a2.044 2.044 0 0 0-.24.504h3.96zM27.594 22.224l.72-4.032h6.552l-.72 4.032h-6.552zM50.721 25.055c-.336.288-.728.584-1.176.888a8.097 8.097 0 0 1-1.488.768c-.56.224-1.192.408-1.896.552-.688.144-1.456.216-2.304.216-1.28 0-2.424-.176-3.432-.528-.992-.352-1.84-.856-2.544-1.512a6.592 6.592 0 0 1-1.584-2.376c-.368-.928-.552-1.96-.552-3.096 0-1.456.248-2.816.744-4.08a10.253 10.253 0 0 1 2.136-3.312 10.018 10.018 0 0 1 3.24-2.232c1.248-.544 2.616-.816 4.104-.816 1.472 0 2.768.232 3.888.696 1.12.448 1.976 1.008 2.568 1.68l-3.864 3.984a2.496 2.496 0 0 0-1.152-.912c-.464-.208-.992-.312-1.584-.312-.608 0-1.16.128-1.656.384-.496.24-.92.576-1.272 1.008a4.5 4.5 0 0 0-.816 1.464 5.513 5.513 0 0 0-.288 1.8c0 .832.256 1.536.768 2.112.528.576 1.312.864 2.352.864.608 0 1.176-.128 1.704-.384a5.3 5.3 0 0 0 1.368-.936l2.736 4.08z"/>
+    <path fill="#0053B3" d="M60.095 27l1.152-6.529h-4.848L55.247 27h-5.544l3-16.992h5.52L57.19 15.84h4.848l1.032-5.832h5.568l-3 16.992h-5.544z"/>
+    <path fill="#0053B3" d="M78.284 27l-.384-2.593h-5.52L70.963 27H64.77l10.44-16.992h5.857L84.044 27h-5.76zM76.94 15.79l-2.424 4.368h2.928l-.504-4.368zM99.736 20.76a9.493 9.493 0 0 1-.912 2.76 6.457 6.457 0 0 1-1.68 2.087c-.688.576-1.52 1.024-2.496 1.344-.977.32-2.096.48-3.36.48-1.088 0-2.08-.12-2.977-.36-.896-.24-1.664-.584-2.304-1.032a4.96 4.96 0 0 1-1.488-1.68c-.352-.656-.528-1.4-.528-2.232 0-.224.016-.48.048-.768.032-.304.064-.576.096-.816l1.8-10.536h5.496l-1.752 9.816a1.677 1.677 0 0 0-.048.408v.384c0 .528.16.992.48 1.392.32.4.864.6 1.632.6.497 0 .897-.08 1.2-.24.32-.16.576-.368.769-.624.191-.256.336-.544.432-.864.096-.32.176-.64.24-.96l1.8-9.912h5.4L99.736 20.76zM107.404 14.663l-.36 1.968h5.232l-.792 4.512h-5.209L105.243 27h-5.448l3-16.992h10.945l-.816 4.656h-5.52zM119.148 14.663l-.36 1.968h5.232l-.792 4.512h-5.208L116.988 27h-5.448l3-16.992h10.944l-.816 4.656h-5.52zM123.284 27l3-16.993h11.112l-.816 4.632h-5.88l-.288 1.632h5.616l-.768 4.32h-5.616l-.312 1.776h6.576L135.092 27h-11.808zM152.104 20.76a9.493 9.493 0 0 1-.912 2.76 6.457 6.457 0 0 1-1.68 2.087c-.688.576-1.52 1.024-2.496 1.344-.976.32-2.096.48-3.36.48-1.088 0-2.08-.12-2.976-.36-.896-.24-1.664-.584-2.304-1.032a4.96 4.96 0 0 1-1.488-1.68c-.352-.656-.528-1.4-.528-2.232 0-.224.016-.48.048-.768.032-.304.064-.576.096-.816l1.8-10.536h5.496l-1.752 9.816a1.677 1.677 0 0 0-.048.408v.384c0 .528.16.992.48 1.392.32.4.864.6 1.632.6.496 0 .896-.08 1.2-.24.32-.16.576-.368.768-.624.192-.256.336-.544.432-.864.096-.32.176-.64.24-.96l1.8-9.912h5.4l-1.848 10.752zM161.572 27l-2.328-6.217h-.672L157.516 27h-5.352l3-16.992h6.984c.928 0 1.768.104 2.52.312.752.208 1.392.512 1.92.912s.928.896 1.2 1.488c.288.576.432 1.24.432 1.992 0 1.408-.336 2.568-1.008 3.48-.656.912-1.56 1.536-2.712 1.872L167.812 27h-6.24zm-1.224-9.745c.736 0 1.312-.12 1.728-.36.416-.256.624-.656.624-1.2 0-.496-.176-.832-.528-1.008-.336-.192-.8-.288-1.392-.288h-1.032l-.504 2.856h1.104z"/>
+</svg>
diff --git a/static/logo_fab_num.png b/static/logo_fab_num.png
new file mode 100644
index 0000000..5ec15c0
Binary files /dev/null and b/static/logo_fab_num.png differ
diff --git a/static/logo_ma.png b/static/logo_ma.png
new file mode 100644
index 0000000..2232a0a
Binary files /dev/null and b/static/logo_ma.png differ
diff --git a/static/smart_tab.png b/static/smart_tab.png
new file mode 100644
index 0000000..e972408
Binary files /dev/null and b/static/smart_tab.png differ
diff --git a/static/start_up_etat.png b/static/start_up_etat.png
new file mode 100644
index 0000000..a25232c
Binary files /dev/null and b/static/start_up_etat.png differ
diff --git a/store/gsbdd.js b/store/gsbdd.js
new file mode 100644
index 0000000..cb3c0c0
--- /dev/null
+++ b/store/gsbdd.js
@@ -0,0 +1,60 @@
+const GSBDD_LIST = [
+  'Angers - Le Mans - Saumur',
+  'Angoulême',
+  'Belfort',
+  'Besancon',
+  'Bordeaux-Mérignac',
+  'Bourges-Avord',
+  'Brest - Lorient',
+  'Brive-la-Gaillarde',
+  'Charleville-Mézières',
+  'Calvi',
+  'Carcassonne',
+  'Cazaux',
+  'Cherbourg',
+  'Clermont-Ferrand',
+  'Colmar',
+  'Creil',
+  'Draguignan',
+  'Epinal-Luxeuil',
+  'Evreux',
+  'Gap',
+  'Grenoble - Annecy - Chambery',
+  'Istres - Orange - Salon de Provence',
+  'La Valbonne',
+  'Lille',
+  'Lyon Mont-Verdun',
+  'Marseille Aubagne',
+  'Metz',
+  'Mont-de-Marsan',
+  'Montauban ',
+  'Monthléry',
+  'Mourmelon Mailly',
+  'Nancy',
+  'Nîmes Laudun Larzac',
+  'Orleans - Bricy',
+  'Paris - St Germain en Laye',
+  'Paris - Versailles',
+  'Paris - Villacoublay',
+  'Paris - Vincennes',
+  'Paris-Ecole militaire',
+  'Pau - Bayonne',
+  'Phalsbourg',
+  'Poitiers - St-Maixent',
+  'Rennes',
+  'Rochefort-Cognac',
+  'Saint-Christol',
+  'Saint-Dizier - Chaumont',
+  'Strasbourg - Haguenau',
+  'Toulon',
+  'Toulouse Tarbes Castres',
+  'Tours',
+  'Valence',
+  'Vannes - Coetquidan',
+  'Ventiseri-Solenzara',
+  'Verdun',
+];
+
+export const state = () => ({ list: GSBDD_LIST });
+
+export const mutations = {};