diff --git a/src/App.vue b/src/App.vue
index 6e52ad7..bcec426 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@ import Nav from './components/nav.vue'
 export default {
   name: 'App',
   components: {
-    Nav
+      Nav
   }
 }
 </script>
diff --git a/src/components/hightlights.vue b/src/components/hightlights.vue
new file mode 100644
index 0000000..7e911f3
--- /dev/null
+++ b/src/components/hightlights.vue
@@ -0,0 +1,80 @@
+<template>
+<div id="hightlights"> 
+    <div class="hightlight">
+        <ul>
+            <li>{{ ca }}</li>
+            <li>CA</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caMean }}</li>
+            <li>CA moyen</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caTheo }}</li>
+            <li>CA des séances effectuées</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caTheo - ca }}</li>
+            <li>Non facturé</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ remuneration }}</li>
+            <li>Rémunération</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ remunerationMean }}</li>
+            <li>Rémunération moyenne</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ retrocession }}</li>
+            <li>Rétrocession</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ retrocessionMean }}</li>
+            <li>Rétrocession moyenne</li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+    name: 'Hightlights',
+    components: {
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters('travail', {
+            ca: "ca",
+            caMean: "caMean",
+            caTheo: "caTheo",
+            remuneration: "remuneration",
+            remunerationMean: "remunerationMean",
+            retrocession: "retrocession",
+            retrocessionMean: "retrocessionMean",
+        })
+      },
+      methods: {
+      },
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/home.vue b/src/views/home.vue
index 29d620a..3132e14 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -12,8 +12,7 @@
     </section>
     <section id="stats">
         <h2>Résumé</h2>
-            
-        
+        <highlights></highlights> 
     </section>
 </div>
 </template>
@@ -23,12 +22,14 @@ import { mapGetters, mapActions } from 'vuex'
 import MonthsList from '../components/MonthsUl.vue'
 import CreateMonth from '../components/CreateMonth.vue'
 import MonthSelector from '../components/monthSelector.vue'
+import Highlights from '../components/hightlights.vue'
 export default {
     name: 'home',
     components: {
         MonthsList: MonthsList,
         CreateMonth: CreateMonth,
         MonthSelector: MonthSelector,
+        highlights: Highlights,
         },
     data () {
         return {}