diff --git a/webAO/client.ts b/webAO/client.ts
index ebfb36f5..301fdfab 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -124,6 +124,7 @@ class Client extends EventEmitter {
     chars: any;
     emotes: any;
     evidences: any;
+    area: number;
     areas: any;
     musics: any;
     musics_time: boolean;
@@ -183,6 +184,7 @@ class Client extends EventEmitter {
         this.chars = [];
         this.emotes = [];
         this.evidences = [];
+        this.area = 0;
         this.areas = [];
         this.musics = [];
         this.musics_time = false;
diff --git a/webAO/dom/areaClick.ts b/webAO/dom/areaClick.ts
index 1b0fe521..e217c2c6 100644
--- a/webAO/dom/areaClick.ts
+++ b/webAO/dom/areaClick.ts
@@ -1,15 +1,18 @@
 import { client } from '../client'
+import { updatePlayerAreas } from './updatePlayerAreas'
 /**
  * Triggered when an item on the area list is clicked.
  * @param {HTMLElement} el
  */
 export function area_click(el: HTMLElement) {
-    const area = client.areas[el.id.substr(4)].name;
+    const area = client.areas[el.id.substring(4)].name;
     client.sender.sendMusicChange(area);
 
     const areaHr = document.createElement("div");
     areaHr.className = "hrtext";
     areaHr.textContent = `switched to ${el.textContent}`;
     document.getElementById("client_log")!.appendChild(areaHr);
+    client.area = Number(el.id.substring(4));
+    updatePlayerAreas(client.area);
 }
 window.area_click = area_click;
\ No newline at end of file
diff --git a/webAO/dom/updatePlayerAreas.ts b/webAO/dom/updatePlayerAreas.ts
new file mode 100644
index 00000000..d2ec0763
--- /dev/null
+++ b/webAO/dom/updatePlayerAreas.ts
@@ -0,0 +1,16 @@
+import { client } from '../client'
+import { area_click } from './areaClick';
+/**
+ * Triggered when someone switches areas
+ * @param {Number} ownarea
+ */
+export function updatePlayerAreas(ownarea: number) {
+    for (let i=0; i < client.areas.length; i++) {
+        if (i===ownarea)
+            for (let classelement of Array.from(document.getElementsByClassName(`area${i}`) as HTMLCollectionOf<HTMLElement>))
+                classelement.style.display = "";
+        else
+            for (let classelement of Array.from(document.getElementsByClassName(`area${i}`) as HTMLCollectionOf<HTMLElement>))
+                classelement.style.display = "none";
+    } 
+}
\ No newline at end of file
diff --git a/webAO/packets/handlers/handlePR.ts b/webAO/packets/handlers/handlePR.ts
index 00731403..cfb2d1e9 100644
--- a/webAO/packets/handlers/handlePR.ts
+++ b/webAO/packets/handlers/handlePR.ts
@@ -5,6 +5,7 @@ function addPlayer(playerID: number) {
     const list = <HTMLTableElement>document.getElementById("client_playerlist");
     const playerRow = list.insertRow();
     playerRow.id = `client_playerlist_entry${playerID}`;
+    playerRow.className = `area0`;
 
     const imgCell = playerRow.insertCell(0);
     const img = document.createElement('img');
diff --git a/webAO/packets/handlers/handlePU.ts b/webAO/packets/handlers/handlePU.ts
index 6db644b6..e2fd4d71 100644
--- a/webAO/packets/handlers/handlePU.ts
+++ b/webAO/packets/handlers/handlePU.ts
@@ -1,4 +1,6 @@
+import { client } from "../../client";
 import { getCharIcon } from "../../client/handleCharacterInfo";
+import { updatePlayerAreas } from '../../dom/updatePlayerAreas'
 
 /**
   * Handles a playerlist update
@@ -23,6 +25,9 @@ export const handlePU = (args: string[]) => {
             const showName = <HTMLElement>playerRow.childNodes[2];
             showName.innerText = data;
             break;
+        case 3:
+            playerRow.className = `area${data}`;
+            updatePlayerAreas(client.area);
         default:
             break;
     }
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 15255001..6737953a 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -564,6 +564,7 @@
 }
 
 #client_playerlist {
+	width: 100%;
 	overflow-y: scroll;
 }