diff --git a/src/background/App.vue b/src/background/App.vue
index c9cb6c7..c0591d2 100644
--- a/src/background/App.vue
+++ b/src/background/App.vue
@@ -1,120 +1,129 @@
-<template>
-  <div>
-    <!-- <input v-model="hosts[0].userTitle" /> -->
-    <!-- <input v-model="getHostByHostName()" /> -->
-    <!-- {{hosts[0].userTitle}} -->
-    <!-- {{hosts}} -->
-    <!-- <input v-model="getHostByHostName" /> -->
-    <!-- {{ getHostByHostName("www.google.com") }} -->
-  </div>
-</template>
+<template></template>
 
 <script>
-// <div>{{this.hosts[0].userTitle}}</div>
 import browser from "webextension-polyfill";
 import { mapState, mapGetters, mapActions } from "vuex";
-import { mapMultiRowFields, mapFields } from "vuex-map-fields";
-// import { Promise } from "q";
 
 export default {
-  // name: "App",
+  name: "App",
   data() {
-    return {
-      // hostObject: "",
-      // userTitleer: { ...this.hosts }
-    };
+    return {};
   },
 
   computed: {
-    ...mapState(["options", "name", "hosts"]),
-
-    ...mapGetters(["getHostByHostName"]),
-    logHostString(hoststring) {
-      // const userTitle = getHostByHostName();
-      console.log(
-        "userTitle: ",
-        this.$store.getters.getHostByHostName(hoststring)
-      );
-    }
+    // ...mapGetters("hosts", { getHostByHostName: "getHostByHostName" })
+    ...mapGetters({
+      getHostByHostName: "hosts/getHostByHostName"
+    })
+    // getHostByHostName: hostname =>
+    //   this.$store.getters["hosts/getHostByHostName"](hostname)
   },
 
   methods: {
-    ...mapActions(["setHostDefaultTitle"]),
+    // ...mapActions("hosts", { setHostDefaultTitle: "setHostDefaultTitle" }),
+    ...mapActions({
+      setHostProperty: "hosts/setHostProperty"
+    }),
 
     formatDocumentTitle(hostObject, documentObject) {
       let userTitle = hostObject.userTitle;
       let documentTitle = documentObject.title;
-      const formattedTitle = hostObject.append
+      const formattedTitle = hostObject.isAppended
         ? (documentTitle += userTitle)
         : (documentTitle = userTitle);
       return formattedTitle;
     },
 
     preventDocumentLoops(hostObject, documentObject) {
-      // debugger;
       if (
-        hostObject.append &&
+        hostObject.isAppended &&
         documentObject.title ===
           `${hostObject.defaultTitle}${hostObject.userTitle}`
       )
         return;
       if (
-        !hostObject.append &&
+        !hostObject.isAppended &&
         documentObject.title === `${hostObject.userTitle}`
       )
         return;
       if (
-        hostObject.append &&
+        hostObject.isAppended &&
         documentObject.title.includes(hostObject.userTitle)
       )
         return;
 
-      // return formatDocumentTitle(hostObject, documentObject);
       return true;
+    },
+    sendHostProperty1(mutation, value, index) {
+      const payload = { index, mutation, value };
+      console.log(`LOG: sendHostProperty -> payload`, payload);
+      this.setHostProperty(payload);
     }
   },
 
-  // beforeCreate: function() {
-  // },
+  mounted() {
+    const tabs = browser.tabs.query({});
+
+    console.log(tabs);
+    function handleUpdated(tabId, changeInfo, tabInfo) {
+      // console.log(
+      //   `LOG: handleUpdated -> tabId, changeInfo, tabInfo`,
+      //   `tabId: `,
+      //   tabId,
+      //   `changeInfo: `,
+      //   changeInfo,
+      //   `tabInfo: `,
+      //   tabInfo
+      // );
+      if (tabInfo.status === "complete" && changeInfo.title !== undefined) {
+        console.log(
+          `id: ${tabId},
+        title: ${changeInfo.title},
+        url: ${tabInfo.url}`
+        );
+      }
+    }
 
-  created: function() {
-    browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
-      const returnedHostObject = this.$store.getters.getHostByHostName(
-        message.hostname
-      );
+    browser.tabs.onUpdated.addListener(handleUpdated);
 
-      if (message.type === "contentScriptInit" && returnedHostObject) {
+    browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+      const hostObject = this.getHostByHostName(message.hostname);
+      // console.log(`LOG: created -> message`, message);
+      // console.log(
+      //   `LOG: created -> this.getHostByHostName(message.hostname)`,
+      //   this.getHostByHostName(message.hostname)
+      // );
+
+      if (message.type === "contentScriptInit" && hostObject) {
         browser.tabs.executeScript(sender.tab.id, {
           file: "/content-scripts/content-script-inject.js"
         });
-      } else if (message.type === "contentScriptInjectInit") {
-        this.setHostDefaultTitle(message);
+      } else if (message.type === "contentScriptInjectInit" && hostObject) {
+        console.log(`contentScriptInjectInit message: `, message);
+        this.setHostProperty({
+          mutation: "SET_DEFAULT_TITLE",
+          value: message.hostname
+        });
 
-        if (returnedHostObject.hostState) {
+        if (hostObject) {
           return Promise.resolve({
             type: "updateTitle",
-            title: this.formatDocumentTitle(returnedHostObject, message)
+            title: this.formatDocumentTitle(hostObject, message)
           });
         }
-      } else if (message.type === "contentScriptTitleMutation") {
+      } else if (message.type === "contentScriptTitleMutation" && hostObject) {
         console.log(`contentScriptTitleMutation message: `, message);
-        this.setHostDefaultTitle(message);
-        console.log(
-          `returnedHostObject.defaultTitle: `,
-          returnedHostObject.defaultTitle
-        );
-
-        if (returnedHostObject.hostState) {
-          // console.log(
-          //   `LOG: preventDocumentLoops(returnedHostObject, message)`,
-          //   this.preventDocumentLoops(returnedHostObject, message)
-          // );
+        this.setHostProperty({
+          mutation: "SET_DEFAULT_TITLE",
+          value: message.hostname
+        });
 
-          if (!this.preventDocumentLoops(returnedHostObject, message)) return;
+        if (hostObject.hostState) {
+          if (!this.preventDocumentLoops(hostObject, message)) return;
 
           return Promise.resolve({
             type: "updateTitle",
-            title: this.formatDocumentTitle(returnedHostObject, message)
+            title: this.formatDocumentTitle(hostObject, message)
           });
         }
       } else {
@@ -125,39 +134,6 @@ export default {
       }
       return true;
     });
-  },
-
-  // beforeMount: function() {},
-
-  mounted: function() {
-    console.log("<mounted>");
-
-    // console.log(document.location.hostname);
-    // console.log(getHostByHostName("www.google.com"));
-    // logHostString("www.google.com");
-    // stateHosts();
-    // console.log(getHostByHostName(document.location.hostname));
-    // getHostByHostName(document.location.hostname);
-    // this.$store.watch(
-    //   (state, getters) => getters.hosts[0].userTitle,
-    //   (newValue, oldValue) => {
-    //     console.log(`Updating from ${oldValue} to ${newValue}`);
-
-    //     // Do whatever makes sense now
-    //     // if (newValue === 'success') {
-    //     //   this.complex = {
-    //     //     deep: 'some deep object',
-    //     //   };
-    //     // }
-    //   }
-    // );
-
-    console.log("</mounted>");
-  },
-  updated: function() {
-    console.log("<updated>");
-
-    console.log("</updated>");
   }
 };
 
diff --git a/src/content-scripts/content-script.js b/src/content-scripts/content-script.js
index a4f59b3..9294985 100644
--- a/src/content-scripts/content-script.js
+++ b/src/content-scripts/content-script.js
@@ -10,8 +10,13 @@ console.log("HOLA FROM CONTENT-SCRIPT!");
 
 // const testVariable = "is this printing?";
 // console.log("testVariable from content-script: ", testVariable);
-
-browser.runtime.sendMessage({ type: "contentScriptInit", hostname: document.location.hostname });
+// debugger;
+window.addEventListener("DOMContentLoaded", sendInitMessage());
+window.removeEventListener("DOMContentLoaded", sendInitMessage);
+function sendInitMessage() {
+  browser.runtime.sendMessage({ type: "contentScriptInit", hostname: document.location.hostname, SENTFROM: document.location });
+}
+// browser.runtime.sendMessage({ type: "contentScriptInit", hostname: document.location.hostname, SENTFROM: document.location });
 
 // function clickPause() {
 //   document.querySelector(`[title="Pause"]`).click()
diff --git a/src/popup/components/TheList.vue b/src/popup/components/TheList.vue
index cb17c25..3a468dc 100644
--- a/src/popup/components/TheList.vue
+++ b/src/popup/components/TheList.vue
@@ -1,9 +1,5 @@
 <template>
   <div>
-    <!-- <div class="text-xs-center d-flex pb-3">
-      <v-btn @click="expandAll">expand all</v-btn>
-      <v-btn @click="expandNone">none</v-btn>
-    </div>-->
     <v-expansion-panels v-model="panel" focusable multiple>
       <v-expansion-panel v-for="(host, index) in hosts" :key="index">
         <v-expansion-panel-header v-slot="{ open }">
@@ -41,7 +37,7 @@
                   >-->
                   <v-text-field
                     :value="host.userTitle"
-                    @input="value => userTitleProxy(index, value)"
+                    @input="value => setHostProperty({index: index, mutation: 'SET_USER_TITLE', value})"
                     placeholder="NO TITLE SET!"
                     single-line
                     outlined
@@ -52,7 +48,11 @@
               </v-flex>
               <v-flex xs8>
                 <ValidationProvider name="append">
-                  <v-radio-group v-model="host.append" row>
+                  <v-radio-group
+                    :value="host.isAppended"
+                    @change="value => setHostProperty({index: index, mutation: 'SET_IS_APPENDED', value})"
+                    row
+                  >
                     <v-radio :value="true" label="append"></v-radio>
                     <v-radio :value="false" label="overwrite"></v-radio>
                   </v-radio-group>
@@ -61,6 +61,7 @@
               <v-flex xs4>
                 <v-switch
                   v-model="host.hostState"
+                  @change="setHostProperty({index: index, mutation: 'SET_HOST_STATE', value: $event})"
                   :label="`${host.hostState && 'enabled' || 'disabled' }`"
                   color="green accent-4"
                 ></v-switch>
@@ -74,10 +75,8 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from "vuex";
-// import { mapMultiRowFields, mapFields } from "vuex-map-fields";
+import { mapState, mapMutations, mapActions } from "vuex";
 import { ValidationProvider, ValidationObserver, validate } from "vee-validate";
-import { get, sync } from "vuex-pathify";
 
 export default {
   data() {
@@ -91,59 +90,31 @@ export default {
     ValidationProvider,
     ValidationObserver
   },
-  methods: {
-    ...mapMutations(["UPDATE_NAME", "UPDATE_HOST"]),
-    expandAll() {
-      this.panel = this.hosts.map((k, i) => i);
-    },
-    expandNone() {
-      this.panel = [];
-    },
-    updateName(e) {
-      this.UPDATE_NAME(e.target.value);
-      console.log("comit updated name value");
-    },
-    updateUserTitle(index, value) {
-      this.$store.commit("UPDATE_USER_TITLE", { index, value });
-    },
-    userTitleProxy(index, value) {
-      if (!this.$refs.userTitleInput[index]) return;
-      this.$refs.userTitleInput[index].validate(value).then(result => {
-        if (result.valid) {
-          console.log(`LOG: userTitleProxy -> result`, result);
-          this.updateUserTitle(index, value);
-        }
-      });
-    }
-  },
   computed: {
-    ...mapState(["options", "hosts"]),
-    // ...mapMultiRowFields(["hosts"]),
-    // hosts: sync("hosts"),
-    // dynamicProp :sync('dynamic/:name@items[:index].value'),
-    dynamicUserTitle: sync("hosts[:key].userTitle")
-    // hosts: {
-    //   get() {
-    //     // return this.$store.getters.hosts;
-    //     console.log("GETTER LOG: ", this.$store.state.hosts);
-    //     return this.$store.state.hosts;
-    //   },
-    //   set(value) {
-    //     // console.log(value);
-    //     this.$store.commit("UPDATE_HOST", value);
-    //   }
+    ...mapState({
+      globals: state => state.globals.options,
+      hosts: state => state.hosts.hosts
+    })
+  },
+  methods: {
+    ...mapActions({
+      setHostProperty: "hosts/setHostProperty"
+    })
+    // sendHostProperty(index, mutation, value) {
+    //   const payload = { index, mutation, value };
+    //   this.setHostProperty(...payload);
     // },
-    // userTitleProxy: {
-    //   get() {
-    //     return this.userTitleToValidate;
-    //   },
-    //   set(value) {
-    //     (this.userTitleToValidate = value),
-    //       this.$refs.userTitleInput,
-    //       validate(value).then(result => {
-    //         if (result) this.host.userTitle = value;
-    //       });
-    //   }
+    // showEvent(event) {
+    //   console.log(`LOG: showEvent -> event`, event);
+    // }
+    // userTitleValidationProxy(index, objectProperty, value) {
+    //   if (!this.$refs.userTitleInput[index]) return;
+    //   this.$refs.userTitleInput[index].validate(value).then(result => {
+    //     if (result.valid) {
+    //       console.log(`LOG: userTitleValidationProxy -> result`, result);
+    //       this.setHostProperty(index, objectProperty, value);
+    //     }
+    //   });
     // }
   }
 };
diff --git a/src/store/actions.js b/src/store/actions.js
deleted file mode 100644
index 85d2ba5..0000000
--- a/src/store/actions.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as types from "./mutation-types";
-
-export const setFoo = ({ commit }, payload) => {
-  commit(types.UPDATE_FOO, payload);
-};
-export const setHostDefaultTitle = ({commit, getters}, payload) => {
-  const hostObject = getters.getHostByHostName(payload.hostname);
-  commit(types.SET_HOST_DEFAULT_TITLE, {hostObject, message: payload} );
-};
\ No newline at end of file
diff --git a/src/store/getters.js b/src/store/getters.js
deleted file mode 100644
index fd980ba..0000000
--- a/src/store/getters.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getField } from "vuex-map-fields";
-
-// export const options = state => state.options;
-// export const hosts = state => state.hosts;
-// export const name = state => state.name;
-const options = state => state.options;
-const hosts = state => state.hosts;
-// const hostString = state => state.hosts[0].hostString;
-const getHostByHostName = state => hostName => state.hosts.find(host => host.hostName === hostName);
-const name = state => state.name;
-
-export default {
-  getField,
-  hosts,
-  // hostString,
-  getHostByHostName,
-  options,
-  name,
-};
diff --git a/src/store/globals.js b/src/store/globals.js
new file mode 100644
index 0000000..ce556c3
--- /dev/null
+++ b/src/store/globals.js
@@ -0,0 +1,24 @@
+import * as types from './mutation-types';
+
+const state = {
+    schemaVersion: "1.0.0",
+    options: {
+      globalState: true,
+      reloadWindows: false,
+      replaceAll: false,
+    }
+};
+
+const getters = {};
+
+const actions = {};
+
+const mutations = {};
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations
+}
\ No newline at end of file
diff --git a/src/store/hosts.js b/src/store/hosts.js
new file mode 100644
index 0000000..526a9ed
--- /dev/null
+++ b/src/store/hosts.js
@@ -0,0 +1,101 @@
+// import { make } from "vuex-pathify";
+import * as types from "./mutation-types";
+
+const state = {
+    hosts: [
+        {
+          id: 0,
+          date: undefined,
+          hostState: false,
+          hostName: "www.google.com",
+          userTitle: " - Titlest",
+          defaultTitle: undefined,
+          isAppended: true,
+          hostBindings: [],
+        },
+        {
+          id: 1,
+          date: undefined,
+          hostState: false,
+          hostName: "discordapp.com",
+          userTitle: " - Titlest",
+          defaultTitle: undefined,
+          isAppended: false,
+          hostBindings: [],
+        },
+        {
+          id: 2,
+          date: undefined,
+          hostState: true,
+          hostName: "www.stackoverflow.com",
+          userTitle: " - Titlest",
+          defaultTitle: undefined,
+          isAppended: true,
+          hostBindings: [],
+        },
+        {
+          id: 3,
+          date: undefined,
+          hostState: true,
+          hostName: "open.spotify.com",
+          userTitle: " - Titlest",
+          defaultTitle: undefined,
+          isAppended: true,
+          hostBindings: [],
+        },
+        {
+          id: 4,
+          date: undefined,
+          hostState: true,
+          hostName: "www.github.com",
+          userTitle: " - Titlest",
+          defaultTitle: undefined,
+          isAppended: true,
+          hostBindings: [],
+        },
+      ],
+};
+
+const getters = {
+  getHosts: state => state.hosts,
+  getHostIndexByHostName: state => hostName => state.hosts.findIndex(host => host.hostName === hostName),
+  getHostByHostName: state => hostName => state.hosts.find(host => host.hostName === hostName)
+};
+
+const actions = {
+  setHostProperty({ commit, getters }, payload) {
+  console.log(`LOG: setHostProperty(1) -> payload`, payload);
+
+  if (payload.index === undefined) {
+    payload.index = getters.getHostIndexByHostName(payload.value);
+  };
+  console.log(`LOG: setHostProperty(2) -> payload`, payload);
+    
+    commit(payload.mutation, payload);
+  },
+};
+
+const mutations = {
+    // ...make.mutations(state),
+  [types.SET_USER_TITLE](state, payload) {
+    state.hosts[payload.index].userTitle = payload.value
+  },
+  [types.SET_IS_APPENDED](state, payload) {
+    state.hosts[payload.index].isAppended = payload.value
+  },
+  [types.SET_HOST_STATE](state, payload) {
+    state.hosts[payload.index].hostState = payload.value
+  },
+  [types.SET_DEFAULT_TITLE](state, payload) {
+  console.log(`LOG: SET_DEFAULT_TITLE payload :`, payload);
+    state.hosts[payload.index].defaultTitle = payload.value;
+  }
+};
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations
+}
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 8fa8191..6116934 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,90 +1,21 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import VuexWebExtensions from "vuex-webextensions";
-import pathify from "./pathify";
-import { make } from "vuex-pathify";
 
-import getters from "./getters";
-import mutations from "./mutations";
-import * as actions from "./actions";
-
-const state = {
-  dbVersion: "1",
-  options: {
-    globalState: true,
-    reloadWindows: false,
-    replaceAll: false,
-  },
-  hosts: [
-    {
-      id: 0,
-      date: undefined,
-      hostState: false,
-      hostName: "www.google.com",
-      userTitle: " - Titlest",
-      defaultTitle: undefined,
-      append: true,
-      hostBindings: [],
-    },
-    {
-      id: 1,
-      date: undefined,
-      hostState: false,
-      hostName: "discordapp.com",
-      userTitle: " - Titlest",
-      defaultTitle: undefined,
-      append: false,
-      hostBindings: [],
-    },
-    {
-      id: 2,
-      date: undefined,
-      hostState: true,
-      hostName: "www.stackoverflow.com",
-      userTitle: " - Titlest",
-      defaultTitle: undefined,
-      append: true,
-      hostBindings: [],
-    },
-    {
-      id: 3,
-      date: undefined,
-      hostState: true,
-      hostName: "open.spotify.com",
-      userTitle: " - Titlest",
-      defaultTitle: undefined,
-      append: true,
-      hostBindings: [],
-    },
-    {
-      id: 4,
-      date: undefined,
-      hostState: true,
-      hostName: "www.github.com",
-      userTitle: " - Titlest",
-      defaultTitle: undefined,
-      append: true,
-      hostBindings: [],
-    },
-  ],
-  name: "kinghat",
-};
-
-// const mutations = {
-//   ...make.mutations(state),
-// }
+import globals from './globals';
+import hosts from './hosts';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state,
-  getters,
-  mutations,
-  actions,
+  modules: {
+    globals,
+    hosts,
+  },
   plugins: [
-    pathify.plugin,
     VuexWebExtensions({
-      persistentStates: ["options", "hosts", "name"],
+      persistentStates: ["options", "hosts",],
+      // loggerLevel: "debug"
     }),
   ],
 });
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 88672aa..581fc5a 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -1,13 +1,4 @@
-export const UPDATE_FOO = "UPDATE_FOO";
-export const UPDATE_HOST = "UPDATE_HOST";
+export const SET_IS_APPENDED = "SET_IS_APPENDED"
+export const SET_USER_TITLE = "SET_USER_TITLE"
 export const SET_HOST_STATE = "SET_HOST_STATE";
