diff --git a/web/src/main.js b/web/src/main.js
index 3864d4d..1e0ea76 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,7 +1,6 @@
 import {createApp} from 'vue'
 import App from './App.vue';
 import VueQrcode from '@chenfengyuan/vue-qrcode';
-import {sync} from 'vuex-router-sync';
 import store from './store';
 import router from './router';
 
diff --git a/web/src/shared-state-plugin/index.js b/web/src/shared-state-plugin/index.js
index 57ae3b8..2baffd6 100644
--- a/web/src/shared-state-plugin/index.js
+++ b/web/src/shared-state-plugin/index.js
@@ -89,63 +89,6 @@ export default (config) => {
 
     /** may only be called from worker */
 
-    const clone = (obj) => {
-        if (isProxy(obj)) {
-            obj = toRaw(obj);
-        }
-        if (obj === null || typeof obj !== 'object') {
-            return obj;
-        }
-        if (obj.__proto__ === ({}).__proto__) {
-            return Object.assign({}, obj);
-        }
-        if (obj.__proto__ === [].__proto__) {
-            return obj.slice();
-        }
-        return obj;
-    }
-
-    const deepEqual = (a, b) => {
-        if (a === b) {
-            return true;
-        }
-        if (a === null || b === null) {
-            return false;
-        }
-        if (a.__proto__ === ({}).__proto__ && b.__proto__ === ({}).__proto__) {
-
-            if (Object.keys(a).length !== Object.keys(b).length) {
-                return false;
-            }
-            for (let key in b) {
-                if (!(key in a)) {
-                    return false;
-                }
-            }
-            for (let key in a) {
-                if (!(key in b)) {
-                    return false;
-                }
-                if (!deepEqual(a[key], b[key])) {
-                    return false;
-                }
-            }
-            return true;
-        }
-        if (a.__proto__ === [].__proto__ && b.__proto__ === [].__proto__) {
-            if (a.length !== b.length) {
-                return false;
-            }
-            for (let i = 0; i < a.length; i++) {
-                if (!deepEqual(a[i], b[i])) {
-                    return false;
-                }
-            }
-            return true;
-        }
-        return false;
-    }
-
     const worker_fun = function (self, ctx) {
         /* globals WebSocket, SharedWorker, onconnect, onmessage, postMessage, close, location */
 
diff --git a/web/src/store.js b/web/src/store.js
index d864d2f..b609efc 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -462,6 +462,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);
+            }
+        },
         async fetchShippingVouchers({commit, state}) {
             if (!state.user.token) return;
             if (state.fetchedData.shippingVouchers > Date.now() - 1000 * 60 * 60 * 24) return;
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(() => {