diff --git a/src/App.jsx b/src/App.jsx
index 00d3602..01314be 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -65,7 +65,7 @@ export default function App() {
             <SentryRoute exact path="/register">
               <RegisterPage onRegister={register} />
             </SentryRoute>
-            <SentryRoute path="/room/:roomId">
+            <SentryRoute path="/room/:roomId?">
               {authenticated ? (
                 <Room client={client} />
               ) : (
diff --git a/src/Home.jsx b/src/Home.jsx
index f64693d..c3ee9d8 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { useHistory, Link } from "react-router-dom";
 import {
   useGroupCallRooms,
@@ -33,11 +33,21 @@ import { Facepile } from "./Facepile";
 
 const colorHash = new ColorHash({ lightness: 0.3 });
 
+function roomAliasFromRoomName(roomName) {
+  return roomName
+    .trim()
+    .replace(/\s/g, "-")
+    .replace(/[^\w-]/g, "")
+    .toLowerCase();
+}
+
 export function Home({ client, onLogout }) {
   const history = useHistory();
-  const roomNameRef = useRef();
-  const guestAccessRef = useRef();
+  const [roomName, setRoomName] = useState("");
+  const [roomAlias, setRoomAlias] = useState("");
+  const [guestAccess, setGuestAccess] = useState(false);
   const [createRoomError, setCreateRoomError] = useState();
+  const [showAdvanced, setShowAdvanced] = useState();
   const rooms = useGroupCallRooms(client);
   const publicRooms = usePublicRooms(
     client,
@@ -49,11 +59,12 @@ export function Home({ client, onLogout }) {
       e.preventDefault();
       setCreateRoomError(undefined);
 
-      async function createRoom(name, guestAccess) {
-        const { room_id } = await client.createRoom({
+      async function createRoom(name, roomAlias, guestAccess) {
+        const { room_id, room_alias } = await client.createRoom({
           visibility: "private",
           preset: "public_chat",
           name,
+          room_alias_name: roomAlias,
           power_level_content_override: {
             invite: 100,
             kick: 100,
@@ -92,13 +103,18 @@ export function Home({ client, onLogout }) {
           GroupCallIntent.Prompt
         );
 
-        history.push(`/room/${room_id}`);
+        history.push(`/room/${room_alias || room_id}`);
       }
 
-      createRoom(
-        roomNameRef.current.value,
-        guestAccessRef.current.checked
-      ).catch(setCreateRoomError);
+      const data = new FormData(e.target);
+      const roomName = data.get("roomName");
+      const roomAlias = data.get("roomAlias");
+      const guestAccess = data.get("guestAccess");
+
+      createRoom(roomName, roomAlias, guestAccess).catch((error) => {
+        setCreateRoomError(error);
+        setShowAdvanced(true);
+      });
     },
     [client]
   );
@@ -124,18 +140,35 @@ export function Home({ client, onLogout }) {
                     required
                     autoComplete="off"
                     placeholder="Room Name"
-                    ref={roomNameRef}
-                  />
-                </FieldRow>
-                <FieldRow>
-                  <InputField
-                    id="guestAccess"
-                    name="guestAccess"
-                    label="Allow Guest Access"
-                    type="checkbox"
-                    ref={guestAccessRef}
+                    value={roomName}
+                    onChange={(e) => setRoomName(e.target.value)}
                   />
                 </FieldRow>
+                <details open={showAdvanced}>
+                  <summary>Advanced</summary>
+                  <FieldRow>
+                    <InputField
+                      id="roomAlias"
+                      name="roomAlias"
+                      label="Room Alias"
+                      type="text"
+                      autoComplete="off"
+                      placeholder="Room Alias"
+                      value={roomAlias || roomAliasFromRoomName(roomName)}
+                      onChange={(e) => setRoomAlias(e.target.value)}
+                    />
+                  </FieldRow>
+                  <FieldRow>
+                    <InputField
+                      id="guestAccess"
+                      name="guestAccess"
+                      label="Allow Guest Access"
+                      type="checkbox"
+                      checked={guestAccess}
+                      onChange={(e) => setGuestAccess(e.target.checked)}
+                    />
+                  </FieldRow>
+                </details>
                 {createRoomError && (
                   <FieldRow>
                     <ErrorMessage>{createRoomError.message}</ErrorMessage>
@@ -175,7 +208,7 @@ export function Home({ client, onLogout }) {
                   <Link
                     className={styles.roomListItem}
                     key={room.roomId}
-                    to={`/room/${room.roomId}`}
+                    to={`/room/${room.getCanonicalAlias() || room.roomId}`}
                   >
                     <div
                       className={styles.roomAvatar}
diff --git a/src/index.css b/src/index.css
index 03972c3..ad33681 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,101 +21,104 @@ limitations under the License.
    (to avoid having to maintain a fork of Inter). */
 
 :root {
-  --inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10FFFF;
+  --inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f,
+    U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF;
 }
 
 @font-face {
-  font-family: 'Inter';
-  font-style:  normal;
+  font-family: "Inter";
+  font-style: normal;
   font-weight: 400;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
   src: url("/fonts/Inter/Inter-Regular.woff2") format("woff2"),
-      url("/fonts/Inter/Inter-Regular.woff") format("woff");
+    url("/fonts/Inter/Inter-Regular.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter';
-  font-style:  italic;
+  font-family: "Inter";
+  font-style: italic;
   font-weight: 400;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
   src: url("/fonts/Inter/Inter-Italic.woff2") format("woff2"),
-      url("/fonts/Inter/Inter-Italic.woff") format("woff");
+    url("/fonts/Inter/Inter-Italic.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter';
-  font-style:  normal;
+  font-family: "Inter";
+  font-style: normal;
   font-weight: 500;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
   src: url("/fonts/Inter/Inter-Medium.woff2") format("woff2"),
-      url("/fonts/Inter/Inter-Medium.woff") format("woff");
+    url("/fonts/Inter/Inter-Medium.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter';
-  font-style:  italic;
+  font-family: "Inter";
+  font-style: italic;
   font-weight: 500;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
   src: url("/fonts/Inter/Inter-MediumItalic.woff2") format("woff2"),
-      url("/fonts/Inter/Inter-MediumItalic.woff") format("woff");
+    url("/fonts/Inter/Inter-MediumItalic.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter';
-  font-style:  normal;
+  font-family: "Inter";
+  font-style: normal;
   font-weight: 600;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
   src: url("/fonts/Inter/Inter-SemiBold.woff2") format("woff2"),
-      url("/fonts/Inter/Inter-SemiBold.woff") format("woff");
+    url("/fonts/Inter/Inter-SemiBold.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter';
-  font-style:  italic;
+  font-family: "Inter";
+  font-style: italic;
   font-weight: 600;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
   src: url("/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2"),
-      url("/fonts/Inter/Inter-SemiBoldItalic.woff") format("woff");
+    url("/fonts/Inter/Inter-SemiBoldItalic.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter';
-  font-style:  normal;
+  font-family: "Inter";
+  font-style: normal;
   font-weight: 700;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
   src: url("/fonts/Inter/Inter-Bold.woff2") format("woff2"),
-      url("/fonts/Inter/Inter-Bold.woff") format("woff");
+    url("/fonts/Inter/Inter-Bold.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Inter';
-  font-style:  italic;
+  font-family: "Inter";
+  font-style: italic;
   font-weight: 700;
   font-display: swap;
   unicode-range: var(--inter-unicode-range);
   src: url("/fonts/Inter/Inter-BoldItalic.woff2") format("woff2"),
-      url("/fonts/Inter/Inter-BoldItalic.woff") format("woff");
+    url("/fonts/Inter/Inter-BoldItalic.woff") format("woff");
 }
 
 body {
   background-color: #15191e;
   color: #fff;
   margin: 0;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
 }
 
@@ -129,6 +132,19 @@ a {
   font-weight: bold;
 }
 
-a:hover, a:active {
+a:hover,
+a:active {
   opacity: 0.8;
 }
+
+summary {
+  font-size: 14px;
+}
+
+details > :not(summary) {
+  margin-left: 16px;
+}
+
+details[open] > summary {
+  margin-bottom: 16px;
+}