-export const UPDATE_NAME = "UPDATE_NAME";
-export const UPDATE_USER_TITLE = "UPDATE_USER_TITLE"
-export const SET_HOST_DEFAULT_TITLE = "SET_HOST_DEFAULT_TITLE";
-
-// export default {
-// UPDATE_FOO = "UPDATE_FOO",
-// SET_HOST_STATE = "SET_HOST_STATE",
-// UPDATE_NAME = "UPDATE_NAME",
-// SET_HOST_DEFAULT_TITLE = "SET_HOST_DEFAULT_TITLE",
-// }
\ No newline at end of file
+export const SET_DEFAULT_TITLE = "SET_DEFAULT_TITLE";
\ No newline at end of file
diff --git a/src/store/mutations.js b/src/store/mutations.js
deleted file mode 100644
index 04da1db..0000000
--- a/src/store/mutations.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { updateField } from "vuex-map-fields";
-import * as types from "./mutation-types";
-
-export default {
-  updateField,
-  [types.UPDATE_FOO](state, payload) {
-    state.foo = payload;
-  },
-  [types.UPDATE_HOST](state, payload) {
-    console.log(payload);
-    state.hosts.host = payload;
-  },
-  [types.SET_HOST_STATE](state, payload) {
-    state.hosts.hostState = payload;
-  },
-  [types.UPDATE_NAME](state, payload) {
-    state.name = payload;
-  },
-  [types.UPDATE_USER_TITLE](state, payload) {
-    state.hosts[payload.index].userTitle = payload.value
-  },
-  [types.SET_HOST_DEFAULT_TITLE](state, payload) {
-    payload.hostObject.defaultTitle = payload.message.title;
-  }
-};
diff --git a/src/store/pathify.js b/src/store/pathify.js
deleted file mode 100644
index e917484..0000000
--- a/src/store/pathify.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import pathify from 'vuex-pathify'
-export default pathify
\ No newline at end of file