diff --git a/pom.xml b/pom.xml
index abf224343..92f25c862 100644
--- a/pom.xml
+++ b/pom.xml
@@ -101,6 +101,11 @@
 			<artifactId>ace-builds</artifactId>
 			<version>1.4.4</version>
 		</dependency>
+		<dependency>
+			<groupId>org.webjars.npm</groupId>
+			<artifactId>bootstrap-vue</artifactId>
+			<version>2.0.0-rc.26</version>
+		</dependency>
 
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
diff --git a/src/main/resources/templates/layout/header.html b/src/main/resources/templates/layout/header.html
index 4b0819962..eeb651b13 100644
--- a/src/main/resources/templates/layout/header.html
+++ b/src/main/resources/templates/layout/header.html
@@ -20,6 +20,8 @@
 
     <link rel="stylesheet" href="/webjars/font-awesome/5.8.2/css/all.css" />
 
+    <link rel="stylesheet" href="/webjars/bootstrap-vue/2.0.0-rc.26/dist/bootstrap-vue.css" />
+
     <!-- custom css -->
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/color_2.css" />
diff --git a/src/main/resources/templates/stack.html b/src/main/resources/templates/stack.html
index bfe3238e7..05397716c 100644
--- a/src/main/resources/templates/stack.html
+++ b/src/main/resources/templates/stack.html
@@ -35,6 +35,7 @@
 <script src="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
 <script src="/webjars/vue/2.5.16/vue.js"></script>
+<script src="/webjars/bootstrap-vue/2.0.0-rc.26/dist/bootstrap-vue.js"></script>
 
 <div th:replace="vue_templates/stack-vars"></div>
 
@@ -48,7 +49,7 @@
 
                 <a :href="'/stacks/' + stack.id + '/preview'" v-if="stack.state !== 'RUNNING'" class="btn btn-info"><i class="fas fa-binoculars"></i> Preview</a>
 
-                <a :href="'/stacks/' + stack.id + '/stop'" v-if="stack.state === 'RUNNING' || stack.state === 'TO_UPDATE'" class="btn btn-danger"><i class="fas fa-stop-circle"></i> Stop</a>
+                <a href="#" @click="stopStack" v-if="stack.state === 'RUNNING' || stack.state === 'TO_UPDATE'" class="btn btn-danger"><i class="fas fa-stop-circle"></i> Stop</a>
             </div>
         </div>
     </div>
@@ -246,7 +247,24 @@ <h2><span><i class="fas fa-history"></i> Job history</span></h2>
                         success: () => message.update({type: "success", message: "Stack saved."}),
                         error: () => message.update({type: "error", message: "Error saving stack."})
                     });
-                }
+                },
+                stopStack: function () {
+                    // ask for confirmation
+                    this.$bvModal.msgBoxConfirm('This will completely stop the stack. Continue?', {
+                        title: 'Stop request',
+                        centered: true,
+                        noCloseOnBackdrop: true,
+                        cancelTitle: 'No',
+                        okVariant: 'danger',
+                        okTitle: 'Yes',
+                        returnFocus: 'body'
+                    }).then(value => {
+                        if (value) {
+                           // redirect
+                            window.location = `/stacks/${stack.id}/stop`;
+                        }
+                    })
+                },
             }
         });
     }