diff --git a/web/src/views/admin/Settings.vue b/web/src/views/admin/Settings.vue
index a663529..c8cb2d8 100644
--- a/web/src/views/admin/Settings.vue
+++ b/web/src/views/admin/Settings.vue
@@ -1,37 +1,38 @@
 <template>
-    <h3 class="text-center">Message Templates</h3>
-    <ul>
-        <div v-for="template in messageTemplatesIntermediate" :key="template.id" class="card bg-dark">
-            <div class="card-header">{{ template.name }}</div>
-            <div class="card-body">
-                <FormatedText :value="template.message" :format="formatText"
-                              @input="changeMessageTemplate(template.id, $event)"/>
-                <br>
-                <button class="btn btn-primary" @click="resetMessageTemplate(template.id)"
-                        :disabled="messageTemplates.find(t => t.id === template.id).message === template.message">Reset
-                </button>
-                <button class="btn btn-success" @click="saveMessageTemplate(template.id)"
-                        :disabled="messageTemplates.find(t => t.id === template.id).message === template.message">Save
-                </button>
-            </div>
-        </div>
-        <div class="card bg-dark">
-            <div class="card-body">
-                <div class="input-group">
-                    <input type="text" class="form-control" v-model="newTemplateName" placeholder="New Template Name">
-                    <button class="btn btn-success input-group-btn" @click="createMessageTemplateAndReset()" ref="createButton">Create
-                    </button>
-                </div>
-            </div>
-        </div>
-    </ul>
-    <h3 class="text-center">Message Template Variables</h3>
+    <h3 class="text-center">Available Message Template Variables</h3>
     <p>
         <span v-for="(variable, key) in messageTemplateVariables" :key="key" class="badge badge-primary"
               style="margin: 5px;">
             {{ variable }}
         </span>
     </p>
+    <h3 class="text-center">Message Templates</h3>
+    <div v-for="template in messageTemplatesIntermediate" :key="template.id" class="card bg-dark"
+         style="margin-bottom: 10px;">
+        <div class="card-header">{{ template.name }}</div>
+        <div class="card-body">
+            <FormatedText :value="template.message" :format="formatText"
+                          @input="changeMessageTemplate(template.id, $event)"/>
+        </div>
+        <div class="card-footer">
+            <button class="btn btn-primary" @click="resetMessageTemplate(template.id)"
+                    :disabled="messageTemplates.find(t => t.id === template.id).message === template.message">Reset
+            </button>
+            <button class="btn btn-success" @click="saveMessageTemplate(template.id)"
+                    :disabled="messageTemplates.find(t => t.id === template.id).message === template.message">Save
+            </button>
+        </div>
+    </div>
+    <div class="card bg-dark">
+        <div class="card-body">
+            <div class="input-group">
+                <input type="text" class="form-control" v-model="newTemplateName" placeholder="New Template Name">
+                <button class="btn btn-success input-group-btn" @click="createMessageTemplateAndReset()"
+                        ref="createButton">Create
+                </button>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>