diff --git a/app/db.sqlite3 b/app/db.sqlite3
index 88234b5f..5c274dc9 100644
Binary files a/app/db.sqlite3 and b/app/db.sqlite3 differ
diff --git a/app/server/static/bundle/projects.js b/app/server/static/bundle/projects.js
index 0a541696..f2a3cf3b 100644
--- a/app/server/static/bundle/projects.js
+++ b/app/server/static/bundle/projects.js
@@ -460,7 +460,7 @@ eval("var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn th
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\nconst vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n  el: '#projects_root',\n  delimiters: ['[[', ']]'],\n  data: {\n    items: [],\n    selectedType: 'All',\n    isActive: false,\n  },\n\n  methods: {\n    getProjects() {\n      const baseUrl = window.location.href.split('/').slice(0, 3).join('/');\n      axios__WEBPACK_IMPORTED_MODULE_1___default.a.get(`${baseUrl}/api/projects`).then((response) => {\n        this.items = response.data;\n      });\n    },\n\n    updateSelectedType(type) {\n      this.selectedType = type;\n    },\n  },\n\n  computed: {\n    uniqueProjectTypes() {\n      const types = [];\n      for (let i = 0; i < this.items.length; i++) {\n        const item = this.items[i];\n        types.push(item.project_type);\n      }\n      const uniqueTypes = Array.from(new Set(types));\n\n      return uniqueTypes;\n    },\n\n    filteredProjects() {\n      // filter projects\n      const projects = [];\n      for (let i = 0; i < this.items.length; i++) {\n        const item = this.items[i];\n        if ((this.selectedType === 'All') || (item.project_type === this.selectedType)) {\n          projects.push(item);\n        }\n      }\n      // create nested projects\n      const nestedProjects = [];\n      for (let i = 0; i < Math.ceil(projects.length / 3); i++) {\n        const p = projects.slice(i * 3, (i + 1) * 3);\n        nestedProjects.push(p);\n      }\n      return nestedProjects;\n    },\n  },\n\n  created() {\n    this.getProjects();\n  },\n});\n\n\n//# sourceURL=webpack:///./static/js/projects.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__);\n\n\naxios__WEBPACK_IMPORTED_MODULE_1___default.a.defaults.xsrfCookieName = 'csrftoken';\naxios__WEBPACK_IMPORTED_MODULE_1___default.a.defaults.xsrfHeaderName = 'X-CSRFToken';\nconst baseUrl = window.location.href.split('/').slice(0, 3).join('/');\n\n\nconst vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n  el: '#projects_root',\n  delimiters: ['[[', ']]'],\n  data: {\n    items: [],\n    selectedType: 'All',\n    isActive: false,\n  },\n\n  methods: {\n    getProjects() {\n      axios__WEBPACK_IMPORTED_MODULE_1___default.a.get(`${baseUrl}/api/projects`).then((response) => {\n        this.items = response.data;\n      });\n    },\n\n    deleteProject(project) {\n      axios__WEBPACK_IMPORTED_MODULE_1___default.a.delete(`${baseUrl}/api/projects/${project.id}/`).then((response) => {\n      });\n    },\n\n    updateSelectedType(type) {\n      this.selectedType = type;\n    },\n  },\n\n  computed: {\n    uniqueProjectTypes() {\n      const types = [];\n      for (let i = 0; i < this.items.length; i++) {\n        const item = this.items[i];\n        types.push(item.project_type);\n      }\n      const uniqueTypes = Array.from(new Set(types));\n\n      return uniqueTypes;\n    },\n\n    filteredProjects() {\n      // filter projects\n      const projects = [];\n      for (let i = 0; i < this.items.length; i++) {\n        const item = this.items[i];\n        if ((this.selectedType === 'All') || (item.project_type === this.selectedType)) {\n          projects.push(item);\n        }\n      }\n      // create nested projects\n      const nestedProjects = [];\n      for (let i = 0; i < Math.ceil(projects.length / 3); i++) {\n        const p = projects.slice(i * 3, (i + 1) * 3);\n        nestedProjects.push(p);\n      }\n      return nestedProjects;\n    },\n  },\n\n  created() {\n    this.getProjects();\n  },\n});\n\n\n//# sourceURL=webpack:///./static/js/projects.js?");
 
 /***/ })
 
diff --git a/app/server/static/js/projects.js b/app/server/static/js/projects.js
index a38a2ac1..d5cce819 100644
--- a/app/server/static/js/projects.js
+++ b/app/server/static/js/projects.js
@@ -1,5 +1,9 @@
 import Vue from 'vue';
 import axios from 'axios';
+axios.defaults.xsrfCookieName = 'csrftoken';
+axios.defaults.xsrfHeaderName = 'X-CSRFToken';
+const baseUrl = window.location.href.split('/').slice(0, 3).join('/');
+
 
 const vm = new Vue({
   el: '#projects_root',
@@ -12,12 +16,16 @@ const vm = new Vue({
 
   methods: {
     getProjects() {
-      const baseUrl = window.location.href.split('/').slice(0, 3).join('/');
       axios.get(`${baseUrl}/api/projects`).then((response) => {
         this.items = response.data;
       });
     },
 
+    deleteProject(project) {
+      axios.delete(`${baseUrl}/api/projects/${project.id}/`).then((response) => {
+      });
+    },
+
     updateSelectedType(type) {
       this.selectedType = type;
     },
diff --git a/app/server/templates/projects.html b/app/server/templates/projects.html
index 15ee188c..88e60780 100644
--- a/app/server/templates/projects.html
+++ b/app/server/templates/projects.html
@@ -95,7 +95,7 @@
               {% if user.is_superuser %}
               <div class="card-footer">
                 <a v-bind:href="'/projects/' + project.id + '/docs'" class="card-footer-item">Edit</a>
-                <a href="" class="card-footer-item has-text-danger" style="font-weight:700">Delete</a>
+                <a href="" class="card-footer-item has-text-danger" style="font-weight:700" @click="deleteProject(project)">Delete</a>
               </div>
               {% endif %}
             </div>