diff --git a/app/app.vue b/app/app.vue
index 06a28ad..1413292 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,24 +1,22 @@
 <template>
-    <div>
+    <div id="app">
         <lesspass-navbar></lesspass-navbar>
         <lesspass-header></lesspass-header>
         <lesspass-features></lesspass-features>
         <!--<lesspass-headlines></lesspass-headlines>-->
-        <!--<lesspass-how-it-works></lesspass-how-it-works>-->
-        <!--<lesspass-feedback></lesspass-feedback>-->
+        <lesspass-howitworks></lesspass-howitworks>
+        <lesspass-feedback></lesspass-feedback>
         <!--<lesspass-faq></lesspass-faq>-->
-        <!--<lesspass-footer></lesspass-footer>-->
+        <lesspass-footer></lesspass-footer>
     </div>
 </template>
 <script>
     import LesspassNavbar from './navbar/navbar.vue';
     import LesspassHeader from './header/header.vue';
     import LesspassFeatures from './features/features.vue';
-//    import LesspassHeadlines from './components/headlines.vue';
-//    import LesspassFeedback from './components/feedback.vue';
-//    import LesspassHowItWorks from './components/howitworks.vue';
-//    import LesspassFaq from './components/faq.vue';
-//    import LesspassFooter from './components/footer.vue';
+    import LesspassHowitworks from './howitworks/howitworks.vue';
+    import LesspassFeedback from './feedback/feedback.vue';
+    import LesspassFooter from './footer/footer.vue';
 
     export default {
         data: function () {
@@ -27,7 +25,10 @@
         components: {
             LesspassNavbar,
             LesspassHeader,
-            LesspassFeatures
+            LesspassFeatures,
+            LesspassHowitworks,
+            LesspassFeedback,
+            LesspassFooter
         }
     }
 </script>
\ No newline at end of file
diff --git a/app/components/howitworks.vue b/app/components/howitworks.vue
deleted file mode 100644
index 1c0abfb..0000000
--- a/app/components/howitworks.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<style>
-    .lesspass-how-it-works {
-        background-color: #025aa5;;
-        color: #D3D8E8;
-    }
-
-    .lesspass-how-it-works img {
-        height: 120px;
-    }
-
-    .lesspass-how-it-works .explanation {
-        line-height: 1.5em;
-        font-weight: 400;
-    }
-
-    .lesspass-how-it-works .title {
-        font-weight: 600;
-    }
-
-    .lesspass-how-it-works a {
-        color: #D3D8E8;
-        text-decoration: underline;
-    }
-</style>
-<template>
-    <div class="lesspass-how-it-works p-t-3">
-        <div class="container">
-            <div class="row text-xs-center">
-                <div class="col-md-3">
-                    <div class="row">
-                        <div class="col-lg-12 m-y-3">
-                            <img src="../assets/images/responsive.png" alt="responsive">
-                        </div>
-                        <div class="col-lg-12 m-b-3">
-                            <h4 class="title">{{{ $t('how_it_works.responsive_title') }}}</h4>
-                            <h5 class="explanation m-t-1 m-b-3">{{{ $t('how_it_works.responsive') }}}</h5>
-                        </div>
-                    </div>
-
-                </div>
-                <div class="col-md-3">
-                    <div class="row">
-                        <div class="col-lg-12 m-y-3">
-                            <img src="../assets/images/no-cloud.png" alt="no cloud">
-                        </div>
-                        <div class="col-lg-12 m-b-3">
-                            <h4 class="title">{{{ $t('how_it_works.no_cloud_title') }}}</h4>
-                            <h5 class="explanation m-t-1 m-b-3">{{{ $t('how_it_works.no_cloud') }}}</h5>
-                        </div>
-                    </div>
-
-                </div>
-
-                <div class="col-md-3">
-                    <div class="row">
-                        <div class="col-lg-12 m-y-3">
-                            <img src="../assets/images/open-source.png" alt="open source">
-                        </div>
-                        <div class="col-lg-12 m-b-3">
-                            <h4 class="title">{{{ $t('how_it_works.open_source_title') }}}</h4>
-                            <h5 class="explanation m-t-1 m-b-3">{{{ $t('how_it_works.open_source') }}}</h5>
-                        </div>
-                    </div>
-
-
-                </div>
-                <div class="col-md-3">
-                    <div class="row">
-                        <div class="col-lg-12 m-y-3">
-                            <img src="../assets/images/free.png" alt="free">
-                        </div>
-                        <div class="col-lg-12 m-b-3">
-                            <h4 class="title">{{{ $t('how_it_works.free_title') }}}</h4>
-                            <h5 class="explanation m-t-1 m-b-3">{{{ $t('how_it_works.free') }}}</h5>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/app/features/features.vue b/app/features/features.vue
index 5af52ac..e8cadba 100644
--- a/app/features/features.vue
+++ b/app/features/features.vue
@@ -20,8 +20,8 @@
                             <img src="./responsive.png" alt="" class="img-fluid">
                         </a>
                         <div class="media-body">
-                            <h4 class="media-heading">{{{ $t('how_it_works.responsive_title') }}}</h4>
-                            {{{ $t('how_it_works.responsive') }}}
+                            <h4 class="media-heading">{{{ $t('features.responsive_title') }}}</h4>
+                            <p class="lead">{{{ $t('features.responsive') }}}</p>
                         </div>
                     </div>
                 </div>
@@ -32,8 +32,8 @@
                             <img src="./no-cloud.png" alt="" class="img-fluid">
                         </a>
                         <div class="media-body">
-                            <h4 class="media-heading">{{{ $t('how_it_works.no_cloud_title') }}}</h4>
-                            {{{ $t('how_it_works.no_cloud') }}}
+                            <h4 class="media-heading">{{{ $t('features.no_cloud_title') }}}</h4>
+                            <p class="lead">{{{ $t('features.no_cloud') }}}</p>
                         </div>
                     </div>
                 </div>
@@ -45,8 +45,8 @@
                             <img src="./open-source.png" alt="" class="img-fluid">
                         </a>
                         <div class="media-body">
-                            <h4 class="media-heading">{{{ $t('how_it_works.open_source_title') }}}</h4>
-                            {{{ $t('how_it_works.open_source') }}}
+                            <h4 class="media-heading">{{{ $t('features.open_source_title') }}}</h4>
+                            <p class="lead">{{{ $t('features.open_source') }}}</p>
                         </div>
                     </div>
                 </div>
@@ -57,8 +57,8 @@
                             <img src="./free.png" alt="" class="img-fluid">
                         </a>
                         <div class="media-body">
-                            <h4 class="media-heading">{{{ $t('how_it_works.free_title') }}}</h4>
-                            {{{ $t('how_it_works.free') }}}
+                            <h4 class="media-heading">{{{ $t('features.free_title') }}}</h4>
+                            <p class="lead">{{{ $t('features.free') }}}</p>
                         </div>
                     </div>
                 </div>
diff --git a/app/assets/images/el.jpg b/app/feedback/el.jpg
similarity index 100%
rename from app/assets/images/el.jpg
rename to app/feedback/el.jpg
diff --git a/app/components/feedback.vue b/app/feedback/feedback.vue
similarity index 50%
rename from app/components/feedback.vue
rename to app/feedback/feedback.vue
index 44ba0b8..d723c02 100644
--- a/app/components/feedback.vue
+++ b/app/feedback/feedback.vue
@@ -1,5 +1,49 @@
 <style>
     .lesspass-feedback {
+        background-color: #134a6a;
+        color: #D3D8E8;
+    }
+
+    .lesspass-feedback .thumbnail {
+        width: 42px;
+    }
+</style>
+<template>
+    <div class="lesspass-feedback p-y-3">
+        <div class="container">
+            <div class="row m-y-3">
+                <div class="col-lg-10 col-lg-offset-1">
+                    <div class="media">
+                        <a class="media-left" href="#">
+                            <img src="./el.jpg" alt="Edouard Lopez" class="img-circle thumbnail">
+                        </a>
+                        <div class="media-body">
+                            <h4 class="media-heading">{{{ $t('feedback.feedback_1') }}}</h4>
+                            <p>{{{ $t('feedback.feedback_1_author') }}}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-y-3">
+                <div class="col-lg-10 col-lg-offset-1">
+                    <div class="media">
+                        <div class="media-body text-xs-right">
+                            <h4 class="media-heading">{{{ $t('feedback.feedback_2') }}}</h4>
+                            <p>{{{ $t('feedback.feedback_2_author') }}}</p>
+                        </div>
+                        <a class="media-right" href="#">
+                            <img src="./gv.jpg" alt="guillaume vincent" class="img-circle thumbnail">
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<!--
+
+<style>
+    .lesspass-feedback {
         background-color: #252830;
         color: #D3D8E8;
     }
@@ -31,7 +75,7 @@
 
                     <blockquote class="blockquote">
                         <p class="m-b-0">
-                            <!--<img src="" alt="..." class="img-circle thumbnail">-->
+                            &lt;!&ndash;<img src="" alt="..." class="img-circle thumbnail">&ndash;&gt;
                             {{{ $t('feedback.what_do_you_think') }}}
                         </p>
                         <footer class="blockquote-footer">
@@ -42,4 +86,4 @@
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>-->
diff --git a/app/assets/images/gv.jpg b/app/feedback/gv.jpg
similarity index 100%
rename from app/assets/images/gv.jpg
rename to app/feedback/gv.jpg
diff --git a/app/components/footer.vue b/app/footer/footer.vue
similarity index 53%
rename from app/components/footer.vue
rename to app/footer/footer.vue
index 75c64e6..ed4d7be 100644
--- a/app/components/footer.vue
+++ b/app/footer/footer.vue
@@ -1,28 +1,26 @@
 <style>
-    footer {
-        font-size: 0.7rem;
-        font-family: Consolas, DejaVu Sans Mono, Courier, monospace;
+    #footer {
+        background-color: #1B2529;
+        color: #7A8491;
     }
 </style>
 <template>
-    <footer class="text-xs-center">
+    <div id="footer" class="text-xs-center">
         <div class="container">
             <div class="row p-y-3">
                 <div class="col-lg-12">
-                    <p>
-                        <img src="../assets/images/logo.png" alt="logo">
-                    </p>
+                    <img src="./logo.png" alt="logo">
                 </div>
             </div>
             <div class="row p-y-3">
                 <div class="col-lg-12">
-                    <p>
+                    <p class="lead">
                         &copy; LessPass
                         - {{ $t('footer.built_by') }} <a href="mailto:guillaume@oslab.fr">Guillaume Vincent</a>
-                        - <a href="https://github.com/oslab-fr/lesspass">{{ $t('footer.source_code') }}</a>
+                        - <a href="https://github.com/lesspass">{{ $t('footer.contribute') }}</a>
                     </p>
                 </div>
             </div>
         </div>
-    </footer>
+    </div>
 </template>
\ No newline at end of file
diff --git a/app/assets/images/logo.png b/app/footer/logo.png
similarity index 100%
rename from app/assets/images/logo.png
rename to app/footer/logo.png
diff --git a/app/header/password-generator/password-generator.vue b/app/header/password-generator/password-generator.vue
index 7edaf2e..3a36688 100644
--- a/app/header/password-generator/password-generator.vue
+++ b/app/header/password-generator/password-generator.vue
@@ -63,7 +63,7 @@
                                v-bind:disabled="!generatedPassword">
                         <span class="input-group-btn">
                             <button id="copyBtn" data-clipboard-target="#generatedPassword"
-                                    class="btn btn-reverse" type="button">
+                                    class="btn btn-warning" type="button">
                                 {{ $t('passwordgenerator.copy') }}
                             </button>
                         </span>
diff --git a/app/howitworks/howitworks.vue b/app/howitworks/howitworks.vue
new file mode 100644
index 0000000..ff5af93
--- /dev/null
+++ b/app/howitworks/howitworks.vue
@@ -0,0 +1,52 @@
+<style>
+    #how-it-works {
+        background-color: #F8F8F8;;
+        color: #7f7f7f;
+    }
+</style>
+<template>
+    <div id="how-it-works">
+        <div class="container">
+            <div class="row p-t-3">
+                <div class="col-lg-12">
+                    <h3>{{ $t('how_it_works.title') }}</h3>
+                    <p class="lead">
+                        {{ $t('how_it_works.subtitle') }}
+                    </p>
+                </div>
+            </div>
+
+            <div class="row p-y-3">
+                <div class="col-lg-4 m-b-2">
+                    <img src="./lesspass.gif" alt="open source" class="img-fluid">
+                </div>
+                <div class="col-lg-7 col-lg-offset-1">
+                    <div class="media m-b-3">
+                        <div class="media-body">
+                            <h4 class="media-heading">Media heading</h4>
+                            <p class="lead">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
+                            commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
+                            condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                        </div>
+                    </div>
+                    <div class="media m-b-3">
+                        <div class="media-body">
+                            <h4 class="media-heading">Media heading</h4>
+                            <p class="lead">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
+                            commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
+                            condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                        </div>
+                    </div>
+                    <div class="media m-b-3">
+                        <div class="media-body">
+                            <h4 class="media-heading">Media heading</h4>
+                            <p class="lead">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
+                            commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
+                            condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/assets/images/lesspass.gif b/app/howitworks/lesspass.gif
similarity index 100%
rename from app/assets/images/lesspass.gif
rename to app/howitworks/lesspass.gif
diff --git a/app/locales.js b/app/locales.js
index f4ad0f1..643394c 100644
--- a/app/locales.js
+++ b/app/locales.js
@@ -9,8 +9,8 @@ const locales = {
             "subtitle": "generate an unique password based on the information you provide"
         },
         "footer": {
-            "built_by": "by",
-            "source_code": "Source code"
+            "built_by": "built by",
+            "contribute": "contribute"
         },
         "passwordgenerator": {
             "who_are_you": "Email / Username",
@@ -50,7 +50,7 @@ const locales = {
             "a_pricing_free": "LessPass is free and always will be.",
             "a_pricing_enterprise": "LessPass Enterprise will add support for <abbr title='Lightweight Directory Access Protocol'>LDAP</abbr> and double-authentication for companies."
         },
-        "how_it_works": {
+        "features": {
             "no_cloud_title": "No storage",
             "responsive_title": "Available everywhere",
             "open_source_title": "Open Source",
@@ -60,13 +60,15 @@ const locales = {
             "open_source": "LessPass is <strong>open-source</strong>. So its security can be audited. Source code is available on <a href='https://github.com/lesspass/core'>Github</a>.",
             "free": "LessPass is free and always will be."
         },
+        "how_it_works": {
+            "title": "",
+            "subtitle": ""
+        },
         "feedback": {
             "feedback_1": "Finally a security tool that I did not need to trust.",
             "feedback_1_author": "Édouard Lopez, LessPass Team Member",
             "feedback_2": "I no longer need a personal cloud to manage my passwords.<br>One secret and I have access to my passwords everywhere.",
-            "feedback_2_author": "Guillaume Vincent, LessPass Founder",
-            "what_do_you_think": "Tell us what you think of LessPass.",
-            "send_us_email": "Send us an email"
+            "feedback_2_author": "Guillaume Vincent, LessPass Founder"
         }
     },
     "fr": {
@@ -76,8 +78,8 @@ const locales = {
             "subtitle": "construit un mot de passe unique lorsque vous en avez besoin sur la base d'informations uniques que vous lui fournissez."
         },
         "footer": {
-            "built_by": "Réalisé par",
-            "source_code": "Code source"
+            "built_by": "créé par",
+            "contribute": "contribuer"
         },
         "passwordgenerator": {
             "who_are_you": "Email / Nom d'utilisateur",
@@ -118,7 +120,7 @@ const locales = {
             "a_pricing_free": "LessPass est gratuit et le sera toujours.",
             "a_pricing_enterprise": "LessPass Enterprise, avec le support <abbr title='Lightweight Directory Access Protocol'>LDAP</abbr> et la double authentication, sera payante pour les enterprises."
         },
-        "how_it_works": {
+        "features": {
             "no_cloud_title": "Pas de stockage",
             "responsive_title": "Disponible partout",
             "open_source_title": "Open Source",
@@ -128,13 +130,15 @@ const locales = {
             "open_source": "LessPass est open source. Le code source est disponible sur <a href='https://github.com/lesspass/core'>Github</a>, vous pouvez l'auditer",
             "free": "LessPass est gratuit et le sera toujours."
         },
+        "how_it_works": {
+            "title": "Comment LessPass fonctionne ?",
+            "subtitle": "LessPass est un générateur de mot de passe qui vous garanti générer le même mot de passe sur la base d'informations uniques que vous lui fournissez. Vous pouvez donc utiliser LessPass pour créer des mots de passe pour vos différents services internet (Réseaux sociaux, mails, mots de passe serveurs, ...)."
+        },
         "feedback": {
             "feedback_1": "Enfin un outil de sécurité a qui je n'ai pas besoin de faire confiance.",
-            "feedback_1_author": "Édouard Lopez, membre de l'équipe de LessPass",
-            "feedback_2": "Je n'ai plus besoin d'un cloud personnel pour gérer mes mots de passe. Une seule phrase secrete et j'ai accès à mes mots de passe partout.",
-            "feedback_2_author": "Guillaume Vincent, créateur de LessPass",
-            "what_do_you_think": "dites-nous ce que vous pensez de LessPass.",
-            "send_us_email": "Envoyez-nous un email"
+            "feedback_1_author": "Édouard Lopez,<br> membre de l'équipe de LessPass",
+            "feedback_2": "Je n'ai plus besoin d'un cloud personnel pour gérer mes mots de passe.<br> Une seule phrase secrete et j'ai accès à mes mots de passe partout.",
+            "feedback_2_author": "Guillaume Vincent,<br> créateur de LessPass"
         }
     }
 };