diff --git a/package-lock.json b/package-lock.json
index cf65f25c8..192f2022d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11480,6 +11480,11 @@
         }
       }
     },
+    "vue-form-wizard": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/vue-form-wizard/-/vue-form-wizard-0.8.4.tgz",
+      "integrity": "sha512-/Zk1+B7bz7qHFJ16mwu021lpPXWf/9Tlr2mTNG3J7M0Hdy3rgA802lWsbKYySns0B0qtsD8BYGjQ2Wyxgg+4uw=="
+    },
     "vue-functional-data-merge": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
diff --git a/package.json b/package.json
index c49c73bb7..e6fa8af32 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "marked": "^0.8.0",
     "messenger-hubspot": "^1.5.0",
     "vue": "^2.6.11",
+    "vue-form-wizard": "^0.8.4",
     "vue-multiselect": "^2.1.6",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2"
diff --git a/src/main/client/app/pages/modules/modules-routes.js b/src/main/client/app/pages/modules/modules-routes.js
index 864c495b8..44a1232cb 100644
--- a/src/main/client/app/pages/modules/modules-routes.js
+++ b/src/main/client/app/pages/modules/modules-routes.js
@@ -35,6 +35,15 @@ const modulesRoutes = [
       breadcrumb: [{ text: 'Modules', to: { name: 'modules' } }, { text: 'Module description' }],
     },
   },
+  {
+    path: '/modules/:moduleId/run',
+    name: 'module-run',
+    component: () => import(/* webpackChunkName: "chunk-modules" */ '@/pages/stacks/stack-creation.vue'),
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Modules', to: { name: 'modules' } }, { text: 'Stack creation' }],
+    },
+  },
 ];
 
 export default modulesRoutes;
diff --git a/src/main/client/app/pages/stacks/stack-creation.vue b/src/main/client/app/pages/stacks/stack-creation.vue
index f18e3b68d..0691e2c5b 100644
--- a/src/main/client/app/pages/stacks/stack-creation.vue
+++ b/src/main/client/app/pages/stacks/stack-creation.vue
@@ -1,10 +1,162 @@
 <template>
-  <div>This is not the final stack creation {{ $route.params.stackId }} page xD</div>
+  <div
+    v-if="module"
+    class="block"
+  >
+    <form-wizard
+      title="Run a new stack"
+      subtitle="Follow the steps to start a new stack"
+      color="#00ab94"
+      error-color="#dc3545"
+    >
+      <tab-content
+        title="Stack"
+        :before-change="checkStackNameValidation"
+      >
+        <h4>{{ module.name }}</h4>
+        <p>{{ module.description }}</p>
+
+        <hr>
+
+        <div class="form-group">
+          <b-form-group
+            label="Name"
+            description="The name of your stack"
+          >
+            <b-input
+              v-model="stack.name"
+              :state="stackNameValid"
+              autofocus
+            />
+            <b-form-invalid-feedback>This field is mandatory</b-form-invalid-feedback>
+          </b-form-group>
+          <b-form-group
+            label="Description"
+            description="The description of your stack"
+          >
+            <b-input v-model="stack.description" />
+          </b-form-group>
+        </div>
+      </tab-content>
+      <tab-content
+        title="Variables"
+        :before-change="checkStackVariablesValidation"
+      >
+        <h2>Input variables</h2>
+        <app-stack-variable
+          v-for="variable in stack.variables"
+          :key="variable.name"
+          v-model="variable.value"
+          v-bind="variable"
+          @valid="(isValid) => variable.isValid = isValid"
+        />
+      </tab-content>
+      <tab-content title="Start">
+        <h2>Run</h2>
+        <p>Save your stack or run it !</p>
+      </tab-content>
+
+      <!-- customizing save button -->
+      <template
+        slot="finish"
+        slot-scope="props"
+      >
+        <wizard-button
+          v-if="props.isLastStep"
+          :style="props.fillButtonStyle"
+          class="wizard-footer-right finish-button"
+          @click.native="save"
+        >
+          <font-awesome-icon icon="save" /> Save
+        </wizard-button>
+      </template>
+
+      <!-- add run button -->
+      <template
+        slot="custom-buttons-right"
+        slot-scope="props"
+      >
+        <wizard-button
+          v-if="props.isLastStep"
+          :style="props.fillButtonStyle"
+          class="wizard-footer-right finish-button ml-3"
+          @click.native="run"
+        >
+          <font-awesome-icon icon="rocket" /> Save and run
+        </wizard-button>
+      </template>
+    </form-wizard>
+  </div>
 </template>
 
 <script>
