diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab211cfd47..3be3863e74 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@
 - Athena.player.appearance.setHeadBlendData
 - Athena.player.appearance.setSkin
 - Athena.player.appearance.clearSkin
+- Added automatic character document synchronization to WebViews
+--- Available as a prop, or from the "import * as state from '@utility/state';" export
 
 --------------------------------------
 --- Everything Below is Before April 2
diff --git a/src-webviews/src/App.vue b/src-webviews/src/App.vue
index 73d0944237..246969c04b 100644
--- a/src-webviews/src/App.vue
+++ b/src-webviews/src/App.vue
@@ -38,10 +38,13 @@ import { CORE_IMPORTS } from './pages/components';
 import { PLUGIN_IMPORTS } from './plugins/imports';
 import { WebViewEventNames } from '../../src/core/shared/enums/webViewEvents';
 import VueDevMenu from './components/VueDevMenu.vue';
-import './utility/state';
+import { SYSTEM_EVENTS } from '@AthenaShared/enums/system';
+import { Character } from '@AthenaShared/interfaces/character';
+import * as state from '@utility/state';
 
 // Interfaces
 import IPageData from './interfaces/IPageData';
+import WebViewEvents from '@utility/webViewEvents';
 
 const ALL_THE_COMPONENTS = {
     ...CORE_IMPORTS,
@@ -143,8 +146,14 @@ export default defineComponent({
             this.handleSetPages(currentPages, 'pages');
             localStorage.setItem('pages', JSON.stringify(currentPages));
         },
+        setCharacterState(characterData: Character) {
+            state.set('data', characterData);
+            this.state = characterData;
+        },
     },
     mounted() {
+        WebViewEvents.on(SYSTEM_EVENTS.PLAYER_EMIT_STATE, this.setCharacterState);
+
         // What to show when 'alt' is not present.
         // Basically if alt:V isn't running with this page present inside of it.
         if (!('alt' in window)) {
diff --git a/src-webviews/src/utility/state.ts b/src-webviews/src/utility/state.ts
index e3e98a8b1b..762e2d9d20 100644
--- a/src-webviews/src/utility/state.ts
+++ b/src-webviews/src/utility/state.ts
@@ -1,3 +1,5 @@
+import { Character } from '@AthenaShared/interfaces/character';
+
 const state: { [key: string]: any } = {};
 
 /**
@@ -24,3 +26,14 @@ export function set(key: string, value: any) {
 export function get<T>(key: string): T | undefined {
     return state[key];
 }
+
+/**
+ * Returns character data when synchronized from server.
+ *
+ * @export
+ * @template T
+ * @return {*}  {(T | undefined)}
+ */
+export function getCharacterData<T = Character>(): T | undefined {
+    return state['data'];
+}
diff --git a/src/core/server/document/character.ts b/src/core/server/document/character.ts
index a634df4a0c..85c2552d8c 100644
--- a/src/core/server/document/character.ts
+++ b/src/core/server/document/character.ts
@@ -2,6 +2,7 @@ import * as alt from 'alt-server';
 import * as Athena from '@AthenaServer/api';
 import { Character } from '@AthenaShared/interfaces/character';
 import { KnownKeys } from '@AthenaShared/utility/knownKeys';
+import { SYSTEM_EVENTS } from '@AthenaShared/enums/system';
 import Database from '@stuyk/ezmongodb';
 
 export type KeyChangeCallback = (player: alt.Player, newValue: any, oldValue: any) => void;
@@ -206,6 +207,7 @@ export async function set<T = {}, Keys = keyof KnownKeys<Character & T>>(
         );
     }
 
+    Athena.webview.emit(player, SYSTEM_EVENTS.PLAYER_EMIT_STATE, cache[player.id]);
     if (typeof callbacks[typeSafeFieldName] === 'undefined') {
         return;
     }
@@ -248,6 +250,7 @@ export async function setBulk<T = {}, Keys = Partial<Character & T>>(player: alt
 
     cache[player.id] = Object.assign(cache[player.id], fields);
     await Database.updatePartialData(cache[player.id]._id, fields, Athena.database.collections.Characters);
+    Athena.webview.emit(player, SYSTEM_EVENTS.PLAYER_EMIT_STATE, cache[player.id]);
 
     Object.keys(fields).forEach((key) => {
         if (typeof callbacks[key] === 'undefined') {
diff --git a/src/core/server/systems/character.ts b/src/core/server/systems/character.ts
index 1463905400..d20b34f081 100644
--- a/src/core/server/systems/character.ts
+++ b/src/core/server/systems/character.ts
@@ -194,6 +194,7 @@ export async function select(player: alt.Player, character: Character) {
 
         Athena.player.emit.fadeScreenFromBlack(player, 2000);
         Athena.player.events.trigger('selected-character', player);
+        Athena.webview.emit(player, SYSTEM_EVENTS.PLAYER_EMIT_STATE, data);
     }, 500);
 }
 
diff --git a/src/core/shared/enums/system.ts b/src/core/shared/enums/system.ts
index 0f5f8876f6..d0b529650c 100644
--- a/src/core/shared/enums/system.ts
+++ b/src/core/shared/enums/system.ts
@@ -87,6 +87,7 @@ export enum SYSTEM_EVENTS {
     PLAYER_EMIT_TEMP_OBJECT_LERP = 'temp:Object:Lerp',
     PLAYER_EMIT_WHEEL_MENU = 'wheelMenu:Dynamic',
     PLAYER_EMIT_MISSION_TEXT = 'missionText:Create',
+    PLAYER_EMIT_STATE = 'playerEmit:state',
     //
     PLAYER_SET_FREEZE = 'freeze:Set',
     PLAYER_SET_DEATH = 'death:Toggle',