diff --git a/_assets/_old/templates/actions.tmpl b/_assets/_old/templates/actions.tmpl
index d307c171..0d50c9e1 100644
--- a/_assets/_old/templates/actions.tmpl
+++ b/_assets/_old/templates/actions.tmpl
@@ -1,14 +1,3 @@
-{{ define "info-button" }}
-
-{{ end }}
-
-{{ define "delete-button" }}
-<button aria-label="Delete"  title="Delete" class="action" id="delete">
-    <i class="material-icons">delete</i>
-    <span>Delete</span>
-</button>
-{{ end }}
-
 {{ define "right-side-actions" }}
     {{ template "info-button" }}
 {{ end }}
@@ -33,12 +22,6 @@
     </button>
     {{- end }}
 
-    {{- if and .User.AllowEdit (.IsEditor) }}
-    <button aria-label="Delete"  title="Delete" class="action" id="delete">
-        <i class="material-icons">delete</i>
-        <span>Delete</span>
-    </button>
-    {{- end }}
 
     <button {{ if .IsDir }}data-dropdown{{ end }} aria-label="Download" title="Download" class="action" id="download">
         {{- if .IsEditor}}<a href="?download=true">{{ end }}
diff --git a/_assets/src/App.vue b/_assets/src/App.vue
index fb07443f..08191c7f 100644
--- a/_assets/src/App.vue
+++ b/_assets/src/App.vue
@@ -6,6 +6,7 @@
         <search></search>
       </div>
       <div>
+        <delete-button></delete-button>
         <info-button></info-button>
       </div>
       <!-- <div id="click-overlay"></div> -->
@@ -26,7 +27,6 @@
 
     <preview v-if="req.kind == 'preview'"></preview> 
 
-    
     <!-- TODO: show on listing and allowedit -->
     <div class="floating">
         <div tabindex="0" role="button" class="action" id="new">
@@ -41,7 +41,7 @@
             <i class="material-icons" title="Clear">clear</i>
         </div>
     </div>
-
+    
     <info-prompt v-show="showInfo" :class="{ active: showInfo }"></info-prompt>
     <help v-show="showHelp" :class="{ active: showHelp }"></help>
 
@@ -58,6 +58,7 @@ import Help from './components/Help'
 import Listing from './components/Listing'
 import InfoButton from './components/InfoButton'
 import InfoPrompt from './components/InfoPrompt'
+import DeleteButton from './components/DeleteButton'
 import css from './css.js'
 
 function updateColumnSizes () {
@@ -122,7 +123,7 @@ window.addEventListener('keydown', (event) => {
 
 export default {
   name: 'app',
-  components: { Search, Preview, Listing, InfoButton, InfoPrompt, Help },
+  components: { Search, Preview, Listing, InfoButton, InfoPrompt, Help, DeleteButton },
   mounted: function () {
     updateColumnSizes()
     window.addEventListener('resize', updateColumnSizes)
diff --git a/_assets/src/components/DeleteButton.vue b/_assets/src/components/DeleteButton.vue
new file mode 100644
index 00000000..0e553bc7
--- /dev/null
+++ b/_assets/src/components/DeleteButton.vue
@@ -0,0 +1,17 @@
+<template>
+    <button @click="show" aria-label="Delete"  title="Delete" class="action" id="delete">
+        <i class="material-icons">delete</i>
+        <span>Delete</span>
+    </button>
+</template>
+
+<script>
+export default {
+  name: 'delete-button',
+  methods: {
+    show: function (event) {
+      window.info.showDelete = true
+    }
+  }
+}
+</script>