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..dee05b285
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
@@ -0,0 +1,46 @@
+<template>
+   
+   <ul class="nav nav-tabs">
+      <li class="nav-item">
+         <a class="nav-link active" aria-current="page" href="#">
+            <i class="fa fa-home"></i>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link" href="#">
+            Actions d'accompagnement
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link" href="#">
+            Évaluations
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link" href="#">
+            Tâches
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link" href="#">
+            Parcours
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link" href="#">
+            Notifications
+         </a>
+      </li>
+   </ul>
+   
+   
+</template>
+
+<script>
+export default {
+   name: "App"
+}
+</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..0eff7fa96
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js
@@ -0,0 +1,11 @@
+const appMessages = {
+    fr: {
+
+    }
+};
+
+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
index 24aa8aec9..ba53f8fdd 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Homepage/index.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Homepage/index.html.twig
@@ -3,44 +3,13 @@
     {# vue component #}
     <div id="homepage_widget"></div>
     
-    <ul class="nav nav-tabs">
-        <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="#">
-                <i class="fa fa-home"></i>
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="#">
-                Actions d'accompagnement
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="#">
-                Évaluations
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="#">
-                Tâches
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="#">
-                Parcours
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="#">
-                Notifications
-            </a>
-        </li>
-    </ul>
-    
     {% 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/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);