+  import axios from 'axios';
+
+  import AppStackVariable from './stack-variable.vue';
+
   export default {
     name: 'AppStackCreation',
+
+    components: {
+      AppStackVariable,
+    },
+
+    data() {
+      return {
+        module: null,
+        stack: null,
+        stacksVariablesValidated: false,
+      };
+    },
+
+    computed: {
+      stackNameValid() {
+        return typeof this.stack.name !== 'undefined' && this.stack.name !== '';
+      },
+    },
+
+    async created() {
+      const result = await axios.get(`/api/modules/${this.$route.params.moduleId}`);
+      this.module = result.data;
+
+      this.stack = {};
+      this.stack.moduleId = this.module.id;
+      this.stack.variableValues = {};
+      this.stack.variables = this.module.variables.map((variable) => ({
+        ...variable,
+        value: variable.defaultValue || '',
+        isValid: true,
+      }));
+    },
+
+    methods: {
+      async checkStackNameValidation() {
+        return this.stackNameValid;
+      },
+      async checkStackVariablesValidation() {
+        return this.stack.variables.every((variable) => variable.isValid);
+      },
+      stackVariablesMgmt() {
+        this.stack.variableValues = {};
+        this.stack.variables.forEach((variable) => {
+          this.stack.variableValues[variable.name] = variable.value;
+        });
+      },
+      async saveStack() {
+        const response = await axios.post('/api/stacks', this.stack);
+        return response.data;
+      },
+      async save() {
+        this.stackVariablesMgmt();
+        const stack = await this.saveStack();
+        await this.$router.push({ path: `/stacks/${stack.id}` });
+      },
+      async run() {
+        this.stackVariablesMgmt();
+        const stack = await this.saveStack();
+        await this.$router.push({ path: `/stacks/${stack.id}/RUN` });
+      },
+    },
   };
 </script>
 
