diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts
index 584253700..045eda365 100644
--- a/src/client/FlagInput.ts
+++ b/src/client/FlagInput.ts
@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { renderPlayerFlag } from "../core/CustomFlag";
+import { FlagSchema } from "../core/Schemas";
 const flagKey: string = "flag";
 
 @customElement("flag-input")
@@ -41,10 +42,24 @@ export class FlagInput extends LitElement {
     );
   }
 
+  private updateFlag = (ev: Event) => {
+    const e = ev as CustomEvent<{ flag: string }>;
+    if (!FlagSchema.safeParse(e.detail.flag).success) return;
+    if (this.flag !== e.detail.flag) {
+      this.flag = e.detail.flag;
+    }
+  };
+
   connectedCallback() {
     super.connectedCallback();
     this.flag = this.getStoredFlag();
     this.dispatchFlagEvent();
+    window.addEventListener("flag-change", this.updateFlag as EventListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("flag-change", this.updateFlag as EventListener);
   }
 
   createRenderRoot() {