diff --git a/web/src/store.js b/web/src/store.js
index 154604b..b5ed0ed 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -432,6 +432,12 @@ const store = createStore({
                 commit('setMessageTemplateVariables', data);
             }
         },
+        async createMessageTemplate({commit, state}, template_name) {
+            const {data, success} = await http.post('/2/message_templates/', {name: template_name}, state.user.token);
+            if (data && success) {
+                commit('setMessageTemplates', data);
+            }
+        }
     },
     plugins: [
         persistentStatePlugin({ // TODO change remember to some kind of enable field
diff --git a/web/src/views/admin/Settings.vue b/web/src/views/admin/Settings.vue
index 0070d3a..75e4741 100644
--- a/web/src/views/admin/Settings.vue
+++ b/web/src/views/admin/Settings.vue
@@ -15,10 +15,17 @@
                 </button>
             </div>
         </div>
+        <div class="card bg-dark">
+            <div class="card-body">
+                <input type="text" class="form-control" v-model="newTemplateName" placeholder="New Template Name">
+                <button class="btn btn-success" @click="createMessageTemplateAndReset()" ref="createButton">Create</button>
+            </div>
+        </div>
     </ul>
     <h3 class="text-center">Message Template Variables</h3>
     <p>
-        <span v-for="(variable, key) in messageTemplateVariables" :key="key" class="badge badge-primary" style="margin: 5px;">
+        <span v-for="(variable, key) in messageTemplateVariables" :key="key" class="badge badge-primary"
+              style="margin: 5px;">
             {{ variable }}
         </span>
     </p>
@@ -35,11 +42,12 @@ export default {
     data() {
         return {
             messageTemplatesIntermediate: [],
+            newTemplateName: '',
         };
     },
     computed: mapState(['messageTemplates', 'messageTemplateVariables']),
     methods: {
-        ...mapActions(['fetchMessageTemplates', 'fetchMessageTemplateVariables', 'updateMessageTemplate']),
+        ...mapActions(['fetchMessageTemplates', 'fetchMessageTemplateVariables', 'updateMessageTemplate', 'createMessageTemplate']),
         formatText(value) {
             return value.replace(/{{(.+?)}}/g, (match, key) => {
                 return `<span class="text-primary">{{${key}}}</span>`;
@@ -60,6 +68,12 @@ export default {
             this.messageTemplatesIntermediate.find(template => template.id === id).message =
                 this.messageTemplates.find(template => template.id === id).message;
         },
+        async createMessageTemplateAndReset() {
+            this.$refs.createButton.disabled = true;
+            await this.createMessageTemplate(this.newTemplateName);
+            this.newTemplateName = '';
+            this.$refs.createButton.disabled = false;
+        },
     },
     mounted() {
         this.fetchMessageTemplates().then(() => {