diff --git a/package.json b/package.json
index 50b33f8..df85fb3 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "fs-extra": "^7.0.1",
     "localforage": "^1.7.3",
     "mousetrap": "^1.6.3",
+    "sass": "^1.58.3",
     "vite": "^2.5.4",
     "vite-plugin-vue2": "1.9.0",
     "vue": "^3.2.47",
@@ -23,7 +24,7 @@
     "vue-template-compiler": "^2.6.11",
     "vue3-draggable-resizable": "^1.6.5",
     "vued3tree": "^3.6.4",
-    "vuedraggable": "^2.19.3",
+    "vuedraggable": "^4.1.0",
     "vuetify": "^3.1.6"
   },
   "devDependencies": {
diff --git a/src/components/ChildrenMultiselect.vue b/src/components/ChildrenMultiselect.vue
index 61cb895..0ed5d84 100644
--- a/src/components/ChildrenMultiselect.vue
+++ b/src/components/ChildrenMultiselect.vue
@@ -20,11 +20,11 @@ import VueMultiselect from 'vue-multiselect';
 export default {
   name: 'ChildrenMultiselect',
   components: {
-    VueMultiselect,
+    VueMultiselect
   },
   data() {
     return {
-      multiValue: null,
+      multiValue: null
     };
   },
   computed: {
@@ -33,30 +33,30 @@ export default {
       'routes',
       'activeComponent',
       'componentChildrenMultiselectValue',
-      'modalOpen',
+      'modalOpen'
     ]),
     options() {
       const routes = Object.keys(this.routes);
       console.log('routes', routes);
       const exceptions = new Set(['App', this.activeComponent, ...routes]);
       console.log('exceptions', exceptions);
-      return Object.keys(this.componentMap).filter((component) => {
+      return Object.keys(this.componentMap).filter(component => {
         if (!exceptions.has(component)) return component;
       });
       // return ['test'];
-    },
+    }
   },
   methods: {
     ...mapActions([
       'updateComponentChildrenMultiselectValue',
-      'updateActiveComponentChildrenValue',
+      'updateActiveComponentChildrenValue'
     ]),
     handleSelect(value) {
       console.log('VALUE', value);
       if (this.modalOpen) this.updateActiveComponentChildrenValue(value);
       this.updateComponentChildrenMultiselectValue(value);
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/src/components/ComponentCodeDisplay.vue b/src/components/ComponentCodeDisplay.vue
index e735041..c37303f 100644
--- a/src/components/ComponentCodeDisplay.vue
+++ b/src/components/ComponentCodeDisplay.vue
@@ -16,20 +16,20 @@ export default {
     activeComponentHtmlList: {
       get() {
         return toRaw(this.componentMap[this.activeComponent].htmlList);
-      },
-    },
+      }
+    }
   },
   watch: {
     activeComponentHtmlList(oldList, newList) {
       this.displayHtmlList(newList);
-    },
+    }
   },
   mounted() {
     this.displayHtmlList(this.activeComponentHtmlList);
   },
   methods: {
     traverseElement(list, codeDisplay, level = 0) {
-      list.forEach((htmlElementTagObj) => {
+      list.forEach(htmlElementTagObj => {
         let htmlElementMapKey = htmlElementTagObj.text;
         let htmlelementNode = document.createElement('p');
         let openingTagNode = document.createElement('p');
@@ -65,8 +65,8 @@ export default {
       codeDisplay.innerText = '';
 
       this.traverseElement(list, codeDisplay);
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/src/components/ComponentDisplay.vue b/src/components/ComponentDisplay.vue
index fd17660..db577e5 100644
--- a/src/components/ComponentDisplay.vue
+++ b/src/components/ComponentDisplay.vue
@@ -39,11 +39,11 @@ import Vue3DraggableResizable from 'vue3-draggable-resizable';
 export default {
   name: 'ComponentDisplay',
   components: {
-    Vue3DraggableResizable,
+    Vue3DraggableResizable
   },
   data() {
     return {
-      abilityToDelete: false,
+      abilityToDelete: false
     };
   },
   mounted() {
@@ -70,14 +70,14 @@ export default {
         'this.activeRouteArray (within activeComponentData)',
         this.activeRouteArray
       );
-      return this.activeRouteArray.filter((componentData) => {
+      return this.activeRouteArray.filter(componentData => {
         return componentData.componentName === this.activeComponent;
       })[0];
-    },
+    }
   },
   methods: {
     ...mapActions(['setActiveComponent', 'updateOpenModal']),
-    onResize: function (x, y) {
+    onResize: function(x, y) {
       console.log('on resiZe x', x);
       console.log('on resiZe y', y);
       // const { x, y, w, h} = payload;
@@ -118,8 +118,8 @@ export default {
       //     this.setActiveComponent('');
       //   }
       // });
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/src/components/EditQueue.vue b/src/components/EditQueue.vue
index 68a6fd2..689dac3 100644
--- a/src/components/EditQueue.vue
+++ b/src/components/EditQueue.vue
@@ -22,7 +22,6 @@ import {
   setComponentHtmlList,
   addToComponentElementList
 } from '../store/types';
-import { setInterval } from 'timers';
 
 export default {
   name: 'EditQueue',
diff --git a/src/components/HomeQueue.vue b/src/components/HomeQueue.vue
index dce4313..1067e50 100644
--- a/src/components/HomeQueue.vue
+++ b/src/components/HomeQueue.vue
@@ -1,62 +1,59 @@
 <template>
-  <section class="home-queue">
-    <p class="panel-heading">Selected Elements</p>
-    <!-- <draggable
+  <v-card class="home-queue">
+    <v-card-title>Selected Elements</v-card-title>
+    <draggable
       v-model="renderList"
-      group="people"
-      class="list-group"
-      ghost-class="ghost"
+      item-key="index"
+      class="d-flex flex-column"
+      v-bind="dragOptions"
       @start="drag = true"
       @end="drag = false"
     >
-      <div class="list-group-item" v-for="(element, index) in renderList" :key="index + Date.now()">
-        {{ element.text }}
-        <i class="fas fa fa-trash fa-md" @click="deleteElement(index)"></i>
-      </div>
-    </draggable> -->
-  </section>
+      <template #item="{element}">
+        <v-chip closable color="cyan" class="ma-2">
+          {{ element.text }}
+        </v-chip>
+      </template>
+    </draggable>
+  </v-card>
 </template>
 
 <script>
 import draggable from 'vuedraggable';
-import { mapState } from 'vuex';
 import { setSelectedElementList, deleteSelectedElement } from '../store/types';
 
 export default {
   name: 'HomeQueue',
-  props: {
-    name: {
-      type: String,
-    },
-    listToRender: {
-      type: Array,
-    },
+  components: {
+    draggable
   },
-
   computed: {
-    ...mapState(['selectedElementList']),
     renderList: {
       get() {
-        return this.selectedElementList;
+        return this.$store.state.selectedElementList;
       },
       set(value) {
         this.$store.dispatch(setSelectedElementList, value);
-      },
+      }
     },
+    dragOptions() {
+      return {
+        animation: 200,
+        group: 'description',
+        disabled: false
+      };
+    }
   },
   methods: {
     deleteElement(index) {
       this.$store.dispatch(deleteSelectedElement, index);
-    },
-  },
-  components: {
-    draggable,
-  },
+    }
+  }
 };
 </script>
 
 <style scoped>
-.home-queue {
+/* .home-queue {
   border: 1px solid white;
   background-color: hsl(222, 15%, 26%);
   height: 100%;
@@ -77,5 +74,5 @@ li {
 .fa-trash:hover {
   cursor: pointer;
   color: red;
-}
+} */
 </style>
diff --git a/src/components/HomeSidebar.vue b/src/components/HomeSidebar.vue
index 5ea0d35..cefdab8 100644
--- a/src/components/HomeSidebar.vue
+++ b/src/components/HomeSidebar.vue
@@ -14,7 +14,7 @@
       </v-form>
     </v-card-actions>
     <v-card-actions class="center">
-      <Icons @getClickedIcon="addToSelectedElementList" />
+      <Icons />
     </v-card-actions>
     <v-card-actions>
       <ChildrenMultiselect />
@@ -38,14 +38,14 @@ export default {
   name: 'HomeSidebar',
   components: {
     ChildrenMultiselect,
-    Icons,
+    Icons
   },
   computed: {
     ...mapState([
       'componentMap',
       'selectedElementList',
       'routes',
-      'activeRoute',
+      'activeRoute'
     ]),
     componentNameInputValue: {
       get() {
@@ -58,14 +58,14 @@ export default {
       set(value) {
         // console.log('value', value);
         this.updateComponentNameInputValue(value);
-      },
-    },
+      }
+    }
   },
   methods: {
     ...mapActions([
       'registerComponent',
       'addToSelectedElementList',
-      'updateComponentNameInputValue',
+      'updateComponentNameInputValue'
     ]),
     // invoked when click "add component" button
     handleClick() {
@@ -78,14 +78,14 @@ export default {
         h: 200,
         htmlList: this.selectedElementList,
         children: [],
-        isActive: false,
+        isActive: false
       };
 
       // console.log('component', component);
       console.log('component (HomeSidebar handleClick)', component);
       this.registerComponent(component);
-    },
-  },
+    }
+  }
 };
 </script>
 <style>
diff --git a/src/components/Icons.vue b/src/components/Icons.vue
index 57df939..124d7f7 100644
--- a/src/components/Icons.vue
+++ b/src/components/Icons.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="icon-grid">
     <button
-      @click.prevent="changeState(elementName)"
+      @click="handleClick(elementName)"
       v-for="([elementName, iconString], idx) in Object.entries(icons)"
       :key="idx + Date.now()"
     >
@@ -14,17 +14,23 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import * as types from '../store/types.js';
 
 export default {
   name: 'Icons',
   computed: {
-    ...mapState(['icons']),
+    ...mapState(['icons'])
   },
   methods: {
-    changeState(elementName) {
-      this.$emit('getClickedIcon', elementName); // emit prop necessary?
-    },
-  },
+    handleClick(htmlElement) {
+      console.log(htmlElement);
+      this.$store.dispatch(types.addToSelectedElementList, htmlElement);
+      console.log(this.$store.state.selectedElementList);
+    }
+    // changeState(elementName) {
+    //   this.$emit('getClickedIcon', elementName); // emit prop necessary?
+    // }
+  }
 };
 </script>
 
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 1e92498..cbc7d10 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -12,6 +12,7 @@
       <br />
       <span class="white--text">Tree</span>
     </button>
+    <SaveProjectComponent></SaveProjectComponent>
   </v-app-bar>
 </template>
 
@@ -21,7 +22,7 @@
 // import path from 'path';
 // import { addProject, changeTabName } from '../store/types';
 // import localforage from 'localforage';
-// import SaveProjectComponent from '@/components/SaveProjectComponent.vue';
+import SaveProjectComponent from '@/components/SaveProjectComponent.vue';
 // import OpenProjectComponent from '@/components/OpenProjectComponent.vue';
 // import NewProjectComponent from '@/components/NewProjectComponent.vue';
 // import ExportProjectComponent from '@/components/ExportProjectComponent.vue';
@@ -38,7 +39,7 @@ export default {
   props: ['route', 'imageURL'],
 
   components: {
-    // SaveProjectComponent,
+    SaveProjectComponent
     // OpenProjectComponent,
     // NewProjectComponent,
     // ExportProjectComponent,
@@ -49,8 +50,8 @@ export default {
     },
     routeTree() {
       this.$router.push({ path: '/tree' });
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/src/components/SaveProjectComponent.vue b/src/components/SaveProjectComponent.vue
index 2c54bae..676f5b7 100644
--- a/src/components/SaveProjectComponent.vue
+++ b/src/components/SaveProjectComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- <button class="save-icon" >SAVE PROJECT</button> -->
-  <button @click="saveProjectJSON">
+  <button @click="persistState">
     <i class="fas fa-save fa-lg"></i>
 
     <br />
@@ -9,121 +9,119 @@
 </template>
 
 <script>
-import localforage from 'localforage';
-import fs from 'fs-extra';
-const Mousetrap = require('mousetrap');
+// import localforage from 'localforage';
+// import fs from 'fs-extra';
 
-const { ipcRender } = require('electron');
+// const { ipcRender } = require('electron');
 
 export default {
   name: 'SaveProjectComponent',
-  created() {
-    Mousetrap.bind(['command+s', 'ctrl+s'], () => {
-      this.saveProjectJSON();
-    });
-  },
   methods: {
-    parseFileName(file) {
-      //'asdf/asdff/sdf.txt -> sdf.txt
-      return file.split('/').pop();
-    },
-    parseAndDelete(htmlList) {
-      htmlList.forEach((element) => {
-        if (element.children.length > 0) {
-          console.log('in recurse');
-          this.parseAndDelete(element.children);
-        }
-        delete element._vm;
-        delete element.parent;
-        delete element.open;
-        delete element.active;
-        delete element.style;
-        delete element.class;
-        delete element.innerStyle;
-        delete element.innerClass;
-        delete element.innerBackStyle;
-        delete element.innerBackClass;
-      });
-    },
-    saveProjectJSON() {
-      console.log('THIS ONE');
-      let projectLocation =
-        this.$store.state.projects[this.$store.state.activeTab]
-          .lastSavedLocation;
-      if (projectLocation) {
-        console.log('IN SAVE LOCATION', this.$store.state);
-        let state = this.$store.state;
-        let routes = state.routes;
-        for (let view in routes) {
-          routes[view].forEach((component) => {
-            let htmlList = component.htmlList;
-            this.parseAndDelete(htmlList);
-          });
-        }
-        let componentMap = this.$store.state.componentMap;
-        console.log('compmap', componentMap);
-        for (let component in componentMap) {
-          if (componentMap[component].htmlList) {
-            let comphtml = componentMap[component].htmlList;
-            console.log('COMPHTML', comphtml);
-            this.parseAndDelete(comphtml);
-          }
-        }
+    persistState() {
+      console.log(this.$store.state);
+    }
+    // parseFileName(file) {
+    //   //'asdf/asdff/sdf.txt -> sdf.txt
+    //   return file.split('/').pop();
+    // }
+    //   parseAndDelete(htmlList) {
+    //     htmlList.forEach((element) => {
+    //       if (element.children.length > 0) {
+    //         console.log('in recurse');
+    //         this.parseAndDelete(element.children);
+    //       }
+    //       delete element._vm;
+    //       delete element.parent;
+    //       delete element.open;
+    //       delete element.active;
+    //       delete element.style;
+    //       delete element.class;
+    //       delete element.innerStyle;
+    //       delete element.innerClass;
+    //       delete element.innerBackStyle;
+    //       delete element.innerBackClass;
+    //     });
+    //   },
+    //   saveProjectJSON() {
+    //     console.log('THIS ONE');
+    //     let projectLocation =
+    //       this.$store.state.projects[this.$store.state.activeTab]
+    //         .lastSavedLocation;
+    //     if (projectLocation) {
+    //       console.log('IN SAVE LOCATION', this.$store.state);
+    //       let state = this.$store.state;
+    //       let routes = state.routes;
+    //       for (let view in routes) {
+    //         routes[view].forEach((component) => {
+    //           let htmlList = component.htmlList;
+    //           this.parseAndDelete(htmlList);
+    //         });
+    //       }
+    //       let componentMap = this.$store.state.componentMap;
+    //       console.log('compmap', componentMap);
+    //       for (let component in componentMap) {
+    //         if (componentMap[component].htmlList) {
+    //           let comphtml = componentMap[component].htmlList;
+    //           console.log('COMPHTML', comphtml);
+    //           this.parseAndDelete(comphtml);
+    //         }
+    //       }
 
-        fs.writeFileSync(projectLocation, JSON.stringify(state));
+    //       fs.writeFileSync(projectLocation, JSON.stringify(state));
 
-        console.log('PROJECT SAVED TO LAST SAVED LOCATION');
-      } else {
-        ipcRender.send('show-save-json-dialog');
-      }
-    },
-  },
-  mounted() {
-    ipcRender.on('save-json-location', (event, data) => {
-      //delete original key from local forage
-      let deleteKey =
-        this.$store.state.projects[this.$store.state.activeTab].filename;
-      localforage
-        .removeItem(deleteKey)
-        .then(function () {
-          console.log(deleteKey, 'Key is cleared!');
-        })
-        .catch(function (err) {
-          console.log(err);
-        });
+    //       console.log('PROJECT SAVED TO LAST SAVED LOCATION');
+    //     } else {
+    //       ipcRender.send('show-save-json-dialog');
+    //     }
+    //   },
+    // },
+    // mounted() {
+    //   ipcRender.on('save-json-location', (event, data) => {
+    //     //delete original key from local forage
+    //     let deleteKey =
+    //       this.$store.state.projects[this.$store.state.activeTab].filename;
+    //     localforage
+    //       .removeItem(deleteKey)
+    //       .then(function () {
+    //         console.log(deleteKey, 'Key is cleared!');
+    //       })
+    //       .catch(function (err) {
+    //         console.log(err);
+    //       });
 
-      let fileName = this.parseFileName(data);
+    //     let fileName = this.parseFileName(data);
 
-      this.$set(this.$store.state.projects, this.$store.state.activeTab, {
-        filename: fileName,
-        lastSavedLocation: data,
-      });
-      let state = this.$store.state;
-      let routes = state.routes;
-      for (let view in routes) {
-        routes[view].forEach((component) => {
-          let htmlList = component.htmlList;
-          this.parseAndDelete(htmlList);
-        });
-      }
-      let componentMap = this.$store.state.componentMap;
-      for (let component in componentMap) {
-        if (component.htmlList) {
-          let comphtml = component.htmlList;
-          this.parseAndDelete(comphtml);
-        }
-      }
+    //     this.$set(this.$store.state.projects, this.$store.state.activeTab, {
+    //       filename: fileName,
+    //       lastSavedLocation: data,
+    //     });
+    //     let state = this.$store.state;
+    //     let routes = state.routes;
+    //     for (let view in routes) {
+    //       routes[view].forEach((component) => {
+    //         let htmlList = component.htmlList;
+    //         this.parseAndDelete(htmlList);
+    //       });
+    //     }
+    //     let componentMap = this.$store.state.componentMap;
+    //     for (let component in componentMap) {
+    //       if (component.htmlList) {
+    //         let comphtml = component.htmlList;
+    //         this.parseAndDelete(comphtml);
+    //       }
+    //     }
 
-      fs.writeFileSync(data, JSON.stringify(state));
-      localforage
-        .setItem(fileName, JSON.parse(fs.readFileSync(data, 'utf8')))
-        .then((result) => {
-          console.log('saved ', fileName, 'to local forage');
-          console.log('result is', result);
-        });
-      console.log('PROJECT SAVED AS A JSON OBJECT!');
-    });
-  },
+    //     fs.writeFileSync(data, JSON.stringify(state));
+    //     localforage
+    //       .setItem(fileName, JSON.parse(fs.readFileSync(data, 'utf8')))
+    //       .then((result) => {
+    //         console.log('saved ', fileName, 'to local forage');
+    //         console.log('result is', result);
+    //       });
+    //     console.log('PROJECT SAVED AS A JSON OBJECT!');
+    //   });
+    // },
+  }
 };
 </script>
 
diff --git a/src/main.js b/src/main.js
index fcfc641..d18a131 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store/';
+// import { initializeStore } from './store/types';
 
 //vuetify imports
 import 'vuetify/styles';
@@ -13,12 +14,17 @@ import * as directives from 'vuetify/directives';
 //vuetify config
 const vuetify = createVuetify({
   components,
-  directives,
+  directives
 });
 // Vue.config.productionTip = false;
 
 // Creation and mounting of the app
-const app = createApp(App);
+const app = createApp({
+  extends: App,
+  beforeCreate() {
+    store.commit('initializeStore');
+  }
+});
 app.use(vuetify);
 app.use(router);
 app.use(store);
diff --git a/src/store/actions.js b/src/store/actions.js
index 4fa0337..b836cb5 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,6 +1,9 @@
 import * as types from './types';
 
 const actions = {
+  [types.initialiseStore]: ({ commit }) => {
+    commit(types.INITIALISESTORE);
+  },
   [types.registerComponent]: ({ state, commit }, payload) => {
     const { componentName } = payload;
     if (!state.componentMap[componentName]) {
@@ -12,7 +15,7 @@ const actions = {
       commit(types.ADD_COMPONENT_TO_ACTIVE_ROUTE_IN_ROUTE_MAP, payload);
 
       let component = state.componentNameInputValue;
-      let value = state.componentChildrenMultiselectValue.map((component) => {
+      let value = state.componentChildrenMultiselectValue.map(component => {
         return state.componentMap[component];
       });
       commit(types.UPDATE_COMPONENT_CHILDREN_VALUE, { component, value });
@@ -38,7 +41,7 @@ const actions = {
   [types.deleteActiveComponent]: ({ state, commit }) => {
     commit(types.DELETE_ACTIVE_COMPONENT);
     let activeRouteArray = [...state.routes[state.activeRoute]];
-    let newActiveRouteArray = activeRouteArray.filter((componentData) => {
+    let newActiveRouteArray = activeRouteArray.filter(componentData => {
       return state.activeComponent !== componentData.componentName;
     });
     commit(types.SET_ACTIVE_ROUTE_ARRAY, newActiveRouteArray);
@@ -97,7 +100,7 @@ const actions = {
   },
   [types.updateOpenModal]: ({ commit }, payload) => {
     commit(types.UPDATE_OPEN_MODAL, payload);
-  },
+  }
 };
 
 export default actions;
diff --git a/src/store/index.js b/src/store/index.js
index e9963d1..b5a46fd 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,8 +7,16 @@ import mutations from './mutations.js';
 
 // Vue.use(Vuex);
 
-export default createStore({
-  state,
-  mutations,
-  actions,
+const store = createStore({ state, mutations, actions });
+
+store.subscribe((mutation, state) => {
+  localStorage.setItem('store', JSON.stringify(state));
 });
+
+export default store;
+
+// export default createStore({
+//   state,
+//   mutations,
+//   actions,
+// });
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 2dea05f..abebc79 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -3,6 +3,20 @@ import * as types from './types';
 import localforage from 'localforage';
 
 const mutations = {
+  initializeStore(state) {
+    if (localStorage.getItem('store')) {
+      this.replaceState(
+        Object.assign(state, JSON.parse(localStorage.getItem('store')))
+      );
+    }
+  },
+  // [types.INITIALISESTORE]: (state) => {
+  //   if (localStorage.getItem('store')) {
+  //     .replaceState(
+  //       Object.assign(state, JSON.parse(localStorage.getItem('store')))
+  //     );
+  //   }
+  // },
   [types.ADD_COMPONENT_TO_COMPONENT_MAP]: (state, payload) => {
     const { componentName, htmlList, children, isActive } = payload;
     state.componentMap = {
@@ -15,8 +29,8 @@ const mutations = {
         h: 200,
         children,
         htmlList,
-        isActive,
-      },
+        isActive
+      }
     };
   },
   [types.ADD_TO_SELECTED_ELEMENT_LIST]: (state, payload) => {
@@ -29,7 +43,7 @@ const mutations = {
     const componentName = state.activeComponent;
     state.componentMap[componentName].htmlList.push({
       text: elementName,
-      children: [],
+      children: []
     });
   },
   [types.DELETE_FROM_COMPONENT_HTML_LIST]: (state, id) => {
@@ -56,7 +70,7 @@ const mutations = {
     const componentName = state.activeComponent;
     state.componentMap[componentName].htmlList = payload;
   },
-  [types.DELETE_ACTIVE_COMPONENT]: (state) => {
+  [types.DELETE_ACTIVE_COMPONENT]: state => {
     const { componentMap, activeComponent } = state;
 
     let newObj = Object.assign({}, componentMap);
@@ -94,7 +108,7 @@ const mutations = {
   [types.ADD_ROUTE]: (state, payload) => {
     state.routes = {
       ...state.routes,
-      [payload]: [],
+      [payload]: []
     };
   },
   [types.ADD_ROUTE_TO_COMPONENT_MAP]: (state, payload) => {
@@ -103,8 +117,8 @@ const mutations = {
       ...state.componentMap,
       [route]: {
         componentName: route,
-        children,
-      },
+        children
+      }
     };
   },
   [types.SET_ACTIVE_ROUTE]: (state, payload) => {
@@ -127,7 +141,7 @@ const mutations = {
   },
   [types.DELETE_PROJECT_TAB]: (state, payload) => {
     state.projects.splice(payload, 1);
-    localforage.getItem(state.projects[payload - 1].filename).then((data) => {
+    localforage.getItem(state.projects[payload - 1].filename).then(data => {
       state = data;
     });
     state.activeTab = state.activeTab - 1;
@@ -151,7 +165,7 @@ const mutations = {
   },
   [types.UPDATE_OPEN_MODAL]: (state, payload) => {
     state.modalOpen = payload;
-  },
+  }
 };
 
 export default mutations;
diff --git a/src/store/types.js b/src/store/types.js
index 4f25909..5b1ebdb 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -1,4 +1,5 @@
 //Mutations
+export const INITIALISESTORE = 'INITIALISESTORE';
 export const ADD_COMPONENT = 'ADD_COMPONENT';
 export const ADD_COMPONENT_TO_COMPONENT_MAP = 'ADD_COMPONENT_TO_COMPONENT_MAP';
 export const SET_SELECTED_ELEMENT_LIST = 'SET_SELECTED_ELEMENT_LIST';
@@ -69,3 +70,4 @@ export const updateComponentChildrenValue = 'updateComponentChildrenValue';
 export const updateComponentNameInputValue = 'updateComponentNameInputValue';
 export const updateOpenModal = 'updateOpenModal';
 export const addElement = 'addElement';
+export const initialiseStore = 'initialiseStore';
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 21fdf3e..6eb3d52 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="bg-surface-variant" fluid="true">
+  <v-container class="bg-surface-variant" fluid>
     <v-row>
       <v-col>
         <v-sheet><ProjectTabs /></v-sheet>
@@ -25,7 +25,7 @@
         <v-sheet><ComponentDisplay /></v-sheet>
       </v-col>
       <v-col cols="2">
-        <v-sheet><HomeQueue /></v-sheet>
+        <v-sheet class="rounded-xl"><HomeQueue /></v-sheet>
       </v-col>
     </v-row>
   </v-container>
@@ -75,8 +75,8 @@ export default {
     HomeSidebar,
     HomeQueue,
     RouteDisplay,
-    ProjectTabs,
-  },
+    ProjectTabs
+  }
 };
 </script>