diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
index 39f8b3f8a..a1d9ee519 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
@@ -490,3 +490,18 @@ div.popover {
 div.v-toast {
    z-index: 10000!important;
 }
+
+//
+div.sticky-buttons {
+    position: fixed;
+    bottom: 3em;
+    right: 2em;
+    .btn-circle {
+        width: 50px; height: 50px;
+        border-radius: 50%;
+        text-align: center;
+        padding: 0.45rem 0.7rem;
+        display: block;
+        margin-bottom: 0.35rem;
+    }
+}
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/page/homepage_widget/index.js b/src/Bundle/ChillMainBundle/Resources/public/page/homepage_widget/index.js
new file mode 100644
index 000000000..698302ebb
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/page/homepage_widget/index.js
@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { appMessages } from 'ChillMainAssets/vuejs/HomepageWidget/js/i18n';
+import { store } from 'ChillMainAssets/vuejs/HomepageWidget/js/store';
+import App from 'ChillMainAssets/vuejs/HomepageWidget/App';
+
+const i18n = _createI18n(appMessages);
+
+const app = createApp({
+    template: `<app></app>`,
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#homepage_widget')
+;
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
new file mode 100644
index 000000000..cf8ad2a1d
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
@@ -0,0 +1,108 @@
+<template>
+   
+   <ul class="nav nav-tabs">
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyCustoms'}"
+            @load="selectTab('MyCustoms')" @click="selectTab('MyCustoms')">
+            <i class="fa fa-home"></i>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyWorks'}"
+            @click="selectTab('MyWorks')">
+            {{ $t('my_works') }}
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyEvaluations'}"
+            @click="selectTab('MyEvaluations')">
+            {{ $t('my_evaluations') }}
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyTasks'}"
+            @click="selectTab('MyTasks')">
+            {{ $t('my_task') }}
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyAccompanyingCourses'}"
+            @click="selectTab('MyAccompanyingCourses')">
+            {{ $t('my_accompanying_courses') }}
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyNotifications'}"
+            @click="selectTab('MyNotifications')">
+            {{ $t('my_notifications') }}
+         </a>
+      </li>
+   </ul>
+   
+   <div class="my-4">
+      <my-customs
+         v-if="activeTab === 'MyCustoms'">
+      </my-customs>
+      <my-works
+         v-else-if="activeTab === 'MyWorks'">
+      </my-works>
+      <my-evaluations
+         v-else-if="activeTab === 'MyEvaluations'">
+      </my-evaluations>
+      <my-tasks
+         v-else-if="activeTab === 'MyTasks'">
+      </my-tasks>
+      <my-accompanying-courses
+         v-else-if="activeTab === 'MyAccompanyingCourses'">
+      </my-accompanying-courses>
+      <my-notifications
+         v-else-if="activeTab === 'MyNotifications'">
+      </my-notifications>
+   </div>
+</template>
+
+<script>
+import MyCustoms from './MyCustoms';
+import MyWorks from './MyWorks';
+import MyEvaluations from './MyEvaluations';
+import MyTasks from './MyTasks';
+import MyAccompanyingCourses from './MyAccompanyingCourses';
+import MyNotifications from './MyNotifications';
+
+export default {
+   name: "App",
+   components: {
+      MyCustoms,
+      MyWorks,
+      MyEvaluations,
+      MyTasks,
+      MyAccompanyingCourses,
+      MyNotifications,
+   },
+   data() {
+      return {
+         activeTab: 'MyCustoms'
+      }
+   },
+   computed: {
+   },
+   methods: {
+      selectTab(tab) {
+         console.log('load tab content', tab);
+         this.activeTab = tab;
+      }
+   }
+}
+</script>
+
+<style scoped>
+a.nav-link {
+   cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
new file mode 100644
index 000000000..31107b564
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
@@ -0,0 +1,13 @@
+<template>
+   MyAccompanyingCourses
+</template>
+
+<script>
+export default {
+   name: "MyAccompanyingCourses"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
new file mode 100644
index 000000000..cc7831104
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
@@ -0,0 +1,13 @@
+<template>
+   MyCustoms
+</template>
+
+<script>
+export default {
+   name: "MyCustoms"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
new file mode 100644
index 000000000..019628a28
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
@@ -0,0 +1,13 @@
+<template>
+   MyEvaluations
+</template>
+
+<script>
+export default {
+   name: "MyEvaluations"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
new file mode 100644
index 000000000..a8b811fbd
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
@@ -0,0 +1,13 @@
+<template>
+   MyNotifications
+</template>
+
+<script>
+export default {
+   name: "MyNotifications"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
new file mode 100644
index 000000000..c61cf51b2
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
@@ -0,0 +1,13 @@
+<template>
+   MyTasks
+</template>
+
+<script>
+export default {
+   name: "MyTasks"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
new file mode 100644
index 000000000..9f7f71bc4
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
@@ -0,0 +1,13 @@
+<template>
+   MyWorks
+</template>
+
+<script>
+export default {
+   name: "MyWorks"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js
new file mode 100644
index 000000000..e67b7f5d3
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js
@@ -0,0 +1,15 @@
+const appMessages = {
+    fr: {
+        my_works: "Actions d'accompagnement",
+        my_evaluations: "Évaluations",
+        my_task: "Tâches",
+        my_accompanying_courses: "Parcours",
+        my_notifications: "Notifications",
+    }
+};
+
+Object.assign(appMessages.fr);
+
+export {
+    appMessages
+};
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js
new file mode 100644
index 000000000..bb9af47e6
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js
@@ -0,0 +1,14 @@
+import 'es6-promise/auto';
+import { createStore } from 'vuex';
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const store = createStore({
+    strict: debug,
+    state: {},
+    getters: {},
+    mutations: {},
+    actions: {},
+});
+
+export { store };
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Homepage/index.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Homepage/index.html.twig
new file mode 100644
index 000000000..ba53f8fdd
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/views/Homepage/index.html.twig
@@ -0,0 +1,15 @@
+<div class="col-10 mt-5">
+    
+    {# vue component #}
+    <div id="homepage_widget"></div>
+    
+    {% include '@ChillMain/Homepage/sticky_button.html.twig' %}
+</div>
+
+{% block css %}
+    {{ encore_entry_link_tags('page_homepage_widget') }}
+{% endblock %}
+
+{% block js %}
+    {{ encore_entry_script_tags('page_homepage_widget') }}
+{% endblock %}
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Homepage/sticky_button.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Homepage/sticky_button.html.twig
new file mode 100644
index 000000000..27dd4fe5d
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/views/Homepage/sticky_button.html.twig
@@ -0,0 +1,10 @@
+<div class="sticky-buttons">
+    <a class="btn btn-lg btn-circle btn-success" title="Appel téléphonique"
+       href="{{ path('chill_crud_aside_activity_new', {'type' : 7, 'duration' : '600', 'note' : 'Pas des remarques' }) }}">
+        <i class="fa fa-phone fa-lg"></i>
+    </a>
+    <a class="btn btn-lg btn-circle btn-success" title="Activité annexe"
+       href="{{ path('chill_crud_aside_activity_new', {}) }}">
+        <i class="fa fa-flash fa-lg"></i>
+    </a>
+</div>
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
index a123ce405..15d57cff3 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
@@ -59,26 +59,26 @@
                 {% endif %}
 
                 {% block content %}
-                <div class="col-8 main_search">
-                    <h2>{{ 'Search'|trans }}</h2>
-
-                    <form action="{{ path('chill_main_search') }}" method="get">
-                        <input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
-                        <center>
-                            <button type="submit" class="btn btn-lg btn-warning mt-3">
-                                <i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }}
-                            </button>
-                            <a class="btn btn-lg btn-misc mt-3" href="{{ path('chill_main_advanced_search_list') }}">
-                                <i class="fa fa-fw fa-search"></i> {{ 'Advanced search'|trans }}
-                            </a>
-                        </center>
-                    </form>
-                </div>
-                <div class="col-8">
-                    <a href="{{ path('chill_crud_aside_activity_new', {'type' : 7, 'duration' : '600', 'note' : 'Pas des remarques' }) }}"><div class="bloc btn btn-success btn-md btn-block">Appel téléphonique</div></a>
-                </div>
-
-                {{  chill_widget('homepage', {} ) }}
+                    <div class="col-8 main_search">
+                        <h2>{{ 'Search'|trans }}</h2>
+    
+                        <form action="{{ path('chill_main_search') }}" method="get">
+                            <input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
+                            <center>
+                                <button type="submit" class="btn btn-lg btn-warning mt-3">
+                                    <i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }}
+                                </button>
+                                <a class="btn btn-lg btn-misc mt-3" href="{{ path('chill_main_advanced_search_list') }}">
+                                    <i class="fa fa-fw fa-search"></i> {{ 'Advanced search'|trans }}
+                                </a>
+                            </center>
+                        </form>
+                    </div>
+    
+                    {#  DISABLED {{  chill_widget('homepage', {} ) }} #}
+                    
+                    {% include '@ChillMain/Homepage/index.html.twig' %}
+                    
                 {% endblock %}
 
             </div>
diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js
index 113d326c1..93f71dd94 100644
--- a/src/Bundle/ChillMainBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillMainBundle/chill.webpack.config.js
@@ -53,6 +53,7 @@ module.exports = function(encore, entries)
     encore.addEntry('page_login', __dirname + '/Resources/public/page/login/index.js');
     encore.addEntry('page_location', __dirname + '/Resources/public/page/location/index.js');
     encore.addEntry('page_workflow_show', __dirname + '/Resources/public/page/workflow-show/index.js');
+    encore.addEntry('page_homepage_widget', __dirname + '/Resources/public/page/homepage_widget/index.js');
 
     buildCKEditor(encore);