diff --git a/js/index.js b/js/index.js
index fa8d072a..359844cc 100644
--- a/js/index.js
+++ b/js/index.js
@@ -10,9 +10,12 @@ import poc from './components/forms/poc'
 import financial from './components/forms/financial'
 import toggler from './components/toggler'
 import NewProject from './components/forms/new_project'
+import Modal from './mixins/modal'
 
 Vue.use(VTooltip)
 
+Vue.mixin(Modal)
+
 const app = new Vue({
   el: '#app-root',
   components: {
@@ -25,28 +28,11 @@ const app = new Vue({
     financial,
     NewProject
   },
-  methods: {
-    closeModal: function(name) {
-      this.modals[name] = false
-    },
-    openModal: function (name) {
-      this.modals[name] = true
-    }
-  },
-  data: function() {
-    return {
-      modals: {
-        styleguideModal: false,
-        pendingFinancialVerification: false,
-        pendingCCPOApproval: false,
-      }
-    }
-  },
   mounted: function() {
-    const modalOpen = document.querySelector("#modalOpen");
+    const modalOpen = document.querySelector("#modalOpen")
     if (modalOpen) {
-      const modal = modalOpen.getAttribute("data-modal");
-      this.modals[modal] = true;
+      const modal = modalOpen.getAttribute("data-modal")
+      this.openModal(modal)
     }
   },
   delimiters: ['!{', '}']
diff --git a/js/mixins/modal.js b/js/mixins/modal.js
new file mode 100644
index 00000000..7da9caaa
--- /dev/null
+++ b/js/mixins/modal.js
@@ -0,0 +1,20 @@
+export default {
+  methods: {
+    closeModal: function(name) {
+      this.modals[name] = false
+    },
+    openModal: function (name) {
+      this.modals[name] = true
+    }
+  },
+  data: function() {
+    return {
+      modals: {
+        styleguideModal: false,
+        newProjectConfirmation: false,
+        pendingFinancialVerification: false,
+        pendingCCPOApproval: false,
+      }
+    }
+  }
+}