diff --git a/src/clients.ts b/src/clients.ts
index e31b73eb..9e1e6e14 100644
--- a/src/clients.ts
+++ b/src/clients.ts
@@ -21,7 +21,7 @@ export const getClientColors = (clientId: string, appState: AppState) => {
 };
 
 export const getClientInitials = (userName?: string | null) => {
-  if (!userName) {
+  if (!userName?.trim()) {
     return "?";
   }
   return userName.trim()[0].toUpperCase();
diff --git a/src/excalidraw-app/collab/RoomDialog.tsx b/src/excalidraw-app/collab/RoomDialog.tsx
index d4adf977..2c6949aa 100644
--- a/src/excalidraw-app/collab/RoomDialog.tsx
+++ b/src/excalidraw-app/collab/RoomDialog.tsx
@@ -144,7 +144,7 @@ const RoomDialog = ({
               <input
                 type="text"
                 id="username"
-                value={username || ""}
+                value={username.trim() || ""}
                 className="RoomDialog-username TextInput"
                 onChange={(event) => onUsernameChange(event.target.value)}
                 onKeyPress={(event) => event.key === "Enter" && handleClose()}
diff --git a/src/tests/clients.test.ts b/src/tests/clients.test.ts
index f3fd174b..a6a6901b 100644
--- a/src/tests/clients.test.ts
+++ b/src/tests/clients.test.ts
@@ -36,4 +36,9 @@ describe("getClientInitials", () => {
     result = getClientInitials(null);
     expect(result).toBe("?");
   });
+
+  it('returns "?" when value is blank', () => {
+    const result = getClientInitials(" ");
+    expect(result).toBe("?");
+  });
 });