diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index 025df637..e1af247f 100644
--- a/components/CharacterGrid/index.tsx
+++ b/components/CharacterGrid/index.tsx
@@ -7,10 +7,9 @@ import { AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
 
 import CharacterUnit from '~components/CharacterUnit'
-import SearchModal from '~components/SearchModal'
 
 import api from '~utils/api'
-import state from '~utils/state'
+import { appState } from '~utils/appState'
 
 import './index.scss'
 
@@ -34,7 +33,7 @@ const CharacterGrid = (props: Props) => {
     } : {}
 
     // Set up state for view management
-    const { party, grid } = useSnapshot(state)
+    const { party, grid } = useSnapshot(appState)
 
     const [slug, setSlug] = useState()
     const [found, setFound] = useState(false)
@@ -47,15 +46,15 @@ const CharacterGrid = (props: Props) => {
     useEffect(() => {
         const shortcode = (props.slug) ? props.slug : slug
         if (shortcode) fetchGrid(shortcode)
-        else state.party.editable = true
+        else appState.party.editable = true
     }, [slug, props.slug])
 
     // Initialize an array of current uncap values for each characters
     useEffect(() => {
         let initialPreviousUncapValues: {[key: number]: number} = {}
-        Object.values(state.grid.characters).map(o => initialPreviousUncapValues[o.position] = o.uncap_level)
+        Object.values(appState.grid.characters).map(o => initialPreviousUncapValues[o.position] = o.uncap_level)
         setPreviousUncapValues(initialPreviousUncapValues)
-    }, [state.grid.characters])
+    }, [appState.grid.characters])
 
     // Methods: Fetching an object from the server
     async function fetchGrid(shortcode: string) {
@@ -77,7 +76,7 @@ const CharacterGrid = (props: Props) => {
         }
         
         // Store the important party and state-keeping values
-        state.party.id = party.id
+        appState.party.id = party.id
 
         setFound(true)
         setLoading(false)
@@ -100,7 +99,7 @@ const CharacterGrid = (props: Props) => {
     function populateCharacters(list: [GridCharacter]) {
         list.forEach((object: GridCharacter) => {
             if (object.position != null)
-                state.grid.characters[object.position] = object
+                appState.grid.characters[object.position] = object
         })
     }
 
@@ -112,7 +111,7 @@ const CharacterGrid = (props: Props) => {
             props.createParty()
                 .then(response => {
                     const party = response.data.party
-                    state.party.id = party.id
+                    appState.party.id = party.id
                     setSlug(party.shortcode)
 
                     if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`)
@@ -139,7 +138,7 @@ const CharacterGrid = (props: Props) => {
     }
 
     function storeGridCharacter(gridCharacter: GridCharacter) {
-        state.grid.characters[gridCharacter.position] = gridCharacter
+        appState.grid.characters[gridCharacter.position] = gridCharacter
     }
 
     // Methods: Helpers
@@ -201,7 +200,7 @@ const CharacterGrid = (props: Props) => {
     )
 
     const updateUncapLevel = (position: number, uncapLevel: number) => {
-        state.grid.characters[position].uncap_level = uncapLevel
+        appState.grid.characters[position].uncap_level = uncapLevel
     }
 
     function storePreviousUncapValue(position: number) {
diff --git a/components/Party/index.tsx b/components/Party/index.tsx
index 90fa0e2d..20ccb684 100644
--- a/components/Party/index.tsx
+++ b/components/Party/index.tsx
@@ -9,7 +9,7 @@ import SummonGrid from '~components/SummonGrid'
 import CharacterGrid from '~components/CharacterGrid'
 
 import api from '~utils/api'
-import state from '~utils/state'
+import { appState } from '~utils/appState'
 import { GridType, TeamElement } from '~utils/enums'
 
 import './index.scss'
@@ -30,7 +30,7 @@ const Party = (props: Props) => {
     } : {}
 
     // Set up states
-    const { party } = useSnapshot(state)
+    const { party } = useSnapshot(appState)
     const [currentTab, setCurrentTab] = useState<GridType>(GridType.Weapon)
 
     // Methods: Creating a new party
@@ -47,7 +47,7 @@ const Party = (props: Props) => {
 
     // Methods: Updating the party's extra flag
     function checkboxChanged(event: React.ChangeEvent<HTMLInputElement>) {
-        state.party.extra = event.target.checked
+        appState.party.extra = event.target.checked
 
         if (party.id) {
             api.endpoints.parties.update(party.id, {
diff --git a/components/PartySegmentedControl/index.tsx b/components/PartySegmentedControl/index.tsx
index ef448d68..29ff5ad4 100644
--- a/components/PartySegmentedControl/index.tsx
+++ b/components/PartySegmentedControl/index.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import './index.scss'
 
-import state from '~utils/state'
+import { appState } from '~utils/appState'
 
 import SegmentedControl from '~components/SegmentedControl'
 import Segment from '~components/Segment'
@@ -17,7 +17,7 @@ interface Props {
 }
 
 const PartySegmentedControl = (props: Props) => {
-    const { party } = useSnapshot(state)
+    const { party } = useSnapshot(appState)
 
     function getElement() {
         switch(party.element) {
diff --git a/components/SearchModal/index.tsx b/components/SearchModal/index.tsx
index a9b59964..4d470fc7 100644
--- a/components/SearchModal/index.tsx
+++ b/components/SearchModal/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useSnapshot } from 'valtio'
 
-import state from '~utils/state'
+import { appState } from '~utils/appState'
 import api from '~utils/api'
 
 import * as Dialog from '@radix-ui/react-dialog'
@@ -22,7 +22,7 @@ interface Props {
 }
 
 const SearchModal = (props: Props) => {
-    let { grid } = useSnapshot(state)
+    let { grid } = useSnapshot(appState)
 
     let searchInput = React.createRef<HTMLInputElement>()
 
diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx
index ce53a204..9f9231ab 100644
--- a/components/SummonGrid/index.tsx
+++ b/components/SummonGrid/index.tsx
@@ -10,7 +10,7 @@ import SummonUnit from '~components/SummonUnit'
 import ExtraSummons from '~components/ExtraSummons'
 
 import api from '~utils/api'
-import state from '~utils/state'
+import { appState } from '~utils/appState'
 
 import './index.scss'
 
@@ -34,7 +34,7 @@ const SummonGrid = (props: Props) => {
     } : {}
 
     // Set up state for view management
-    const { party, grid } = useSnapshot(state)
+    const { party, grid } = useSnapshot(appState)
 
     const [slug, setSlug] = useState()
     const [found, setFound] = useState(false)
@@ -47,23 +47,23 @@ const SummonGrid = (props: Props) => {
     useEffect(() => {
         const shortcode = (props.slug) ? props.slug : slug
         if (shortcode) fetchGrid(shortcode)
-        else state.party.editable = true
+        else appState.party.editable = true
     }, [slug, props.slug])
 
     // Initialize an array of current uncap values for each summon
     useEffect(() => {
         let initialPreviousUncapValues: {[key: number]: number} = {}
 
-        if (state.grid.summons.mainSummon) 
-            initialPreviousUncapValues[-1] = state.grid.summons.mainSummon.uncap_level
+        if (appState.grid.summons.mainSummon) 
+            initialPreviousUncapValues[-1] = appState.grid.summons.mainSummon.uncap_level
 
-        if (state.grid.summons.friendSummon) 
-            initialPreviousUncapValues[6] = state.grid.summons.friendSummon.uncap_level
+        if (appState.grid.summons.friendSummon) 
+            initialPreviousUncapValues[6] = appState.grid.summons.friendSummon.uncap_level
 
-        Object.values(state.grid.summons.allSummons).map(o => initialPreviousUncapValues[o.position] = o.uncap_level)
+        Object.values(appState.grid.summons.allSummons).map(o => initialPreviousUncapValues[o.position] = o.uncap_level)
 
         setPreviousUncapValues(initialPreviousUncapValues)
-    }, [state.grid.summons.mainSummon, state.grid.summons.friendSummon, state.grid.summons.allSummons])
+    }, [appState.grid.summons.mainSummon, appState.grid.summons.friendSummon, appState.grid.summons.allSummons])
 
 
     // Methods: Fetching an object from the server
@@ -82,11 +82,11 @@ const SummonGrid = (props: Props) => {
         const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
 
         if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
-            state.party.editable = true
+            appState.party.editable = true
         }
         
         // Store the important party and state-keeping values
-        state.party.id = party.id
+        appState.party.id = party.id
 
         setFound(true)
         setLoading(false)
@@ -109,11 +109,11 @@ const SummonGrid = (props: Props) => {
     function populateSummons(list: [GridSummon]) {
         list.forEach((gridObject: GridSummon) => {
             if (gridObject.main)
-                state.grid.summons.mainSummon = gridObject
+                appState.grid.summons.mainSummon = gridObject
             else if (gridObject.friend)
-                state.grid.summons.friendSummon = gridObject
+                appState.grid.summons.friendSummon = gridObject
             else if (!gridObject.main && !gridObject.friend && gridObject.position != null)
-                state.grid.summons.allSummons[gridObject.position] = gridObject
+                appState.grid.summons.allSummons[gridObject.position] = gridObject
         })
     }
 
@@ -125,7 +125,7 @@ const SummonGrid = (props: Props) => {
             props.createParty()
                 .then(response => {
                     const party = response.data.party
-                    state.party.id = party.id
+                    appState.party.id = party.id
                     setSlug(party.shortcode)
 
                     if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`)
@@ -158,11 +158,11 @@ const SummonGrid = (props: Props) => {
 
     function storeGridSummon(gridSummon: GridSummon) {
         if (gridSummon.position == -1)
-            state.grid.summons.mainSummon = gridSummon
+            appState.grid.summons.mainSummon = gridSummon
         else if (gridSummon.position == 6)
-            state.grid.summons.friendSummon = gridSummon
+            appState.grid.summons.friendSummon = gridSummon
         else
-            state.grid.summons.allSummons[gridSummon.position] = gridSummon
+            appState.grid.summons.allSummons[gridSummon.position] = gridSummon
     }
 
     // Methods: Updating uncap level
@@ -207,21 +207,21 @@ const SummonGrid = (props: Props) => {
     )
 
     const updateUncapLevel = (position: number, uncapLevel: number) => {
-        if (state.grid.summons.mainSummon && position == -1)
-            state.grid.summons.mainSummon.uncap_level = uncapLevel
-        else if (state.grid.summons.friendSummon && position == 6) 
-            state.grid.summons.friendSummon.uncap_level = uncapLevel
+        if (appState.grid.summons.mainSummon && position == -1)
+            appState.grid.summons.mainSummon.uncap_level = uncapLevel
+        else if (appState.grid.summons.friendSummon && position == 6) 
+            appState.grid.summons.friendSummon.uncap_level = uncapLevel
         else
-            state.grid.summons.allSummons[position].uncap_level = uncapLevel
+            appState.grid.summons.allSummons[position].uncap_level = uncapLevel
     }
 
     function storePreviousUncapValue(position: number) {
         // Save the current value in case of an unexpected result
         let newPreviousValues = {...previousUncapValues}
 
-        if (state.grid.summons.mainSummon && position == -1) newPreviousValues[position] = state.grid.summons.mainSummon.uncap_level
-        else if (state.grid.summons.friendSummon && position == 6) newPreviousValues[position] = state.grid.summons.friendSummon.uncap_level 
-        else newPreviousValues[position] = state.grid.summons.allSummons[position].uncap_level
+        if (appState.grid.summons.mainSummon && position == -1) newPreviousValues[position] = appState.grid.summons.mainSummon.uncap_level
+        else if (appState.grid.summons.friendSummon && position == 6) newPreviousValues[position] = appState.grid.summons.friendSummon.uncap_level 
+        else newPreviousValues[position] = appState.grid.summons.allSummons[position].uncap_level
 
         setPreviousUncapValues(newPreviousValues)
     }
diff --git a/components/TopHeader/index.tsx b/components/TopHeader/index.tsx
index fa85365f..596d511c 100644
--- a/components/TopHeader/index.tsx
+++ b/components/TopHeader/index.tsx
@@ -1,13 +1,16 @@
 import React, { useContext, useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
 import { useRouter } from 'next/router'
+import clonedeep from 'lodash.clonedeep'
 
 import AppContext from '~context/AppContext'
+import { appState, initialAppState } from '~utils/appState'
 
 import Header from '~components/Header'
 import Button from '~components/Button'
 import HeaderMenu from '~components/HeaderMenu'
 
+
 const TopHeader = () => {
     const { editable, setEditable, authenticated, setAuthenticated } = useContext(AppContext)
 
diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx
index 238636a1..79893a0c 100644
--- a/components/WeaponGrid/index.tsx
+++ b/components/WeaponGrid/index.tsx
@@ -10,7 +10,7 @@ import WeaponUnit from '~components/WeaponUnit'
 import ExtraWeapons from '~components/ExtraWeapons'
 
 import api from '~utils/api'
-import state from '~utils/state'
+import { appState } from '~utils/appState'
 
 import './index.scss'
 
@@ -34,7 +34,7 @@ const WeaponGrid = (props: Props) => {
     } : {}
 
     // Set up state for view management
-    const { party, grid } = useSnapshot(state)
+    const { party, grid } = useSnapshot(appState)
 
     const [slug, setSlug] = useState()
     const [found, setFound] = useState(false)
@@ -47,20 +47,20 @@ const WeaponGrid = (props: Props) => {
     useEffect(() => {
         const shortcode = (props.slug) ? props.slug : slug
         if (shortcode) fetchGrid(shortcode)
-        else state.party.editable = true
+        else appState.party.editable = true
     }, [slug, props.slug])
 
     // Initialize an array of current uncap values for each weapon
     useEffect(() => {
         let initialPreviousUncapValues: {[key: number]: number} = {}
 
-        if (state.grid.weapons.mainWeapon) 
-            initialPreviousUncapValues[-1] = state.grid.weapons.mainWeapon.uncap_level
+        if (appState.grid.weapons.mainWeapon) 
+            initialPreviousUncapValues[-1] = appState.grid.weapons.mainWeapon.uncap_level
 
-        Object.values(state.grid.weapons.allWeapons).map(o => initialPreviousUncapValues[o.position] = o.uncap_level)
+        Object.values(appState.grid.weapons.allWeapons).map(o => initialPreviousUncapValues[o.position] = o.uncap_level)
 
         setPreviousUncapValues(initialPreviousUncapValues)
-    }, [state.grid.weapons.mainWeapon, state.grid.weapons.allWeapons])
+    }, [appState.grid.weapons.mainWeapon, appState.grid.weapons.allWeapons])
 
     // Methods: Fetching an object from the server
     async function fetchGrid(shortcode: string) {
@@ -78,12 +78,12 @@ const WeaponGrid = (props: Props) => {
         const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
 
         if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
-            state.party.editable = true
+            appState.party.editable = true
         }
         
         // Store the important party and state-keeping values
-        state.party.id = party.id
-        state.party.extra = party.is_extra
+        appState.party.id = party.id
+        appState.party.extra = party.is_extra
 
         setFound(true)
         setLoading(false)
@@ -106,10 +106,10 @@ const WeaponGrid = (props: Props) => {
     function populateWeapons(list: [GridWeapon]) {
         list.forEach((gridObject: GridWeapon) => {
             if (gridObject.mainhand) {
-                state.grid.weapons.mainWeapon = gridObject
-                state.party.element = gridObject.object.element
+                appState.grid.weapons.mainWeapon = gridObject
+                appState.party.element = gridObject.object.element
             } else if (!gridObject.mainhand && gridObject.position != null) {
-                state.grid.weapons.allWeapons[gridObject.position] = gridObject
+                appState.grid.weapons.allWeapons[gridObject.position] = gridObject
             }
         })
     }
@@ -118,13 +118,13 @@ const WeaponGrid = (props: Props) => {
     function receiveWeaponFromSearch(object: Character | Weapon | Summon, position: number) {
         const weapon = object as Weapon
         if (position == 1)
-            state.party.element = weapon.element
+            appState.party.element = weapon.element
 
         if (!party.id) {
             props.createParty(party.extra)
                 .then(response => {
                     const party = response.data.party
-                    state.party.id = party.id
+                    appState.party.id = party.id
                     setSlug(party.shortcode)
 
                     if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`)
@@ -156,11 +156,11 @@ const WeaponGrid = (props: Props) => {
 
     function storeGridWeapon(gridWeapon: GridWeapon) {
         if (gridWeapon.position == -1) {
-            state.grid.weapons.mainWeapon = gridWeapon
-            state.party.element = gridWeapon.object.element
+            appState.grid.weapons.mainWeapon = gridWeapon
+            appState.party.element = gridWeapon.object.element
         } else {
             // Store the grid unit at the correct position
-            state.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon
+            appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon
         }
     }
 
@@ -206,17 +206,17 @@ const WeaponGrid = (props: Props) => {
     )
 
     const updateUncapLevel = (position: number, uncapLevel: number) => {
-        if (state.grid.weapons.mainWeapon && position == -1)
-            state.grid.weapons.mainWeapon.uncap_level = uncapLevel
+        if (appState.grid.weapons.mainWeapon && position == -1)
+            appState.grid.weapons.mainWeapon.uncap_level = uncapLevel
         else
-            state.grid.weapons.allWeapons[position].uncap_level = uncapLevel
+            appState.grid.weapons.allWeapons[position].uncap_level = uncapLevel
     }
 
     function storePreviousUncapValue(position: number) {
         // Save the current value in case of an unexpected result
         let newPreviousValues = {...previousUncapValues}
-        newPreviousValues[position] = (state.grid.weapons.mainWeapon && position == -1) ? 
-            state.grid.weapons.mainWeapon.uncap_level : state.grid.weapons.allWeapons[position].uncap_level
+        newPreviousValues[position] = (appState.grid.weapons.mainWeapon && position == -1) ? 
+            appState.grid.weapons.mainWeapon.uncap_level : appState.grid.weapons.allWeapons[position].uncap_level
         setPreviousUncapValues(newPreviousValues)
     }
 
@@ -252,7 +252,7 @@ const WeaponGrid = (props: Props) => {
 
     const extraGridElement = (
         <ExtraWeapons 
-            grid={state.grid.weapons.allWeapons} 
+            grid={appState.grid.weapons.allWeapons} 
             editable={party.editable} 
             offset={numWeapons}
             updateObject={receiveWeaponFromSearch}