diff --git a/web/src/components/inputs/FormatedText.vue b/web/src/components/inputs/FormatedText.vue
index 05e8178..6c137d0 100644
--- a/web/src/components/inputs/FormatedText.vue
+++ b/web/src/components/inputs/FormatedText.vue
@@ -1,6 +1,5 @@
 <template>
     <div contenteditable>
-        <pre>{{ value }}</pre>
         <span v-html="rawhtml(value)"></span>
     </div>
 </template>
diff --git a/web/src/views/admin/Settings.vue b/web/src/views/admin/Settings.vue
index 3511945..9bb7e9a 100644
--- a/web/src/views/admin/Settings.vue
+++ b/web/src/views/admin/Settings.vue
@@ -2,9 +2,8 @@
     <h3 class="text-center">Message Templates</h3>
     <ul>
         <li v-for="template in messageTemplates" :key="template.id">
-            {{ template.name }}<br>
             <pre>{{ template.message }}</pre>
-            <FormatedText :value="template.message"/>
+            <FormatedText :value="template.message" :format="formatText"/>
         </li>
     </ul>
     <h3 class="text-center">Message Template Variables</h3>
@@ -24,7 +23,14 @@ export default {
     name: 'Settings',
     components: {FormatedText, Table},
     computed: mapState(['messageTemplates', 'messageTemplateVariables']),
-    methods: mapActions(['fetchMessageTemplates', 'fetchMessageTemplateVariables']),
+    methods: {
+        ...mapActions(['fetchMessageTemplates', 'fetchMessageTemplateVariables']),
+        formatText(value) {
+            return value.replace(/{{(.*?)}}/g, (match, key) => {
+                return `<span class="text-primary">{{ ${key} }}</span>`;
+            }).replace(/\n/g, '<br>').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
+        }
+    },
     mounted() {
         this.fetchMessageTemplates();
         this.fetchMessageTemplateVariables();