diff --git a/src/components/ReactiveSyncStatusButton.js b/src/components/ReactiveSyncStatusButton.js
index 362541d5d914caf5f9a1270c42960353db3e7f68..dddf333fafa9e4f4de17ad4de070bb0a65223903 100644
--- a/src/components/ReactiveSyncStatusButton.js
+++ b/src/components/ReactiveSyncStatusButton.js
@@ -1,3 +1,5 @@
+import { splitRoomId } from '../utils/room'
+
 export const ReactiveSyncStatusButton = ({
   isConnected,
   toggleSyncModal,
@@ -14,7 +16,7 @@ export const ReactiveSyncStatusButton = ({
           className={'fa' + (isConnected ? ' fa-sync fa-spin' : ' fa-users')}
         />
       </span>
-      {isConnected ? <span>{roomId}</span> : ''}
+      {isConnected ? <span>{splitRoomId(roomId)}</span> : ''}
     </button>
   )
 }
diff --git a/src/components/SyncConnectForm.js b/src/components/SyncConnectForm.js
index 9e3da3b4cace597aad1af15d69417b1bfe734ccc..58b9ad46fb854e32791dfae422c0265ff9d06996 100644
--- a/src/components/SyncConnectForm.js
+++ b/src/components/SyncConnectForm.js
@@ -1,51 +1,28 @@
 import { useRef, useState, useEffect } from 'react'
-import { isRoomIdValid, isUserNameValid } from '../utils/validation'
+import { isRoomIdValid } from '../utils/validation'
+import { pickRandomEmoji } from '../data/emoji'
 
-export const SyncConnectForm = ({ roomId, userName, connect }) => {
-  const userNameRef = useRef(null)
+export const SyncConnectForm = ({ roomId, connect }) => {
   const roomIdRef = useRef(null)
 
-  const [usernameValid, setUsernameValid] = useState(isUserNameValid(userName))
   const [roomIdValid, setRoomIdValid] = useState(isRoomIdValid(roomId))
 
-  const onUsernameChange = (e) => {
-    const username = e.target.value
-    setUsernameValid(isUserNameValid(username))
-  }
-
   const onRoomIdChange = (e) => {
     const roomId = e.target.value
     setRoomIdValid(isRoomIdValid(roomId))
   }
 
   useEffect(() => {
-    userNameRef.current.focus()
-  }, [userNameRef])
+    roomIdRef.current.focus()
+  }, [roomIdRef])
 
   const handleConnect = () => {
-    connect(roomIdRef.current.value, userNameRef.current.value)
+    const emoji = pickRandomEmoji()
+    connect(roomIdRef.current.value, emoji)
   }
 
   return (
     <>
-      <div className="field">
-        <label className="label">Name</label>
-        <div className="control">
-          <input
-            ref={userNameRef}
-            className="input"
-            type="text"
-            defaultValue={userName ?? ''}
-            onChange={onUsernameChange}
-            maxLength={20}
-            placeholder="player1"
-          />
-        </div>
-        {usernameValid || (
-          <p className="help is-danger">This name is invalid</p>
-        )}
-      </div>
-
       <div className="field">
         <label className="label">Room ID</label>
         <div className="control">
@@ -65,7 +42,7 @@ export const SyncConnectForm = ({ roomId, userName, connect }) => {
       <div className="control pt-4">
         <button
           className="button is-success"
-          disabled={!(usernameValid && roomIdValid)}
+          disabled={!roomIdValid}
           onClick={handleConnect}
         >
           Connect
diff --git a/src/components/SyncConnectedForm.js b/src/components/SyncConnectedForm.js
index baa99daec4fcb903d8d2d00b99a91b0c9ffe7691..d1cd8db652468b97afb7761e0e62f04c5c81b187 100644
--- a/src/components/SyncConnectedForm.js
+++ b/src/components/SyncConnectedForm.js
@@ -1,14 +1,28 @@
+import { splitRoomId } from '../utils/room'
+
 export const SyncConnectedForm = ({ roomId, userName, disconnect }) => {
   return (
-    <>
-      <p>
-        Connected as <strong>{userName}</strong> to room{' '}
-        <strong>{roomId}</strong>
-      </p>
-      <button className="button is-danger is-outline" onClick={disconnect}>
-        Disconnect
-      </button>
-    </>
+    <div className="columns">
+      <div className="column">
+        <div className="mb-5">
+          <p className="lowercase is-italic mb-0">you are</p>
+          <p className="is-size-2 has-text-centered">{userName}</p>
+        </div>
+
+        <div className="mb-5">
+          <p className="lowercase is-italic mb-0">connected to room</p>
+          <p className="is-size-2 has-text-centered">{splitRoomId(roomId)}</p>
+        </div>
+
+        <button
+          className="button is-danger is-outline is-fullwidth"
+          onClick={disconnect}
+        >
+          Disconnect
+        </button>
+      </div>
+      <div className="column">{/* <p>Updates</p> */}</div>
+    </div>
   )
 }
 
diff --git a/src/data/emoji.js b/src/data/emoji.js
new file mode 100644
index 0000000000000000000000000000000000000000..a05147f3f266d872561ab5dc60c54008ee025e3d
--- /dev/null
+++ b/src/data/emoji.js
@@ -0,0 +1,27 @@
+const listOfEmoji = [
+  '😈',
+  '🤡',
+  '💀',
+  '👻',
+  '👾',
+  '👽️',
+  '😱',
+  '🤠',
+  '😶',
+  '😵',
+  '🦴',
+  '🕵️',
+  '🧌',
+  '🦥',
+  '🕷️',
+  '🕸️',
+  '🚚',
+  '🌙',
+  '🌕️',
+  '🔮',
+  '🔪',
+]
+
+export const pickRandomEmoji = () => {
+  return listOfEmoji[Math.floor(Math.random() * listOfEmoji.length)]
+}
diff --git a/src/pages/Home/SyncModal.js b/src/pages/Home/SyncModal.js
index ccfb0c0922811ff3a12a6790d0481bf9fa526fa3..d8181ab7cd54d346db0c67bac7e9329d2ad7bc75 100644
--- a/src/pages/Home/SyncModal.js
+++ b/src/pages/Home/SyncModal.js
@@ -49,11 +49,7 @@ export const SyncModal = ({ toggleSyncModalOpen }) => {
               disconnect={disconnect}
             />
           ) : (
-            <SyncConnectForm
-              roomId={room}
-              userName={userName}
-              connect={connect}
-            />
+            <SyncConnectForm roomId={room} connect={connect} />
           )}
         </section>
       </div>
diff --git a/src/utils/room.js b/src/utils/room.js
new file mode 100644
index 0000000000000000000000000000000000000000..cfc333b3a1d8998fedc5daa492e5254fe9b66f6e
--- /dev/null
+++ b/src/utils/room.js
@@ -0,0 +1,6 @@
+export const escapeRoomId = (roomId) => roomId.replace(/\s/g, '')
+
+export const splitRoomId = (roomId) => {
+  const escapedRoomId = escapeRoomId(roomId)
+  return `${escapedRoomId.slice(0, 3)} ${escapedRoomId.slice(3, 6)}`
+}
diff --git a/src/utils/sync.js b/src/utils/sync.js
index 9fd9851e198115f12d135ea4cf9328292cae1257..bdc49f2d97cca4e88ccf014442f7da1a2bdf80b4 100644
--- a/src/utils/sync.js
+++ b/src/utils/sync.js
@@ -1,4 +1,5 @@
 import { api } from './pocketbase'
+import { escapeRoomId } from './room'
 
 export const connectSync = (
   setOnChangeHandler,
@@ -67,5 +68,3 @@ const subscribeForUpdates = (roomId, handler) => {
     handler(event)
   })
 }
-
-const escapeRoomId = (roomId) => roomId.replace(/\s/g, '')
diff --git a/src/utils/validation.js b/src/utils/validation.js
index 58d59ddb1bb06a1507e8ce09cf3295d83105e719..000f1a53e51b3475e63bb77541f5b339f11dc93e 100644
--- a/src/utils/validation.js
+++ b/src/utils/validation.js
@@ -1,8 +1,3 @@
-export const isUserNameValid = (username) => {
-  const usernameRegex = /^[a-zA-Z0-9-_]+$/
-  return username && username.length <= 20 && usernameRegex.test(username)
-}
-
 export const isRoomIdValid = (roomId) => {
   const cleanRoomId = roomId.replace(/ /g, '')
   const roomIdRegex = /^[0-9]+$/