diff --git a/web/app/src/App.vue b/web/app/src/App.vue
index 68380031..168c83e5 100644
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@@ -234,6 +234,7 @@ section.action-bar {
   height: var(--action-bar-height);
   display: flex;
   flex-direction: row;
+  align-items: center;
 }
 
 section.action-bar button.action {
@@ -244,6 +245,7 @@ section.action-bar button.action {
   background: #6E6D70;
   color: #DFDEDF;
   touch-action: manipulation;
+  margin-right: 0.3rem;
 
   transition-duration: 150ms;
   transition-property: color, background-color, border-color, box-shadow
@@ -261,7 +263,9 @@ section.action-bar button.action:focus {
 }
 
 section.action-bar button.action.dangerous {
-  background-color: darkred;
+  background-color: #7c4d41;
+  color: #e4c5c0;
+  margin-left: 1rem;
 }
 
 section.action-bar button.action.dangerous[disabled] {
diff --git a/web/app/src/components/JobActionsBar.vue b/web/app/src/components/JobActionsBar.vue
index a7b12e82..e0ec52b7 100644
--- a/web/app/src/components/JobActionsBar.vue
+++ b/web/app/src/components/JobActionsBar.vue
@@ -1,8 +1,8 @@
 <template>
   <section class="action-bar jobs">
-    <button class="action delete dangerous" :disabled="!jobs.canDelete" v-on:click="onButtonDelete">Delete</button>
     <button class="action cancel" :disabled="!jobs.canCancel" v-on:click="onButtonCancel">Cancel</button>
     <button class="action requeue" :disabled="!jobs.canRequeue" v-on:click="onButtonRequeue">Requeue</button>
+    <button class="action delete dangerous" :disabled="!jobs.canDelete" v-on:click="onButtonDelete">Delete</button>
   </section>
 </template>