diff --git a/README.md b/README.md
index bcc5c5c..bd77e3b 100644
--- a/README.md
+++ b/README.md
@@ -229,6 +229,16 @@ Lifecycle hooks : { [beforeCreated], [created], [beforeMount], [mounted],
 3. Modified App.vue to work with the router to role it back just `ctrl +z`
 4. Router guards are the before and after events of a route
 
+5. **DOWNLOAD** **[release 1.7.0](https://github.com/denOldTimer/releases/1.8.0)**
+
+---
+
+## Advanced : Chapter 9 : Global State Management with Veux 4
+
+1. install using the vue ui
+2.
+3. **DOWNLOAD** **[release 1.7.0](https://github.com/denOldTimer/releases/1.9.0)**
+
 ---
 
 [data]: https://v3.vuejs.org/api/options-data.html#data-2
diff --git a/package-lock.json b/package-lock.json
index 448090e..02c9fc8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,12 +11,14 @@
         "core-js": "^3.6.5",
         "npm": "^7.6.1",
         "vue": "^3.0.0",
-        "vue-router": "^4.0.0-0"
+        "vue-router": "^4.0.0-0",
+        "vuex": "^4.0.0-0"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
         "@vue/cli-plugin-eslint": "~4.5.0",
         "@vue/cli-plugin-router": "~4.5.0",
+        "@vue/cli-plugin-vuex": "~4.5.0",
         "@vue/cli-service": "~4.5.0",
         "@vue/compiler-sfc": "^3.0.0",
         "babel-eslint": "^10.1.0",
@@ -16718,6 +16720,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuex": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0.tgz",
+      "integrity": "sha512-56VPujlHscP5q/e7Jlpqc40sja4vOhC4uJD1llBCWolVI8ND4+VzisDVkUMl+z5y0MpIImW6HjhNc+ZvuizgOw==",
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -31172,6 +31182,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0.tgz",
+      "integrity": "sha512-56VPujlHscP5q/e7Jlpqc40sja4vOhC4uJD1llBCWolVI8ND4+VzisDVkUMl+z5y0MpIImW6HjhNc+ZvuizgOw=="
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/package.json b/package.json
index d10da5c..8fbf61b 100644
--- a/package.json
+++ b/package.json
@@ -12,12 +12,14 @@
     "core-js": "^3.6.5",
     "npm": "^7.6.1",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
diff --git a/src/App.vue b/src/App.vue
index 2af8318..4bd52cc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,8 +4,8 @@
       <router-link to="/">
         <div class="navigation__logo">Twotter</div>
       </router-link>
-      <div class="navigation__user">
-        {{ state.user.username }}
+      <div class="navigation__user" v-if="user">
+        {{ user.username }}
       </div>
     </nav>
     <router-view />
@@ -13,18 +13,17 @@
 </template>
 
 <script>
-import { reactive } from "vue";
+import { useStore } from "vuex";
+import { computed } from "vue";
 
 export default {
   name: "App",
   setup() {
-    const state = reactive({
-      user: {
-        username: "_MitchellRmney",
-      },
-    });
+    const store = useStore();
+    const user = computed(() => store.state.User.user);
+
     return {
-      state,
+      user,
     };
   },
 };
diff --git a/src/main.js b/src/main.js
index 3e79677..a92f228 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(store).use(router).mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index 1693e76..313b2ff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,46 +1,51 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../views/Home.vue'
-import UserProfile from '../views/UserProfile.vue'
-import Admin from '@/views/Admin'
-
+import { createRouter, createWebHistory } from "vue-router";
+import store from "@/store";
+import { users } from "@/assets/users";
+import Home from "../views/Home.vue";
+import UserProfile from "../views/UserProfile.vue";
+import Admin from "@/views/Admin";
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
-    component: Home
+    path: "/",
+    name: "Home",
+    component: Home,
   },
   {
-    path: '/user/:userId',
-    name: 'UserProfile',
-    component: UserProfile
+    path: "/user/:userId",
+    name: "UserProfile",
+    component: UserProfile,
   },
 
   {
-    path: '/admin',
-    name: 'Admin',
+    path: "/admin",
+    name: "Admin",
     component: Admin,
     meta: {
-      requiresAdmin: true
-    }
-  }
-
-]
+      requiresAdmin: true,
+    },
+  },
+];
 
 const router = createRouter({
   //history: createWebHashHistory(),  remove the hashtag in the url
   history: createWebHistory(),
-  routes
+  routes,
 });
 
-
 //router.beforeEach(async (to, from, next))
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async (to, from, next) => {
+  const user = store.state.User.user;
+
+  if (!user) {
+    //get user from api
+    await store.dispatch("User/setUser", users[0]);
+  }
   const isAdmin = true;
-  const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin);
+  const requiresAdmin = to.matched.some((record) => record.meta.requiresAdmin);
 
-  if (requiresAdmin && !isAdmin) next({ name: 'Home' })
+  if (requiresAdmin && !isAdmin) next({ name: "Home" });
   else next();
-})
+});
 
-export default router
+export default router;
diff --git a/src/store/User.js b/src/store/User.js
new file mode 100644
index 0000000..ae69879
--- /dev/null
+++ b/src/store/User.js
@@ -0,0 +1,21 @@
+export const UserModule = {
+  namespaced: true,
+
+  state: {
+    user: null,
+  },
+
+  // Mutations are functions that effect the state
+  mutations: {
+    SET_USER(state, user) {
+      state.user = user;
+    },
+  },
+
+  // Actions are functions that you call throughout your application that call mutations
+  actions: {
+    setUser({ commit }, user) {
+      commit("SET_USER", user);
+    },
+  },
+};
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..26696d4
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,16 @@
+import { createStore } from "vuex";
+import { UserModule } from "./User";
+
+export default createStore({
+  state: {},
+
+  // Mutations are functions that effect the state
+  mutations: {},
+
+  // Actions are functions that you call throughout your application that call mutations
+  actions: {},
+
+  modules: {
+    User: UserModule,
+  },
+});