diff --git a/example/local-only-multi-user-3d-web-experience/client/src/LocalAvatarClient.ts b/example/local-only-multi-user-3d-web-experience/client/src/LocalAvatarClient.ts
index 90561192..7159999f 100644
--- a/example/local-only-multi-user-3d-web-experience/client/src/LocalAvatarClient.ts
+++ b/example/local-only-multi-user-3d-web-experience/client/src/LocalAvatarClient.ts
@@ -46,6 +46,7 @@ const characterDescription: CharacterDescription = {
 
 export class LocalAvatarClient {
   public element: HTMLDivElement;
+  private canvasHolder: HTMLDivElement;
 
   private readonly scene = new Scene();
   private readonly audioListener = new AudioListener();
@@ -83,8 +84,14 @@ export class LocalAvatarClient {
       }
     });
 
+    this.canvasHolder = document.createElement("div");
+    this.canvasHolder.style.position = "absolute";
+    this.canvasHolder.style.width = "100%";
+    this.canvasHolder.style.height = "100%";
+    this.element.appendChild(this.canvasHolder);
+
     this.cameraManager = new CameraManager(
-      this.element,
+      this.canvasHolder,
       this.collisionsManager,
       Math.PI / 2,
       Math.PI / 2,
diff --git a/example/multi-user-3d-web-experience/client/src/index.ts b/example/multi-user-3d-web-experience/client/src/index.ts
index e305254e..796a135e 100644
--- a/example/multi-user-3d-web-experience/client/src/index.ts
+++ b/example/multi-user-3d-web-experience/client/src/index.ts
@@ -27,6 +27,9 @@ const app = new Networked3dWebExperienceClient(holder, {
   skyboxHdrJpgUrl: hdrJpgUrl,
   mmlDocuments: [{ url: `${protocol}//${host}/mml-documents/example-mml.html` }],
   environmentConfiguration: {},
+  avatarConfiguration: {
+    availableAvatars: [],
+  },
 });
 
 app.update();
diff --git a/example/multi-user-3d-web-experience/server/src/BasicUserAuthenticator.ts b/example/multi-user-3d-web-experience/server/src/BasicUserAuthenticator.ts
index 5cdc86eb..c11dd7e7 100644
--- a/example/multi-user-3d-web-experience/server/src/BasicUserAuthenticator.ts
+++ b/example/multi-user-3d-web-experience/server/src/BasicUserAuthenticator.ts
@@ -93,12 +93,28 @@ export class BasicUserAuthenticator {
   }
 
   public onClientUserIdentityUpdate(clientId: number, msg: UserIdentity): UserData | null {
-    // This implementation does not allow updating user data after initial connect.
-
     // To allow updating user data after initial connect, return the UserData object that reflects the requested change.
-
     // Returning null will not update the user data.
-    return null;
+
+    const user = this.usersByClientId.get(clientId);
+
+    if (!user) {
+      console.error(`onClientUserIdentityUpdate - unknown clientId ${clientId}`);
+      return null;
+    }
+
+    if (!user.userData) {
+      console.error(`onClientUserIdentityUpdate - no user data for clientId ${clientId}`);
+      return null;
+    }
+
+    const newUserData: UserData = {
+      username: msg.username ?? user.userData.username,
+      characterDescription: msg.characterDescription ?? user.userData.characterDescription,
+    };
+
+    this.usersByClientId.set(clientId, { ...user, userData: newUserData });
+    return newUserData;
   }
 
   public onClientDisconnect(clientId: number) {
diff --git a/example/multi-user-3d-web-experience/server/src/index.ts b/example/multi-user-3d-web-experience/server/src/index.ts
index 67c3d2d3..616147f7 100644
--- a/example/multi-user-3d-web-experience/server/src/index.ts
+++ b/example/multi-user-3d-web-experience/server/src/index.ts
@@ -32,6 +32,7 @@ const characterDescription: CharacterDescription = {
   // </m-character>
   // `,
 };
+
 const userAuthenticator = new BasicUserAuthenticator(characterDescription, {
   /*
    This option allows sessions that are reconnecting from a previous run of the server to connect even if the present a
diff --git a/package-lock.json b/package-lock.json
index ded0939e..9afca83e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1239,9 +1239,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.1.tgz",
-      "integrity": "sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
       "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
@@ -2227,6 +2227,10 @@
       "resolved": "packages/3d-web-avatar-editor-ui",
       "link": true
     },
+    "node_modules/@mml-io/3d-web-avatar-selection-ui": {
+      "resolved": "packages/3d-web-avatar-selection-ui",
+      "link": true
+    },
     "node_modules/@mml-io/3d-web-client-core": {
       "resolved": "packages/3d-web-client-core",
       "link": true
@@ -2370,9 +2374,9 @@
       }
     },
     "node_modules/@mml-io/observable-dom/node_modules/https-proxy-agent": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
-      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
       "dependencies": {
         "agent-base": "^7.0.2",
         "debug": "4"
@@ -2597,9 +2601,9 @@
       }
     },
     "node_modules/@npmcli/agent/node_modules/https-proxy-agent": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
-      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
       "dev": true,
       "dependencies": {
         "agent-base": "^7.0.2",
@@ -2610,9 +2614,9 @@
       }
     },
     "node_modules/@npmcli/agent/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
+      "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
       "dev": true,
       "engines": {
         "node": "14 || >=16.14"
@@ -2659,9 +2663,9 @@
       }
     },
     "node_modules/@npmcli/git/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
+      "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
       "dev": true,
       "engines": {
         "node": "14 || >=16.14"
@@ -3863,9 +3867,9 @@
       "dev": true
     },
     "node_modules/@types/webxr": {
-      "version": "0.5.18",
-      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.18.tgz",
-      "integrity": "sha512-EM8P5wtYMPUlFbDgKfNoPc5PyhgZvwXz0Wf9gYBfJOpTI8AtPzoLJlvw/D9TmIW/LPLTmwMxWI0axBs3hjLSLg==",
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.19.tgz",
+      "integrity": "sha512-4hxA+NwohSgImdTSlPXEqDqqFktNgmTXQ05ff1uWam05tNGroCMp4G+4XVl6qWm1p7GQ/9oD41kAYsSssF6Mzw==",
       "dev": true
     },
     "node_modules/@types/ws": {
@@ -5041,9 +5045,9 @@
       }
     },
     "node_modules/cacache/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
+      "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
       "dev": true,
       "engines": {
         "node": "14 || >=16.14"
@@ -5115,9 +5119,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001638",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001638.tgz",
-      "integrity": "sha512-5SuJUJ7cZnhPpeLHaH0c/HPAnAHZvS6ElWyHK9GSIbVOQABLzowiI2pjmpvZ1WEbkyz46iFd4UXlOHR5SqgfMQ==",
+      "version": "1.0.30001639",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001639.tgz",
+      "integrity": "sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==",
       "funding": [
         {
           "type": "opencollective",
@@ -6190,9 +6194,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.812",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.812.tgz",
-      "integrity": "sha512-7L8fC2Ey/b6SePDFKR2zHAy4mbdp1/38Yk5TsARO66W3hC5KEaeKMMHoxwtuH+jcu2AYLSn9QX04i95t6Fl1Hg=="
+      "version": "1.4.815",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz",
+      "integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg=="
     },
     "node_modules/emittery": {
       "version": "0.13.1",
@@ -9155,9 +9159,9 @@
       }
     },
     "node_modules/istanbul-lib-instrument": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.2.tgz",
-      "integrity": "sha512-1WUsZ9R1lA0HtBSohTkm39WTPlNKSJ5iFk7UwqXkBLoHQT+hfqPsfsTDVuZdKGaBwn7din9bS7SsnoAr943hvw==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz",
+      "integrity": "sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.23.9",
@@ -11963,9 +11967,9 @@
       }
     },
     "node_modules/npm-pick-manifest/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
+      "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
       "dev": true,
       "engines": {
         "node": "14 || >=16.14"
@@ -12931,9 +12935,9 @@
       }
     },
     "node_modules/pacote/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
+      "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
       "dev": true,
       "engines": {
         "node": "14 || >=16.14"
@@ -13199,9 +13203,9 @@
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
+      "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
       "dev": true,
       "engines": {
         "node": "14 || >=16.14"
@@ -14763,14 +14767,14 @@
       }
     },
     "node_modules/socks-proxy-agent": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.3.tgz",
-      "integrity": "sha512-VNegTZKhuGq5vSD6XNKlbqWhyt/40CgoEw8XxD6dhnm8Jq9IEa3nIa4HwnM8XOqU0CdB0BwWVXusqiFXfHB3+A==",
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz",
+      "integrity": "sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==",
       "dev": true,
       "dependencies": {
         "agent-base": "^7.1.1",
         "debug": "^4.3.4",
-        "socks": "^2.7.1"
+        "socks": "^2.8.3"
       },
       "engines": {
         "node": ">= 14"
@@ -17060,6 +17064,26 @@
         "esbuild-css-modules-plugin": "3.1.0"
       }
     },
+    "packages/3d-web-avatar-selection-ui": {
+      "name": "@mml-io/3d-web-avatar-selection-ui",
+      "version": "0.17.0",
+      "dependencies": {
+        "express": "4.19.2",
+        "express-ws": "5.0.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "ws": "^8.16.0"
+      },
+      "devDependencies": {
+        "@types/express": "^4.17.21",
+        "@types/express-ws": "^3.0.4",
+        "@types/node": "^20.12.7",
+        "@types/react": "^18.2.79",
+        "@types/react-dom": "^18.2.25",
+        "@types/ws": "^8.5.10",
+        "esbuild-css-modules-plugin": "3.1.0"
+      }
+    },
     "packages/3d-web-client-core": {
       "name": "@mml-io/3d-web-client-core",
       "version": "0.17.0",
@@ -17085,6 +17109,7 @@
       "name": "@mml-io/3d-web-experience-client",
       "version": "0.17.0",
       "dependencies": {
+        "@mml-io/3d-web-avatar-selection-ui": "^0.17.0",
         "@mml-io/3d-web-client-core": "^0.17.0",
         "@mml-io/3d-web-text-chat": "^0.17.0",
         "@mml-io/3d-web-user-networking": "^0.17.0",
diff --git a/packages/3d-web-avatar-selection-ui/build.ts b/packages/3d-web-avatar-selection-ui/build.ts
new file mode 100644
index 00000000..6e3aa3be
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/build.ts
@@ -0,0 +1,15 @@
+import cssModulesPlugin from "esbuild-css-modules-plugin";
+
+import { handleLibraryBuild } from "../../utils/build-library";
+
+handleLibraryBuild({
+  plugins: [
+    cssModulesPlugin({
+      inject: true,
+      emitDeclarationFile: true,
+    }),
+  ],
+  loader: {
+    ".svg": "text",
+  },
+});
diff --git a/packages/3d-web-avatar-selection-ui/package.json b/packages/3d-web-avatar-selection-ui/package.json
new file mode 100644
index 00000000..24d92512
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@mml-io/3d-web-avatar-selection-ui",
+  "version": "0.17.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "type": "module",
+  "files": [
+    "/build"
+  ],
+  "scripts": {
+    "build": "tsx ./build.ts --build",
+    "iterate": "tsx ./build.ts --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --max-warnings 0",
+    "lint-fix": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --fix"
+  },
+  "dependencies": {
+    "express": "4.19.2",
+    "express-ws": "5.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ws": "^8.16.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/express-ws": "^3.0.4",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@types/ws": "^8.5.10",
+    "esbuild-css-modules-plugin": "3.1.0"
+  }
+}
diff --git a/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/AvatarSelectionUI.tsx b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/AvatarSelectionUI.tsx
new file mode 100644
index 00000000..413b7b85
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/AvatarSelectionUI.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import { createRef, forwardRef } from "react";
+import { flushSync } from "react-dom";
+import { createRoot, Root } from "react-dom/client";
+
+import { AvatarType } from "./AvatarType";
+import { AvatarSelectionUIComponent } from "./components/AvatarPanel/AvatarSectionUIComponent";
+
+const ForwardedAvatarSelectionUIComponent = forwardRef(AvatarSelectionUIComponent);
+
+export type CustomAvatar = AvatarType & {
+  isCustomAvatar?: boolean;
+};
+
+export type AvatarSelectionUIProps = {
+  holderElement: HTMLElement;
+  clientId: number;
+  visibleByDefault?: boolean;
+  availableAvatars: Array<AvatarType>;
+  sendMessageToServerMethod: (avatar: CustomAvatar) => void;
+  enableCustomAvatar?: boolean;
+};
+
+export class AvatarSelectionUI {
+  private root: Root;
+  private appRef: React.RefObject<any> = createRef<any>();
+
+  private wrapper = document.createElement("div");
+
+  constructor(private config: AvatarSelectionUIProps) {
+    this.config.holderElement.appendChild(this.wrapper);
+    this.root = createRoot(this.wrapper);
+  }
+
+  private onUpdateUserAvatar = (avatar: CustomAvatar) => {
+    this.config.sendMessageToServerMethod(avatar);
+  };
+
+  init() {
+    flushSync(() =>
+      this.root.render(
+        <ForwardedAvatarSelectionUIComponent
+          ref={this.appRef}
+          onUpdateUserAvatar={this.onUpdateUserAvatar}
+          visibleByDefault={false}
+          availableAvatars={this.config.availableAvatars}
+          enableCustomAvatar={this.config.enableCustomAvatar}
+        />,
+      ),
+    );
+  }
+}
diff --git a/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/AvatarType.ts b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/AvatarType.ts
new file mode 100644
index 00000000..7e4b2b1e
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/AvatarType.ts
@@ -0,0 +1,21 @@
+export type AvatarType = {
+  thumbnailUrl?: string;
+  name?: string;
+  isDefaultAvatar?: boolean;
+} & (
+  | {
+      meshFileUrl: string;
+      mmlCharacterString?: null;
+      mmlCharacterUrl?: null;
+    }
+  | {
+      meshFileUrl?: null;
+      mmlCharacterString: string;
+      mmlCharacterUrl?: null;
+    }
+  | {
+      meshFileUrl?: null;
+      mmlCharacterString?: null;
+      mmlCharacterUrl: string;
+    }
+);
diff --git a/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/components/AvatarPanel/AvatarSectionUIComponent.tsx b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/components/AvatarPanel/AvatarSectionUIComponent.tsx
new file mode 100644
index 00000000..cd4cfd00
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/components/AvatarPanel/AvatarSectionUIComponent.tsx
@@ -0,0 +1,212 @@
+import React, {
+  ForwardRefRenderFunction,
+  KeyboardEvent,
+  MouseEvent,
+  useRef,
+  useState,
+} from "react";
+
+import { CustomAvatar } from "../../AvatarSelectionUI";
+import { AvatarType } from "../../AvatarType";
+import AvatarIcon from "../../icons/Avatar.svg";
+
+import styles from "./AvatarSelectionUIComponent.module.css";
+
+type AvatarSelectionUIProps = {
+  onUpdateUserAvatar: (avatar: AvatarType) => void;
+  visibleByDefault?: boolean;
+  availableAvatars: AvatarType[];
+  enableCustomAvatar?: boolean;
+};
+
+enum CustomAvatarType {
+  meshFileUrl,
+  mmlUrl,
+  mml,
+}
+
+function SelectedPill() {
+  return <span className={styles.selectedPill}>Selected</span>;
+}
+
+export const AvatarSelectionUIComponent: ForwardRefRenderFunction<any, AvatarSelectionUIProps> = (
+  props: AvatarSelectionUIProps,
+) => {
+  const visibleByDefault: boolean = props.visibleByDefault ?? false;
+  const [isVisible, setIsVisible] = useState<boolean>(visibleByDefault);
+  const [selectedAvatar, setSelectedAvatar] = useState<CustomAvatar | undefined>(undefined);
+  const [customAvatarType, setCustomAvatarType] = useState<CustomAvatarType>(
+    CustomAvatarType.mmlUrl,
+  );
+  const [customAvatarValue, setCustomAvatarValue] = useState<string>("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleRootClick = (e: MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  const selectAvatar = (avatar: CustomAvatar) => {
+    setSelectedAvatar(avatar);
+    props.onUpdateUserAvatar(avatar);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setCustomAvatarValue(e.target.value);
+  };
+
+  const addCustomAvatar = () => {
+    if (!customAvatarValue) {
+      return;
+    }
+
+    const newSelectedAvatar = {
+      mmlCharacterString: customAvatarType === CustomAvatarType.mml ? customAvatarValue : undefined,
+      mmlCharacterUrl: customAvatarType === CustomAvatarType.mmlUrl ? customAvatarValue : undefined,
+      meshFileUrl:
+        customAvatarType === CustomAvatarType.meshFileUrl ? customAvatarValue : undefined,
+      isCustomAvatar: true,
+    } as CustomAvatar;
+
+    setSelectedAvatar(newSelectedAvatar);
+    props.onUpdateUserAvatar(newSelectedAvatar);
+  };
+
+  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    e.stopPropagation();
+  };
+
+  const handleTypeSwitch = (type: CustomAvatarType) => {
+    setCustomAvatarType(type);
+    setCustomAvatarValue("");
+  };
+
+  const getPlaceholderByType = (type: CustomAvatarType) => {
+    switch (type) {
+      case CustomAvatarType.meshFileUrl:
+        return "https://.../avatar.glb";
+      case CustomAvatarType.mmlUrl:
+        return "https://.../avatar.html";
+      case CustomAvatarType.mml:
+        return '<m-character src="https://link-to-avatar">\n</m-character';
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.menuButton} onClick={handleRootClick}>
+        {!isVisible && (
+          <div className={styles.openTab} onClick={() => setIsVisible(true)}>
+            <img src={`data:image/svg+xml;utf8,${encodeURIComponent(AvatarIcon)}`} />
+          </div>
+        )}
+        {isVisible && (
+          <button className={styles.closeButton} onClick={(e) => setIsVisible(false)}>
+            X
+          </button>
+        )}
+      </div>
+      {isVisible && (
+        <div className={`${styles.avatarSelectionContainer}`}>
+          {!!props.availableAvatars.length && (
+            <div className={styles.avatarSelectionUi}>
+              <div className={styles.avatarSelectionUiHeader}>
+                <h2>Choose your avatar</h2>
+              </div>
+              <div className={styles.avatarSelectionUiContent}>
+                {props.availableAvatars.map((avatar, index) => {
+                  const isSelected =
+                    !selectedAvatar?.isCustomAvatar &&
+                    ((selectedAvatar?.meshFileUrl &&
+                      selectedAvatar?.meshFileUrl === avatar.meshFileUrl) ||
+                      (selectedAvatar?.mmlCharacterUrl &&
+                        selectedAvatar?.mmlCharacterUrl === avatar.mmlCharacterUrl) ||
+                      (selectedAvatar?.mmlCharacterString &&
+                        selectedAvatar?.mmlCharacterString === avatar.mmlCharacterString));
+
+                  return (
+                    <div
+                      key={index}
+                      className={styles.avatarSelectionUiAvatar}
+                      onClick={() => selectAvatar(avatar)}
+                    >
+                      <div className={styles.avatarSelectionUiAvatarImgContainer}>
+                        {isSelected && <SelectedPill />}
+                        {avatar.thumbnailUrl ? (
+                          <img src={avatar.thumbnailUrl} alt={avatar.name} />
+                        ) : (
+                          <div>No Image Available</div>
+                        )}
+                        <p>{avatar.name}</p>
+                        <span className={styles.tooltipText}>{avatar.name}</span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+          {props.enableCustomAvatar && (
+            <div className={styles.customAvatarSection}>
+              {!!props.availableAvatars.length && <hr />}
+              <h2>Custom Avatar Section</h2>
+              <input
+                type="radio"
+                id="html"
+                name="customAvatarType"
+                onChange={() => handleTypeSwitch(CustomAvatarType.mmlUrl)}
+                defaultChecked={customAvatarType === CustomAvatarType.mmlUrl}
+                checked={customAvatarType === CustomAvatarType.mmlUrl}
+              />
+              <label htmlFor="html">MML URL</label>
+              <input
+                type="radio"
+                id="mml"
+                name="customAvatarType"
+                onChange={() => handleTypeSwitch(CustomAvatarType.mml)}
+                defaultChecked={customAvatarType === CustomAvatarType.mml}
+                checked={customAvatarType === CustomAvatarType.mml}
+              />
+              <label htmlFor="mml">MML</label>
+              <input
+                type="radio"
+                id="glb"
+                name="customAvatarType"
+                onChange={() => handleTypeSwitch(CustomAvatarType.meshFileUrl)}
+                defaultChecked={customAvatarType === CustomAvatarType.meshFileUrl}
+                checked={customAvatarType === CustomAvatarType.meshFileUrl}
+              />
+              <label htmlFor="glb">Mesh URL</label>
+              {selectedAvatar?.isCustomAvatar && <SelectedPill />}
+              <div className={styles.customAvatarInputSection}>
+                {customAvatarType === CustomAvatarType.mml ? (
+                  <textarea
+                    ref={textareaRef}
+                    className={styles.customAvatarInput}
+                    value={customAvatarValue}
+                    onChange={handleInputChange}
+                    onKeyDown={handleKeyPress}
+                    placeholder={getPlaceholderByType(customAvatarType)}
+                    rows={4}
+                  />
+                ) : (
+                  <input
+                    ref={inputRef}
+                    className={styles.customAvatarInput}
+                    value={customAvatarValue}
+                    onKeyDown={handleKeyPress}
+                    onChange={handleInputChange}
+                    placeholder={getPlaceholderByType(customAvatarType)}
+                  />
+                )}
+                <button disabled={!customAvatarValue} type="button" onClick={addCustomAvatar}>
+                  Set
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/components/AvatarPanel/AvatarSelectionUIComponent.module.css b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/components/AvatarPanel/AvatarSelectionUIComponent.module.css
new file mode 100644
index 00000000..df9ff026
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/components/AvatarPanel/AvatarSelectionUIComponent.module.css
@@ -0,0 +1,258 @@
+.menuButton {
+  width: 70px;
+  min-height: 70px;
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  z-index: 102;
+  user-select: none;
+}
+
+.closeButton {
+  background-color: rgba(0, 0, 0, 0.8);
+  font-family: "arial black";
+  color: #ffffff90;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.21);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+}
+
+.openTab {
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 50%;
+  width: 42px;
+  height: 42px;
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.21);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+}
+
+.openTab img {
+  filter: invert(60%);
+  width: 35px;
+  height: 35px;
+  transition: all 0.3s ease-in-out;
+  position: relative;
+  top: 3px;
+  left: 4px;
+  transform: scale(0.7);
+}
+
+.avatarSelectionContainer {
+  position: fixed;
+  top: 11px;
+  right: 60px;
+  width: 30%;
+  min-width: 290px;
+  max-width: 720px;
+  padding: 8px;
+  background: #000000b3;
+  border-radius: 8px;
+  font-family: "Helvetica", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+  z-index: 103;
+  user-select: none;
+  padding-bottom: 20px;
+}
+
+.avatarSelectionUi {
+  padding-right: 4px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  max-height: 630px;
+}
+
+.avatarSelectionUi::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 10px;
+}
+
+.avatarSelectionUi::-webkit-scrollbar-thumb {
+  margin: 4px;
+  border-radius: 5px;
+  background-color: #ffffff90;
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+.avatarSelectionUiHeader {
+  color: #ffffff;
+  text-align: center;
+  position: relative;
+}
+
+.avatarSelectionUiHeader h2 {
+  font-size: 20px;
+}
+
+.avatarSelectionUiCloseButton {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+
+.avatarSelectionUiContent {
+  padding: 10px;
+  margin-top: 20px;
+  display: flex;
+  gap: 4%;
+  flex-wrap: wrap;
+  text-overflow: ellipsis;
+}
+
+.avatarSelectionUiAvatar {
+  flex: 0 0 22%;
+  color: #ffffff;
+  text-align: center;
+  cursor: pointer;
+  max-width: 22%;
+}
+
+.avatarSelectionUiAvatarImgContainer {
+  position: relative;
+}
+
+.avatarSelectionUiAvatar p {
+  margin-top: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+}
+
+.tooltipText {
+  position: absolute;
+  transform: translate(-50%, -25%);
+  z-index: 2;
+  color: white;
+  font-size: 12px;
+  background-color: #192733;
+  border-radius: 10px;
+  padding: 10px 15px 10px 15px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  visibility: hidden;
+}
+
+.avatarSelectionUiAvatar p:hover + .tooltipText {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: 1s;
+}
+
+.avatarSelectionUiAvatarImgContainer img,
+.avatarSelectionUiAvatarImgContainer div {
+  aspect-ratio: 1;
+  width: 100%;
+}
+
+.avatarSelectionUiAvatarImgContainer > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #ffffff;
+}
+
+.selectedPill {
+  background-color: #117c11;
+  border-radius: 8px;
+  color: white;
+  font-size: 12px;
+  padding: 4px;
+}
+
+.avatarSelectionUiAvatarImgContainer .selectedPill {
+  position: absolute;
+  z-index: 2;
+  bottom: 28px;
+  right: 2px;
+}
+
+.avatarSelectionUiAvatar img:hover {
+  opacity: 0.7;
+}
+
+.customAvatarSection {
+  justify-content: center;
+  margin-top: 20px;
+  color: white;
+  position: relative;
+}
+
+.customAvatarSection h2 {
+  text-align: center;
+  font-size: 20px;
+}
+
+.customAvatarSection label {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.customAvatarSection input[type="radio"] {
+  transform: scale(1.3);
+  margin-right: 4px;
+}
+
+.customAvatarInputSection {
+  margin-top: 10px;
+  display: flex;
+}
+
+.customAvatarInput {
+  font-family: "Helvetica", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+  font-size: 15px;
+  flex: 1;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  margin-right: 8px;
+  color: #000000;
+  display: inline-block;
+  width: 40%;
+  background-color: #ffffff;
+}
+
+.customAvatarInputSection button {
+  width: 60px;
+  border-radius: 4px;
+  border: 0;
+  color: #ffffff;
+  background-color: #ffffff90;
+  box-sizing: border-box;
+  cursor: pointer;
+  padding: 0;
+  display: block;
+}
+
+.customAvatarInputSection button[disabled] {
+  background-color: #ffffff50;
+}
+
+.sectionHeading {
+  font-size: 19px;
+}
+
+.customAvatarSection .selectedPill {
+  position: relative;
+  top: -2px;
+}
+
+.customAvatarSection hr {
+  width: 80%;
+}
diff --git a/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/helpers.tsx b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/helpers.tsx
new file mode 100644
index 00000000..d6f3cf2a
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/helpers.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+type ClickAwayCallback = (event: MouseEvent | TouchEvent) => void;
+
+export function useClickOutside(cb: ClickAwayCallback) {
+  const ref = useRef<HTMLDivElement>(null);
+  const refCb = useRef<ClickAwayCallback>(cb);
+
+  useLayoutEffect(() => {
+    refCb.current = cb;
+  });
+
+  useEffect(() => {
+    const handler = (e: MouseEvent | TouchEvent) => {
+      const element = ref.current;
+      if (element && !element.contains(e.target as Node)) {
+        refCb.current(e);
+      }
+    };
+
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("touchstart", handler);
+
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("touchstart", handler);
+    };
+  }, []);
+
+  return ref;
+}
diff --git a/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/icons/Avatar.svg b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/icons/Avatar.svg
new file mode 100644
index 00000000..657bb6c3
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/src/avatar-selection-ui/icons/Avatar.svg
@@ -0,0 +1,7 @@
+<svg width="59" height="79" viewBox="0 0 59 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="29.5" cy="8.5" r="8.5" fill="black"/>
+<rect y="20" width="59" height="9" rx="4" fill="black"/>
+<rect x="20" y="29" width="20" height="24" fill="black"/>
+<rect x="20" y="48" width="8" height="31" rx="4" fill="black"/>
+<rect x="32" y="48" width="8" height="31" rx="4" fill="black"/>
+</svg>
diff --git a/packages/3d-web-avatar-selection-ui/src/images.d.ts b/packages/3d-web-avatar-selection-ui/src/images.d.ts
new file mode 100644
index 00000000..5e52f805
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/src/images.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
diff --git a/packages/3d-web-avatar-selection-ui/src/index.ts b/packages/3d-web-avatar-selection-ui/src/index.ts
new file mode 100644
index 00000000..260f1d74
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./avatar-selection-ui/AvatarSelectionUI";
+export { AvatarType } from "./avatar-selection-ui/AvatarType";
diff --git a/packages/3d-web-avatar-selection-ui/src/styles.d.ts b/packages/3d-web-avatar-selection-ui/src/styles.d.ts
new file mode 100644
index 00000000..d10f68a2
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/src/styles.d.ts
@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
diff --git a/packages/3d-web-avatar-selection-ui/tsconfig.json b/packages/3d-web-avatar-selection-ui/tsconfig.json
new file mode 100644
index 00000000..e2abbe6a
--- /dev/null
+++ b/packages/3d-web-avatar-selection-ui/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "module": "esnext",
+    "target": "ES6",
+    "jsx": "react-jsx",
+    "lib": ["es2020", "dom"],
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "allowJs": true,
+    "types": ["node", "jest"],
+    "strictNullChecks": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "downlevelIteration": true,
+    "outDir": "./build",
+    "incremental": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*", "test/**/*", "./build.ts"],
+  "exclude": ["**/build/*", "types-src"]
+}
diff --git a/packages/3d-web-experience-client/package.json b/packages/3d-web-experience-client/package.json
index 31e2ec13..69027b67 100644
--- a/packages/3d-web-experience-client/package.json
+++ b/packages/3d-web-experience-client/package.json
@@ -18,6 +18,7 @@
     "lint-fix": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --fix"
   },
   "dependencies": {
+    "@mml-io/3d-web-avatar-selection-ui": "^0.17.0",
     "@mml-io/3d-web-client-core": "^0.17.0",
     "@mml-io/3d-web-text-chat": "^0.17.0",
     "@mml-io/3d-web-user-networking": "^0.17.0",
diff --git a/packages/3d-web-experience-client/src/Networked3dWebExperienceClient.ts b/packages/3d-web-experience-client/src/Networked3dWebExperienceClient.ts
index 477ce3e3..4767bbc2 100644
--- a/packages/3d-web-experience-client/src/Networked3dWebExperienceClient.ts
+++ b/packages/3d-web-experience-client/src/Networked3dWebExperienceClient.ts
@@ -1,3 +1,4 @@
+import { AvatarSelectionUI, AvatarType } from "@mml-io/3d-web-avatar-selection-ui";
 import {
   AnimationConfig,
   CameraManager,
@@ -30,6 +31,7 @@ import {
   AUTHENTICATION_FAILED_ERROR_TYPE,
   CONNECTION_LIMIT_REACHED_ERROR_TYPE,
   ServerErrorType,
+  USER_UPDATE_MESSAGE_TYPE,
   UserData,
   UserNetworkingClient,
   UserNetworkingClientUpdate,
@@ -63,6 +65,11 @@ type MMLDocumentConfiguration = {
   };
 };
 
+export type AvatarConfiguration = {
+  availableAvatars?: Array<AvatarType>;
+  allowCustomAvatars?: boolean;
+};
+
 export type Networked3dWebExperienceClientConfig = {
   sessionToken: string;
   chatNetworkAddress?: string;
@@ -76,10 +83,12 @@ export type Networked3dWebExperienceClientConfig = {
   skyboxHdrJpgUrl: string;
   enableTweakPane?: boolean;
   updateURLLocation?: boolean;
+  avatarConfiguration?: AvatarConfiguration;
 };
 
 export class Networked3dWebExperienceClient {
   private element: HTMLDivElement;
+  private canvasHolder: HTMLDivElement;
 
   private scene = new Scene();
   private composer: Composer;
@@ -109,6 +118,8 @@ export class Networked3dWebExperienceClient {
   private networkChat: ChatNetworkingClient | null = null;
   private textChatUI: TextChatUI | null = null;
 
+  private avatarSelectionUI: AvatarSelectionUI | null = null;
+
   private voiceChatManager: VoiceChatManager | null = null;
   private readonly latestCharacterObject = {
     characterState: null as null | CharacterState,
@@ -137,7 +148,13 @@ export class Networked3dWebExperienceClient {
       }
     });
 
-    this.cameraManager = new CameraManager(this.element, this.collisionsManager);
+    this.canvasHolder = document.createElement("div");
+    this.canvasHolder.style.position = "absolute";
+    this.canvasHolder.style.width = "100%";
+    this.canvasHolder.style.height = "100%";
+    this.element.appendChild(this.canvasHolder);
+
+    this.cameraManager = new CameraManager(this.canvasHolder, this.collisionsManager);
     this.cameraManager.camera.add(this.audioListener);
 
     this.virtualJoystick = new VirtualJoystick(this.element, {
@@ -156,7 +173,7 @@ export class Networked3dWebExperienceClient {
     });
 
     this.composer.useHDRJPG(this.config.skyboxHdrJpgUrl);
-    this.element.appendChild(this.composer.renderer.domElement);
+    this.canvasHolder.appendChild(this.composer.renderer.domElement);
 
     if (this.config.enableTweakPane !== false) {
       this.tweakPane = new TweakPane(
@@ -272,6 +289,7 @@ export class Networked3dWebExperienceClient {
         */
         this.connectToVoiceChat();
         this.connectToTextChat();
+        this.mountAvatarSelectionUI();
         this.spawnCharacter();
       }
     });
@@ -296,6 +314,7 @@ export class Networked3dWebExperienceClient {
     characterDescription: CharacterDescription;
   } {
     const user = this.userProfiles.get(clientId)!;
+
     if (!user) {
       throw new Error(`Failed to resolve user for clientId ${clientId}`);
     }
@@ -314,12 +333,58 @@ export class Networked3dWebExperienceClient {
     this.characterManager.respawnIfPresent(id);
   }
 
+  private updateUserAvatar(avatar: AvatarType) {
+    if (this.clientId === null) {
+      throw new Error("Client ID not set");
+    }
+    const user = this.userProfiles.get(this.clientId);
+    if (!user) {
+      throw new Error("User not found");
+    }
+
+    const newUser = {
+      ...user,
+      characterDescription: {
+        meshFileUrl: avatar.meshFileUrl ?? undefined,
+        mmlCharacterUrl: avatar.mmlCharacterUrl ?? undefined,
+        mmlCharacterString: avatar.mmlCharacterString ?? undefined,
+      },
+    } as UserData;
+
+    this.userProfiles.set(this.clientId, newUser);
+    this.updateUserProfile(this.clientId, newUser);
+  }
+
   private sendChatMessageToServer(message: string): void {
     this.mmlCompositionScene.onChatMessage(message);
     if (this.clientId === null || this.networkChat === null) return;
     this.networkChat.sendChatMessage(message);
   }
 
+  private sendIdentityUpdateToServer(avatar: AvatarType) {
+    if (!this.clientId) {
+      throw new Error("Client ID not set");
+    }
+
+    const userProfile = this.userProfiles.get(this.clientId);
+
+    if (!userProfile) {
+      throw new Error("User profile not found");
+    }
+
+    this.networkClient.sendMessage({
+      type: USER_UPDATE_MESSAGE_TYPE,
+      userIdentity: {
+        username: userProfile.username,
+        characterDescription: {
+          mmlCharacterString: avatar.mmlCharacterString,
+          mmlCharacterUrl: avatar.mmlCharacterUrl,
+          meshFileUrl: avatar.meshFileUrl,
+        } as CharacterDescription,
+      },
+    });
+  }
+
   private connectToVoiceChat() {
     if (this.clientId === null) return;
 
@@ -379,6 +444,33 @@ export class Networked3dWebExperienceClient {
     }
   }
 
+  private mountAvatarSelectionUI() {
+    if (
+      !this.config.avatarConfiguration?.availableAvatars?.length &&
+      !this.config.avatarConfiguration?.allowCustomAvatars
+    ) {
+      return;
+    }
+
+    if (this.clientId === null) {
+      throw new Error("Client ID not set");
+    }
+    const ownIdentity = this.userProfiles.get(this.clientId);
+    if (!ownIdentity) {
+      throw new Error("Own identity not found");
+    }
+
+    this.avatarSelectionUI = new AvatarSelectionUI({
+      holderElement: this.element,
+      clientId: this.clientId,
+      visibleByDefault: false,
+      availableAvatars: this.config.avatarConfiguration?.availableAvatars ?? [],
+      sendMessageToServerMethod: this.sendIdentityUpdateToServer.bind(this),
+      enableCustomAvatar: this.config.avatarConfiguration?.allowCustomAvatars,
+    });
+    this.avatarSelectionUI.init();
+  }
+
   public update(): void {
     this.timeManager.update();
     this.characterManager.update();
@@ -430,6 +522,7 @@ export class Networked3dWebExperienceClient {
       spawnPosition,
       spawnRotation,
     );
+
     if (cameraPosition !== null) {
       this.cameraManager.camera.position.copy(cameraPosition);
       this.cameraManager.setTarget(
diff --git a/packages/3d-web-user-networking/src/UserNetworkingServer.ts b/packages/3d-web-user-networking/src/UserNetworkingServer.ts
index 4fa74108..38b137e4 100644
--- a/packages/3d-web-user-networking/src/UserNetworkingServer.ts
+++ b/packages/3d-web-user-networking/src/UserNetworkingServer.ts
@@ -302,6 +302,7 @@ export class UserNetworkingServer {
       clientId,
       message.userIdentity,
     );
+
     let resolvedAuthorizedUserData;
     if (authorizedUserData instanceof Promise) {
       resolvedAuthorizedUserData = await authorizedUserData;