diff --git a/src/main/client/app/pages/stacks/stack-variable.vue b/src/main/client/app/pages/stacks/stack-variable.vue
new file mode 100644
index 000000000..a6b922c6f
--- /dev/null
+++ b/src/main/client/app/pages/stacks/stack-variable.vue
@@ -0,0 +1,104 @@
+<template>
+  <b-form-group
+    :label="name"
+    :description="description"
+  >
+    <b-input
+      v-if="! isListRegex"
+      v-model="editableValue"
+      :state="validAndEmit().result"
+      trim
+      @input="$emit('input', editableValue)"
+    />
+    <b-select
+      v-if="isListRegex"
+      v-model="editableValue"
+      :state="validAndEmit().result"
+      :options="listOptions"
+      @input="$emit('input', editableValue)"
+    />
+    <b-form-invalid-feedback>{{ valid().message }}</b-form-invalid-feedback>
+  </b-form-group>
+</template>
+
+<script>
+  export default {
+    name: 'StackVariable',
+    props: {
+      name: {
+        type: String,
+        required: true,
+      },
+      description: {
+        type: String,
+        required: true,
+      },
+      value: {
+        type: String,
+        required: true,
+      },
+      validationRegex: {
+        type: String,
+        default: '',
+      },
+      mandatory: {
+        type: Boolean,
+        required: true,
+      },
+    },
+
+    data() {
+      return {
+        editableValue: this.value,
+      };
+    },
+
+    computed: {
+      isListRegex() {
+        const listRegex = /^\(([^|]*)(\|([^|]*))*\)$/;
+        return listRegex.test(this.validationRegex);
+      },
+      listOptions() {
+        const listExtractRegex = /[^()|]+/g;
+        // extracting the values from the regex
+        // also adding empty string to the result to be able to not select anything !
+        return ['', ...this.validationRegex.match(listExtractRegex)];
+      },
+    },
+
+    methods: {
+      validAndEmit() {
+        const validationResult = this.valid();
+        this.$emit('valid', validationResult.result !== false);
+        return validationResult;
+      },
+      valid() {
+        // no validation needed if variable is not mandatory and if no validation regex
+        if (!this.mandatory && !this.validationRegex) {
+          return { result: null };
+        }
+
+        // checking for empty values
+        if (this.editableValue === null
+          || typeof this.editableValue === 'undefined'
+          || this.editableValue.trim().length === 0) {
+          // mandatory variables cannot be empty
+          if (this.mandatory) {
+            return { result: false, message: 'This field is mandatory' };
+          }
+          // stop checks is fields is empty
+          return { result: null };
+        }
+
+        // check regex if defined
+        if (this.validationRegex) {
+          if (!new RegExp(this.validationRegex).test(this.editableValue)) {
+            return { result: false, message: `This field must match the regex ${this.validationRegex}` };
+          }
+        }
+
+        return { result: true };
+      },
+    },
+  };
+</script>
diff --git a/src/main/client/app/pages/stacks/stacks-routes.js b/src/main/client/app/pages/stacks/stacks-routes.js
index c103b07f9..c8cacd8b2 100644
--- a/src/main/client/app/pages/stacks/stacks-routes.js
+++ b/src/main/client/app/pages/stacks/stacks-routes.js
@@ -17,15 +17,6 @@ const stacksRoutes = [
       breadcrumb: [{ text: 'Stacks', to: { name: 'stacks' } }, { text: 'Stack' }],
     },
     children: [
-      {
-        path: 'add',
-        name: 'stack_creation',
-        component: () => import(/* webpackChunkName: "chunk-stacks" */ '@/pages/stacks/stack-creation.vue'),
-        meta: {
-          authorities: ['ROLE_USER'],
-          breadcrumb: [{ text: 'Modules', to: { name: 'modules' } }, { text: 'Stack creation' }],
-        },
-      },
       {
         path: 'edit',
         name: 'stack_edition',
diff --git a/src/main/client/app/shared/config/bootstrap-vue-config.js b/src/main/client/app/shared/config/bootstrap-vue-config.js
index eaa70b42c..7c056d21f 100644
--- a/src/main/client/app/shared/config/bootstrap-vue-config.js
+++ b/src/main/client/app/shared/config/bootstrap-vue-config.js
@@ -19,6 +19,9 @@ import {
 } from 'bootstrap-vue';
 import { Multiselect } from 'vue-multiselect';
 
+import VueFormWizard from 'vue-form-wizard';
+import 'vue-form-wizard/dist/vue-form-wizard.min.css';
+
 export default {
   init: () => {
     Vue.use(ButtonPlugin);
@@ -38,6 +41,8 @@ export default {
     Vue.use(NavPlugin);
     Vue.use(BreadcrumbPlugin);
 
+    Vue.use(VueFormWizard);
+
     Vue.component('vue-multiselect', Multiselect);
   },
 };
diff --git a/src/main/resources/templates/new_stack.html b/src/main/resources/templates/new_stack.html
deleted file mode 100644
index 4c9e759d2..000000000
--- a/src/main/resources/templates/new_stack.html
+++ /dev/null
@@ -1,242 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="layout/header :: header(~{::title})">
-
-    <title>Gaia - Edit stack</title>
-
-</head>
-<body class="dashboard dashboard_2">
-
-<div th:replace="layout/include_scripts"></div>
-
-<div class="full_container">
-    <div class="inner_container">
-
-        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
-
-        <!-- right content -->
-        <div id="content">
-
-            <div th:replace="~{layout/topbar}"></div>
-
-            <div class="container-fluid">
-                <div class="row column_title">
-                    <div class="col-md-12">
-                        <div class="page_title">
-                            <div id="navigation"></div>
-                        </div>
-                    </div>
-                </div>
-                <div id="app"></div>
-            </div>
-
-        </div>
-    </div>
-</div>
-
-<script src="/js/prism.js"></script>
-
-<div th:replace="vue_templates/components/stack-vars"></div>
-<div th:replace="vue_templates/components/breadcrumb"></div>
-<div th:replace="vue_templates/components/sidebar"></div>
-
-<template id="template">
-    <div>
-        <div class="row">
-            <div class="block wizard">
-                <div class="wizard-inner">
-                    <div class="connecting-line"></div>
-                    <ul class="nav nav-tabs" role="tablist">
-
-                        <li role="presentation">
-                            <a href="#step1" class="active" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
-                            <span class="round-tab">
-                                <i class="fa fa-object-group"></i>
-                            </span>
-                            </a>
-                        </li>
-
-                        <li role="presentation" class="disabled">
-                            <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
-                            <span class="round-tab">
-                                <i class="far fa-edit"></i>
-                            </span>
-                            </a>
-                        </li>
-                        <li role="presentation" class="disabled">
-                            <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
-                            <span class="round-tab">
-                                <i class="fas fa-rocket"></i>
-                            </span>
-                            </a>
-                        </li>
-
-                    </ul>
-                </div>
-
-                <form role="form">
-                    <div class="tab-content block_content">
-                        <div class="tab-pane active" role="tabpanel" id="step1">
-                            <h2>Your module : </h2>
-                            <h4>{{module.name}}</h4>
-                            <p>{{module.description}}</p>
-
-                            <hr/>
-
-                            <div class="form-group">
-                                <b-form-group
-                                    label="Name"
-                                    description="The name of your stack">
-                                    <b-input v-model="stack.name" :state="typeof stack.name !== 'undefined' && stack.name !== ''" autofocus></b-input>
-                                    <b-form-invalid-feedback>This field is mandatory</b-form-invalid-feedback>
-                                </b-form-group>
-                                <b-form-group
-                                    label="Description"
-                                    description="The description of your stack">
-                                    <b-input v-model="stack.description"></b-input>
-                                </b-form-group>
-                            </div>
-
-                            <ul class="list-inline float-right">
-                                <li><b-button variant="primary" class="next-step" :disabled="typeof stack.name === 'undefined' || stack.name.trim() === ''"><i class="fas fa-arrow-circle-right"></i> Next</b-button></li>
-                            </ul>
-                        </div>
-                        <div class="tab-pane" role="tabpanel" id="step2">
-                            <h2>Input variables</h2>
-                            <hr/>
-                            <stack-vars v-bind:module="module" v-bind:stack="stack" @validated="validated => this.stacksVariablesValidated = validated"></stack-vars>
-                            <ul class="d-flex flex-row-reverse">
-                                <li><b-button variant="primary" class="next-step ml-1" :disabled="!this.stacksVariablesValidated"><i class="fas fa-arrow-circle-right"></i> Next</b-button></li>
-                                <li><b-button variant="light" class="prev-step"><i class="fas fa-arrow-circle-left"></i> Previous</b-button></li>
-                            </ul>
-                        </div>
-                        <div class="tab-pane" role="tabpanel" id="step3">
-                            <h2>Run</h2>
-                            <hr/>
-                            <p>Save your stack and run it !</p>
-                            <ul class="d-flex flex-row-reverse flex-grow-0">
-                                <li><b-button variant="primary" class="ml-1" @click="run"><i class="fas fa-rocket"></i> Save & Run</b-button></li>
-                                <li><b-button variant="primary" class="ml-1" @click="save"><i class="far fa-save"></i> Save & Continue</b-button></li>
-                                <li><b-button variant="light" class="prev-step"><i class="fas fa-arrow-circle-left"></i> Previous</b-button></li>
-                            </ul>
-                        </div>
-                        <div class="clearfix"></div>
-                    </div>
-                </form>
-            </div>
-
-        </div>
-
-    </div>
-</template>
-
-<template id="template-navigation">
-    <breadcrumb :page="page"></breadcrumb>
-</template>
-
-<script th:inline="javascript" type="application/ecmascript">
-function initWizard(){
-    //Initialize tooltips
-    $('.nav-tabs > li a[title]').tooltip();
-
-    //Wizard
-    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
-
-        var $target = $(e.target);
-
-        if ($target.parent().hasClass('disabled')) {
-            return false;
-        }
-    });
-
-    $(".next-step").click(function (e) {
-
-        var $active = $('.wizard .nav-tabs li a.active').parent();
-        $active.next().removeClass('disabled');
-        nextTab($active);
-
-    });
-    $(".prev-step").click(function (e) {
-
-        var $active = $('.wizard .nav-tabs li a.active').parent();
-        prevTab($active);
-
-    });
-}
-
-function nextTab(elem) {
-    $(elem).next().find('a[data-toggle="tab"]').click();
-}
-function prevTab(elem) {
-    $(elem).prev().find('a[data-toggle="tab"]').click();
-}
-
-const moduleId = [[${moduleId}]];
-
-const store = {
-    state : {
-        stack : {
-            moduleId,
-            variableValues: {}
-        },
-        stacksVariablesValidated: false
-    }
-};
-
-function loadModule(){
-    console.log("loadModule");
-    return $.get(`/api/modules/${moduleId}`).then(data => {
-        store.state.module = data;
-    });
-}
-
-loadModule()
-    .then(function () {
-        new Vue({
-            el: "#app",
-            data: _ => store.state,
-            template: "#template",
-            methods: {
-                save,
-                run
-            }
-        });
-        initWizard();
-    });
-
-function save(){
-    $.ajax({
-        url: `/api/stacks`,
-        data: JSON.stringify(this.stack),
-        contentType: "application/json",
-        method: "POST"
-    }).then(saved => {
-        this.stack = saved;
-        window.location = `/stacks/${this.stack.id}`;
-    });
-}
-
-function run(){
-    // save the stack & run job
-    $.ajax({
-        url: `/api/stacks`,
-        data: JSON.stringify(this.stack),
-        contentType: "application/json",
-        method: "POST"
-    }).then(saved => {
-        this.stack = saved;
-        window.location = `/stacks/${this.stack.id}/RUN`;
-    })
-}
-</script>
-
-<script type="application/ecmascript">
-    new Vue({
-        el: "#navigation",
-        data: () => ({ page: 'new_stack' }),
-        template: "#template-navigation",
-    });
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/vue_templates/components/stack-vars.vue b/src/main/resources/templates/vue_templates/components/stack-vars.vue
deleted file mode 100644
index a6d9b727d..000000000
--- a/src/main/resources/templates/vue_templates/components/stack-vars.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template id="stack-vars">
-    <div>
-        <div class="form-row align-items-end" v-for="(modVar,modVarIdx) in editableVars" v-if="editableVars.length > 0">
-            <b-col>
-                <b-form-group :label="modVar.name" :description="modVar.description">
-                    <b-input v-if="! isListRegex(modVar.validationRegex)"
-                             v-model="stack.variableValues[modVar.name]"
-                             :state="validateVariable(modVar).result"
-                             @update="recomputeState"
-                             trim></b-input>
-                    <b-select v-if="isListRegex(modVar.validationRegex)"
-                              v-model="stack.variableValues[modVar.name]"
-                              :state="validateVariable(modVar).result"
-                              @change="recomputeState"
-                              :options="listOptions(modVar.validationRegex)"></b-select>
-                    <b-form-invalid-feedback>{{validateVariable(modVar).message}}</b-form-invalid-feedback>
-                </b-form-group>
-            </b-col>
-        </div>
-        <div v-if="editableVars.length === 0">
-            <p>No editable variable defined for this module.</p>
-        </div>
-    </div>
-</template>
-
-<script>
-Vue.component('stack-vars', {
-    template: "#stack-vars",
-    props: ["stack", "module"],
-    methods: {
-        recomputeState: function(){
-            if(this.stack.state === "RUNNING"){
-                this.stack.state = "TO_UPDATE";
-            }
-            this.$emit("validated", this.variablesValid);
-        },
-        validateVariable: function(moduleVariable){
-            // no validation needed if variable is not mandatory and if no validation regex
-            if(! moduleVariable.mandatory && ! moduleVariable.validationRegex){
-                return {result:null};
-            }
-
-            const value = this.stack.variableValues[moduleVariable.name];
-
-            // checking mandatory first
-            if(moduleVariable.mandatory){
-                if(value === null || typeof value === "undefined" || value.trim().length === 0){
-                    return {result:false, message:"This field is mandatory"};
-                }
-            }
-            else{
-                // not checking empty values
-                if(value === null || typeof value === "undefined" || value.trim().length === 0){
-                    return {result:null};
-                }
-            }
-
-            // check regex if defined
-            if(moduleVariable.validationRegex){
-                if( ! new RegExp(moduleVariable.validationRegex).test(value) ) {
-                    return {result:false, message:`This field must match the regex ${moduleVariable.validationRegex}`};
-                }
-            }
-
-            return {result:true};
-        },
-        isListRegex: function(regex){
-            const listRegex = /^\(([^|]*)(\|([^|]*))*\)$/;
-            return listRegex.test(regex);
-        },
-        listOptions: function(regex){
-            const listExtractRegex = /[^()|]+/g;
-            // extracting the values from the regex
-            // also adding empty string to the result to be able to not select anything !
-            return ["", ...regex.match(listExtractRegex)];
-        }
-    },
-    computed: {
-        editableVars: function() {
-            return this.module.variables.filter(variable => variable.editable);
-        },
-        variablesValid: function(){
-            return this.editableVars
-                .map(this.validateVariable)
-                .map(validationResult => validationResult.result)
-                .every(result => result === null || result === true);
-        }
-    }
-});
-</script>
\ No newline at end of file