diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 00000000..b41341fb
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,16 @@
+{
+  "mcpServers": {
+    "sqlite": {
+      "command": "/Users/antialias/.nvm/versions/node/v20.19.3/bin/npx",
+      "args": [
+        "-y",
+        "mcp-server-sqlite-npx",
+        "/Users/antialias/projects/soroban-abacus-flashcards/apps/web/data/sqlite.db"
+      ],
+      "env": {
+        "PATH": "/Users/antialias/.nvm/versions/node/v20.19.3/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/bin:/bin",
+        "NODE_PATH": "/Users/antialias/.nvm/versions/node/v20.19.3/lib/node_modules"
+      }
+    }
+  }
+}
diff --git a/apps/web/.claude/CLAUDE.md b/apps/web/.claude/CLAUDE.md
index d78cdf39..3c4a1fd0 100644
--- a/apps/web/.claude/CLAUDE.md
+++ b/apps/web/.claude/CLAUDE.md
@@ -267,3 +267,20 @@ Before setting a z-index, always check:
 1. What stacking context is this element in?
 2. Am I comparing against siblings or global elements?
 3. Does my parent create a stacking context?
+
+## Database Access
+
+This project uses SQLite with Drizzle ORM. Database location: `./data/sqlite.db`
+
+**ALWAYS use MCP SQLite tools for database operations:**
+- `mcp__sqlite__list_tables` - List all tables
+- `mcp__sqlite__describe_table` - Get table schema
+- `mcp__sqlite__read_query` - Run SELECT queries
+- `mcp__sqlite__write_query` - Run INSERT/UPDATE/DELETE queries
+- `mcp__sqlite__create_table` - Create new tables
+- **DO NOT use bash `sqlite3` commands** - use the MCP tools instead
+
+**Database Schema:**
+- Schema definitions: `src/db/schema/`
+- Drizzle config: `drizzle.config.ts`
+- Migrations: `drizzle/` directory
diff --git a/apps/web/.claude/settings.local.json b/apps/web/.claude/settings.local.json
index 1b453488..29c13446 100644
--- a/apps/web/.claude/settings.local.json
+++ b/apps/web/.claude/settings.local.json
@@ -104,9 +104,17 @@
       "Bash(do gh run list --limit 1 --workflow=\"Build and Deploy\" --json conclusion,status,databaseId --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\") - Run \\(.databaseId)\"\"')",
       "Bash(do ssh nas.home.network '/usr/local/bin/docker inspect soroban-abacus-flashcards --format=\"\"{{index .Config.Labels \\\"\"org.opencontainers.image.revision\\\"\"}}\"\"')",
       "Bash(git rev-parse HEAD)",
-      "Bash(gh run watch --exit-status 18662351595)"
+      "Bash(gh run watch --exit-status 18662351595)",
+      "WebFetch(domain:github.com)",
+      "WebSearch",
+      "WebFetch(domain:www.npmjs.com)",
+      "mcp__sqlite__list_tables",
+      "mcp__sqlite__describe_table",
+      "mcp__sqlite__read_query"
     ],
     "deny": [],
     "ask": []
-  }
+  },
+  "enableAllProjectMcpServers": true,
+  "enabledMcpjsonServers": ["sqlite"]
 }
diff --git a/apps/web/src/components/common/QRCodeButton.tsx b/apps/web/src/components/common/QRCodeButton.tsx
index ab25ebab..3e8d3dfa 100644
--- a/apps/web/src/components/common/QRCodeButton.tsx
+++ b/apps/web/src/components/common/QRCodeButton.tsx
@@ -3,6 +3,7 @@ import type { CSSProperties } from 'react'
 import { useState } from 'react'
 import { QRCodeSVG } from 'qrcode.react'
 import { useClipboard } from '@/hooks/useClipboard'
+import { Z_INDEX } from '@/constants/zIndex'
 
 export interface QRCodeButtonProps {
   /**
@@ -25,21 +26,20 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
   const { copied, copy } = useClipboard()
 
   const buttonStyles: CSSProperties = {
-    width: '100%',
     cursor: 'pointer',
     transition: 'all 0.2s ease',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: '8px',
-    marginBottom: '6px',
     border: '2px solid rgba(251, 146, 60, 0.4)',
     background: 'linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.3))',
     borderRadius: '8px',
-    padding: '10px 16px',
-    fontSize: '13px',
-    fontWeight: '600',
+    padding: '6px',
+    fontSize: '16px',
     color: 'rgba(253, 186, 116, 1)',
+    aspectRatio: '1',
+    alignSelf: 'stretch',
+    flexShrink: 0,
     ...style,
   }
 
@@ -61,8 +61,7 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
             Object.assign(e.currentTarget.style, buttonStyles)
           }}
         >
-          <span style={{ fontSize: '16px' }}>📱</span>
-          <span>QR Code</span>
+          <QRCodeSVG value={url} size={40} level="L" />
         </button>
       </Popover.Trigger>
 
@@ -77,7 +76,7 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
             borderRadius: '12px',
             padding: '20px',
             boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
-            zIndex: 1000,
+            zIndex: Z_INDEX.GAME_NAV.HAMBURGER_NESTED_DROPDOWN,
             maxWidth: '320px',
           }}
         >
diff --git a/apps/web/src/components/nav/CreateRoomModal.tsx b/apps/web/src/components/nav/CreateRoomModal.tsx
index 42b2b4a6..7116a3e9 100644
--- a/apps/web/src/components/nav/CreateRoomModal.tsx
+++ b/apps/web/src/components/nav/CreateRoomModal.tsx
@@ -2,8 +2,9 @@ import { useState } from 'react'
 import * as Select from '@radix-ui/react-select'
 import { animated } from '@react-spring/web'
 import { Modal } from '@/components/common/Modal'
-import { useCreateRoom } from '@/hooks/useRoomData'
+import { useCreateRoom, useRoomData } from '@/hooks/useRoomData'
 import { getAvailableGames } from '@/lib/arcade/game-registry'
+import { RoomShareButtons } from './RoomShareButtons'
 
 export interface CreateRoomModalProps {
   /**
@@ -22,11 +23,14 @@ export interface CreateRoomModalProps {
   onSuccess?: () => void
 }
 
+type ModalState = 'creating' | 'created'
+
 /**
  * Modal for creating a new multiplayer room
  */
 export function CreateRoomModal({ isOpen, onClose, onSuccess }: CreateRoomModalProps) {
   const { mutateAsync: createRoom, isPending } = useCreateRoom()
+  const { getRoomShareUrl } = useRoomData()
   const availableGames = getAvailableGames()
   const [error, setError] = useState('')
   const [gameName, setGameName] = useState<string>('__choose_later__') // Special value = user will choose later
@@ -34,12 +38,16 @@ export function CreateRoomModal({ isOpen, onClose, onSuccess }: CreateRoomModalP
     'open' | 'password' | 'approval-only' | 'restricted'
   >('open')
   const [password, setPassword] = useState('')
+  const [modalState, setModalState] = useState<ModalState>('creating')
+  const [createdRoomCode, setCreatedRoomCode] = useState<string | null>(null)
 
   const handleClose = () => {
     setError('')
     setGameName('__choose_later__')
     setAccessMode('open')
     setPassword('')
+    setModalState('creating')
+    setCreatedRoomCode(null)
     onClose()
   }
 
@@ -65,7 +73,7 @@ export function CreateRoomModal({ isOpen, onClose, onSuccess }: CreateRoomModalP
       const selectedGame =
         gameName === '__choose_later__' ? availableGames[0]?.manifest.name || 'matching' : gameName
 
-      await createRoom({
+      const newRoom = await createRoom({
         name,
         gameName: selectedGame,
         creatorName: 'Player',
@@ -74,14 +82,21 @@ export function CreateRoomModal({ isOpen, onClose, onSuccess }: CreateRoomModalP
         password: accessMode === 'password' ? password : undefined,
       })
 
-      // Success! Close modal
-      handleClose()
-      onSuccess?.()
+      // Success! Transition to success view
+      setCreatedRoomCode(newRoom.code)
+      setModalState('created')
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to create room')
     }
   }
 
+  const handleStartPlaying = () => {
+    handleClose()
+    onSuccess?.()
+  }
+
+  const shareUrl = createdRoomCode ? getRoomShareUrl(createdRoomCode) : ''
+
   return (
     <Modal isOpen={isOpen} onClose={handleClose}>
       <div
@@ -89,258 +104,188 @@ export function CreateRoomModal({ isOpen, onClose, onSuccess }: CreateRoomModalP
           border: '2px solid rgba(34, 197, 94, 0.3)',
           borderRadius: '16px',
           padding: '24px',
+          transition: 'all 0.3s ease',
         }}
       >
-        <h2
-          style={{
-            fontSize: '24px',
-            fontWeight: 'bold',
-            marginBottom: '8px',
-            color: 'rgba(134, 239, 172, 1)',
-          }}
-        >
-          Create New Room
-        </h2>
-        <p
-          style={{
-            fontSize: '14px',
-            color: 'rgba(209, 213, 219, 0.8)',
-            marginBottom: '24px',
-          }}
-        >
-          You'll leave the current room and create a new one
-        </p>
-
-        <form onSubmit={handleSubmit}>
-          {/* Room Name */}
-          <div style={{ marginBottom: '16px' }}>
-            <label
+        {modalState === 'creating' ? (
+          <>
+            <h2
               style={{
-                display: 'block',
-                marginBottom: '6px',
-                fontWeight: '600',
-                color: 'rgba(209, 213, 219, 1)',
-                fontSize: '13px',
+                fontSize: '24px',
+                fontWeight: 'bold',
+                marginBottom: '8px',
+                color: 'rgba(134, 239, 172, 1)',
               }}
             >
-              Room Name{' '}
-              <span
-                style={{ fontWeight: '400', color: 'rgba(156, 163, 175, 1)', fontSize: '12px' }}
-              >
-                (optional)
-              </span>
-            </label>
-            <input
-              name="name"
-              type="text"
-              placeholder="e.g., Friday Night Games (defaults to: 🎮 CODE)"
-              disabled={isPending}
+              Create New Room
+            </h2>
+            <p
               style={{
-                width: '100%',
-                padding: '10px 12px',
-                border: '2px solid rgba(75, 85, 99, 0.5)',
-                borderRadius: '8px',
-                background: 'rgba(255, 255, 255, 0.05)',
-                color: 'rgba(209, 213, 219, 1)',
                 fontSize: '14px',
-                outline: 'none',
-              }}
-              onFocus={(e) => {
-                e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.6)'
-              }}
-              onBlur={(e) => {
-                e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
-              }}
-            />
-          </div>
-
-          {/* Game Selection */}
-          <div style={{ marginBottom: '16px' }}>
-            <label
-              style={{
-                display: 'block',
-                marginBottom: '6px',
-                fontWeight: '600',
-                color: 'rgba(209, 213, 219, 1)',
-                fontSize: '13px',
+                color: 'rgba(209, 213, 219, 0.8)',
+                marginBottom: '24px',
               }}
             >
-              🎮 Choose Your Game{' '}
-              <span
-                style={{ fontWeight: '400', color: 'rgba(156, 163, 175, 1)', fontSize: '12px' }}
-              >
-                (optional)
-              </span>
-            </label>
-            <Select.Root value={gameName} onValueChange={setGameName} disabled={isPending}>
-              <Select.Trigger
-                style={{
-                  width: '100%',
-                  padding: '12px 14px',
-                  border: '2px solid rgba(75, 85, 99, 0.5)',
-                  borderRadius: '10px',
-                  background: 'rgba(255, 255, 255, 0.05)',
-                  color: gameName ? 'rgba(209, 213, 219, 1)' : 'rgba(156, 163, 175, 1)',
-                  fontSize: '14px',
-                  fontWeight: '500',
-                  cursor: isPending ? 'not-allowed' : 'pointer',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  transition: 'all 0.2s ease',
-                  outline: 'none',
-                }}
-                onMouseEnter={(e) => {
-                  if (!isPending) {
-                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
-                    e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.5)'
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
-                  e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
-                }}
-              >
-                <Select.Value placeholder="Select a game..." />
-                <Select.Icon>
-                  <span style={{ fontSize: '12px' }}>▼</span>
-                </Select.Icon>
-              </Select.Trigger>
+              You'll leave the current room and create a new one
+            </p>
 
-              <Select.Portal>
-                <Select.Content
-                  position="popper"
-                  side="bottom"
-                  align="start"
-                  sideOffset={5}
-                  collisionPadding={30}
-                  avoidCollisions={true}
+            <form onSubmit={handleSubmit}>
+              {/* Room Name */}
+              <div style={{ marginBottom: '16px' }}>
+                <label
                   style={{
-                    background: 'linear-gradient(180deg, #1f2937 0%, #111827 100%)',
-                    borderRadius: '12px',
-                    border: '2px solid rgba(34, 197, 94, 0.3)',
-                    padding: '6px',
-                    boxShadow: '0 10px 40px rgba(0, 0, 0, 0.5)',
-                    zIndex: 1000,
-                    minWidth: '300px',
-                    maxWidth: 'min(400px, 90vw)',
-                    maxHeight: 'min(300px, 50vh)',
-                    overflow: 'hidden',
-                    position: 'relative',
+                    display: 'block',
+                    marginBottom: '6px',
+                    fontWeight: '600',
+                    color: 'rgba(209, 213, 219, 1)',
+                    fontSize: '13px',
                   }}
                 >
-                  <Select.ScrollUpButton asChild>
-                    <animated.div
-                      style={{
-                        position: 'absolute',
-                        top: '6px',
-                        left: '6px',
-                        right: '6px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '30px',
-                        background:
-                          'linear-gradient(180deg, rgba(31, 41, 55, 0.98) 0%, rgba(31, 41, 55, 0.7) 70%, transparent 100%)',
-                        cursor: 'default',
-                        color: 'rgba(34, 197, 94, 1)',
-                        fontSize: '14px',
-                        transition: 'opacity 0.2s ease',
-                        zIndex: 10,
-                        pointerEvents: 'auto',
-                      }}
-                      onMouseEnter={(e) => {
-                        e.currentTarget.style.opacity = '0.7'
-                      }}
-                      onMouseLeave={(e) => {
-                        e.currentTarget.style.opacity = '1'
-                      }}
-                    >
-                      ▲
-                    </animated.div>
-                  </Select.ScrollUpButton>
-                  <Select.Viewport
+                  Room Name{' '}
+                  <span
+                    style={{ fontWeight: '400', color: 'rgba(156, 163, 175, 1)', fontSize: '12px' }}
+                  >
+                    (optional)
+                  </span>
+                </label>
+                <input
+                  name="name"
+                  type="text"
+                  placeholder="e.g., Friday Night Games (defaults to: 🎮 CODE)"
+                  disabled={isPending}
+                  style={{
+                    width: '100%',
+                    padding: '10px 12px',
+                    border: '2px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '8px',
+                    background: 'rgba(255, 255, 255, 0.05)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    fontSize: '14px',
+                    outline: 'none',
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.6)'
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
+                  }}
+                />
+              </div>
+
+              {/* Game Selection */}
+              <div style={{ marginBottom: '16px' }}>
+                <label
+                  style={{
+                    display: 'block',
+                    marginBottom: '6px',
+                    fontWeight: '600',
+                    color: 'rgba(209, 213, 219, 1)',
+                    fontSize: '13px',
+                  }}
+                >
+                  🎮 Choose Your Game{' '}
+                  <span
+                    style={{ fontWeight: '400', color: 'rgba(156, 163, 175, 1)', fontSize: '12px' }}
+                  >
+                    (optional)
+                  </span>
+                </label>
+                <Select.Root value={gameName} onValueChange={setGameName} disabled={isPending}>
+                  <Select.Trigger
                     style={{
-                      maxHeight: 'inherit',
-                      scrollBehavior: 'smooth',
-                      overflowY: 'auto',
+                      width: '100%',
+                      padding: '12px 14px',
+                      border: '2px solid rgba(75, 85, 99, 0.5)',
+                      borderRadius: '10px',
+                      background: 'rgba(255, 255, 255, 0.05)',
+                      color: gameName ? 'rgba(209, 213, 219, 1)' : 'rgba(156, 163, 175, 1)',
+                      fontSize: '14px',
+                      fontWeight: '500',
+                      cursor: isPending ? 'not-allowed' : 'pointer',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      transition: 'all 0.2s ease',
+                      outline: 'none',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!isPending) {
+                        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
+                        e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.5)'
+                      }
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
+                      e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
                     }}
                   >
-                    <Select.Item
-                      value="__choose_later__"
+                    <Select.Value placeholder="Select a game..." />
+                    <Select.Icon>
+                      <span style={{ fontSize: '12px' }}>▼</span>
+                    </Select.Icon>
+                  </Select.Trigger>
+
+                  <Select.Portal>
+                    <Select.Content
+                      position="popper"
+                      side="bottom"
+                      align="start"
+                      sideOffset={5}
+                      collisionPadding={30}
+                      avoidCollisions={true}
                       style={{
-                        padding: '12px 14px',
-                        borderRadius: '8px',
-                        cursor: 'pointer',
-                        outline: 'none',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '10px',
-                        transition: 'all 0.15s ease',
-                        background:
-                          gameName === '__choose_later__'
-                            ? 'rgba(34, 197, 94, 0.15)'
-                            : 'transparent',
-                        color: 'rgba(209, 213, 219, 0.9)',
-                        fontSize: '14px',
-                        marginBottom: '4px',
-                      }}
-                      onMouseEnter={(e) => {
-                        if (gameName !== '__choose_later__') {
-                          e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
-                        }
-                      }}
-                      onMouseLeave={(e) => {
-                        if (gameName !== '__choose_later__') {
-                          e.currentTarget.style.background = 'transparent'
-                        }
+                        background: 'linear-gradient(180deg, #1f2937 0%, #111827 100%)',
+                        borderRadius: '12px',
+                        border: '2px solid rgba(34, 197, 94, 0.3)',
+                        padding: '6px',
+                        boxShadow: '0 10px 40px rgba(0, 0, 0, 0.5)',
+                        zIndex: 1000,
+                        minWidth: '300px',
+                        maxWidth: 'min(400px, 90vw)',
+                        maxHeight: 'min(300px, 50vh)',
+                        overflow: 'hidden',
+                        position: 'relative',
                       }}
                     >
-                      <Select.ItemText>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                          <span style={{ fontSize: '20px' }}>✨</span>
-                          <div>
-                            <div style={{ fontWeight: '500', fontSize: '14px' }}>Choose later</div>
-                            <div
-                              style={{
-                                fontSize: '12px',
-                                opacity: 0.7,
-                                color: 'rgba(156, 163, 175, 1)',
-                              }}
-                            >
-                              Pick on the game selection page
-                            </div>
-                          </div>
-                        </div>
-                      </Select.ItemText>
-                    </Select.Item>
-
-                    <div
-                      style={{
-                        height: '1px',
-                        background: 'rgba(75, 85, 99, 0.5)',
-                        margin: '6px 0',
-                      }}
-                    />
-
-                    {availableGames.map((game) => {
-                      const gameId = game.manifest.name
-                      // Map game gradients to colors
-                      const gradientColors: Record<string, string> = {
-                        pink: 'rgba(236, 72, 153, 0.2)',
-                        purple: 'rgba(168, 85, 247, 0.2)',
-                        blue: 'rgba(59, 130, 246, 0.2)',
-                        green: 'rgba(34, 197, 94, 0.2)',
-                        orange: 'rgba(249, 115, 22, 0.2)',
-                        red: 'rgba(239, 68, 68, 0.2)',
-                      }
-                      const bgColor =
-                        gradientColors[game.manifest.gradient || 'blue'] || gradientColors.blue
-
-                      return (
+                      <Select.ScrollUpButton asChild>
+                        <animated.div
+                          style={{
+                            position: 'absolute',
+                            top: '6px',
+                            left: '6px',
+                            right: '6px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '30px',
+                            background:
+                              'linear-gradient(180deg, rgba(31, 41, 55, 0.98) 0%, rgba(31, 41, 55, 0.7) 70%, transparent 100%)',
+                            cursor: 'default',
+                            color: 'rgba(34, 197, 94, 1)',
+                            fontSize: '14px',
+                            transition: 'opacity 0.2s ease',
+                            zIndex: 10,
+                            pointerEvents: 'auto',
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.opacity = '0.7'
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.opacity = '1'
+                          }}
+                        >
+                          ▲
+                        </animated.div>
+                      </Select.ScrollUpButton>
+                      <Select.Viewport
+                        style={{
+                          maxHeight: 'inherit',
+                          scrollBehavior: 'smooth',
+                          overflowY: 'auto',
+                        }}
+                      >
                         <Select.Item
-                          key={gameId}
-                          value={gameId}
+                          value="__choose_later__"
                           style={{
                             padding: '12px 14px',
                             borderRadius: '8px',
@@ -348,316 +293,518 @@ export function CreateRoomModal({ isOpen, onClose, onSuccess }: CreateRoomModalP
                             outline: 'none',
                             display: 'flex',
                             alignItems: 'center',
-                            gap: '12px',
+                            gap: '10px',
                             transition: 'all 0.15s ease',
-                            background: gameName === gameId ? bgColor : 'transparent',
+                            background:
+                              gameName === '__choose_later__'
+                                ? 'rgba(34, 197, 94, 0.15)'
+                                : 'transparent',
+                            color: 'rgba(209, 213, 219, 0.9)',
+                            fontSize: '14px',
                             marginBottom: '4px',
                           }}
                           onMouseEnter={(e) => {
-                            if (gameName !== gameId) {
-                              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
+                            if (gameName !== '__choose_later__') {
+                              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
                             }
                           }}
                           onMouseLeave={(e) => {
-                            if (gameName !== gameId) {
+                            if (gameName !== '__choose_later__') {
                               e.currentTarget.style.background = 'transparent'
                             }
                           }}
                         >
                           <Select.ItemText>
-                            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                              <span style={{ fontSize: '28px' }}>{game.manifest.icon}</span>
-                              <div style={{ flex: 1 }}>
-                                <div
-                                  style={{
-                                    fontWeight: '600',
-                                    fontSize: '15px',
-                                    color: 'rgba(209, 213, 219, 1)',
-                                    marginBottom: '2px',
-                                  }}
-                                >
-                                  {game.manifest.displayName}
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                              <span style={{ fontSize: '20px' }}>✨</span>
+                              <div>
+                                <div style={{ fontWeight: '500', fontSize: '14px' }}>
+                                  Choose later
                                 </div>
                                 <div
                                   style={{
                                     fontSize: '12px',
+                                    opacity: 0.7,
                                     color: 'rgba(156, 163, 175, 1)',
-                                    lineHeight: '1.3',
                                   }}
                                 >
-                                  {game.manifest.description}
-                                </div>
-                                <div
-                                  style={{
-                                    fontSize: '11px',
-                                    marginTop: '4px',
-                                    display: 'flex',
-                                    gap: '8px',
-                                    flexWrap: 'wrap',
-                                  }}
-                                >
-                                  <span
-                                    style={{
-                                      background: 'rgba(59, 130, 246, 0.2)',
-                                      padding: '2px 8px',
-                                      borderRadius: '4px',
-                                      color: 'rgba(147, 197, 253, 1)',
-                                      fontWeight: '500',
-                                    }}
-                                  >
-                                    {game.manifest.maxPlayers === 1
-                                      ? '👤 Solo'
-                                      : `👥 ${game.manifest.maxPlayers}p`}
-                                  </span>
-                                  <span
-                                    style={{
-                                      background: 'rgba(168, 85, 247, 0.2)',
-                                      padding: '2px 8px',
-                                      borderRadius: '4px',
-                                      color: 'rgba(196, 181, 253, 1)',
-                                      fontWeight: '500',
-                                    }}
-                                  >
-                                    {game.manifest.difficulty}
-                                  </span>
+                                  Pick on the game selection page
                                 </div>
                               </div>
                             </div>
                           </Select.ItemText>
                         </Select.Item>
-                      )
-                    })}
-                  </Select.Viewport>
-                  <Select.ScrollDownButton asChild>
-                    <animated.div
+
+                        <div
+                          style={{
+                            height: '1px',
+                            background: 'rgba(75, 85, 99, 0.5)',
+                            margin: '6px 0',
+                          }}
+                        />
+
+                        {availableGames.map((game) => {
+                          const gameId = game.manifest.name
+                          // Map game gradients to colors
+                          const gradientColors: Record<string, string> = {
+                            pink: 'rgba(236, 72, 153, 0.2)',
+                            purple: 'rgba(168, 85, 247, 0.2)',
+                            blue: 'rgba(59, 130, 246, 0.2)',
+                            green: 'rgba(34, 197, 94, 0.2)',
+                            orange: 'rgba(249, 115, 22, 0.2)',
+                            red: 'rgba(239, 68, 68, 0.2)',
+                          }
+                          const bgColor =
+                            gradientColors[game.manifest.gradient || 'blue'] || gradientColors.blue
+
+                          return (
+                            <Select.Item
+                              key={gameId}
+                              value={gameId}
+                              style={{
+                                padding: '12px 14px',
+                                borderRadius: '8px',
+                                cursor: 'pointer',
+                                outline: 'none',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '12px',
+                                transition: 'all 0.15s ease',
+                                background: gameName === gameId ? bgColor : 'transparent',
+                                marginBottom: '4px',
+                              }}
+                              onMouseEnter={(e) => {
+                                if (gameName !== gameId) {
+                                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
+                                }
+                              }}
+                              onMouseLeave={(e) => {
+                                if (gameName !== gameId) {
+                                  e.currentTarget.style.background = 'transparent'
+                                }
+                              }}
+                            >
+                              <Select.ItemText>
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                                  <span style={{ fontSize: '28px' }}>{game.manifest.icon}</span>
+                                  <div style={{ flex: 1 }}>
+                                    <div
+                                      style={{
+                                        fontWeight: '600',
+                                        fontSize: '15px',
+                                        color: 'rgba(209, 213, 219, 1)',
+                                        marginBottom: '2px',
+                                      }}
+                                    >
+                                      {game.manifest.displayName}
+                                    </div>
+                                    <div
+                                      style={{
+                                        fontSize: '12px',
+                                        color: 'rgba(156, 163, 175, 1)',
+                                        lineHeight: '1.3',
+                                      }}
+                                    >
+                                      {game.manifest.description}
+                                    </div>
+                                    <div
+                                      style={{
+                                        fontSize: '11px',
+                                        marginTop: '4px',
+                                        display: 'flex',
+                                        gap: '8px',
+                                        flexWrap: 'wrap',
+                                      }}
+                                    >
+                                      <span
+                                        style={{
+                                          background: 'rgba(59, 130, 246, 0.2)',
+                                          padding: '2px 8px',
+                                          borderRadius: '4px',
+                                          color: 'rgba(147, 197, 253, 1)',
+                                          fontWeight: '500',
+                                        }}
+                                      >
+                                        {game.manifest.maxPlayers === 1
+                                          ? '👤 Solo'
+                                          : `👥 ${game.manifest.maxPlayers}p`}
+                                      </span>
+                                      <span
+                                        style={{
+                                          background: 'rgba(168, 85, 247, 0.2)',
+                                          padding: '2px 8px',
+                                          borderRadius: '4px',
+                                          color: 'rgba(196, 181, 253, 1)',
+                                          fontWeight: '500',
+                                        }}
+                                      >
+                                        {game.manifest.difficulty}
+                                      </span>
+                                    </div>
+                                  </div>
+                                </div>
+                              </Select.ItemText>
+                            </Select.Item>
+                          )
+                        })}
+                      </Select.Viewport>
+                      <Select.ScrollDownButton asChild>
+                        <animated.div
+                          style={{
+                            position: 'absolute',
+                            bottom: '6px',
+                            left: '6px',
+                            right: '6px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '30px',
+                            background:
+                              'linear-gradient(0deg, rgba(31, 41, 55, 0.98) 0%, rgba(31, 41, 55, 0.7) 70%, transparent 100%)',
+                            cursor: 'default',
+                            color: 'rgba(34, 197, 94, 1)',
+                            fontSize: '14px',
+                            transition: 'opacity 0.2s ease',
+                            zIndex: 10,
+                            pointerEvents: 'auto',
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.opacity = '0.7'
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.opacity = '1'
+                          }}
+                        >
+                          ▼
+                        </animated.div>
+                      </Select.ScrollDownButton>
+                    </Select.Content>
+                  </Select.Portal>
+                </Select.Root>
+              </div>
+
+              {/* Access Mode Selection */}
+              <div style={{ marginBottom: '16px' }}>
+                <label
+                  style={{
+                    display: 'block',
+                    marginBottom: '8px',
+                    fontWeight: '600',
+                    color: 'rgba(209, 213, 219, 1)',
+                    fontSize: '13px',
+                  }}
+                >
+                  Who Can Join
+                </label>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
+                  {[
+                    { value: 'open', emoji: '🌐', label: 'Open', desc: 'Anyone' },
+                    { value: 'password', emoji: '🔑', label: 'Password', desc: 'With key' },
+                    { value: 'approval-only', emoji: '✋', label: 'Approval', desc: 'Request' },
+                    { value: 'restricted', emoji: '🚫', label: 'Restricted', desc: 'Invite only' },
+                  ].map((mode) => (
+                    <button
+                      key={mode.value}
+                      type="button"
+                      disabled={isPending}
+                      onClick={() => {
+                        setAccessMode(mode.value as typeof accessMode)
+                        if (mode.value !== 'password') setPassword('')
+                      }}
                       style={{
-                        position: 'absolute',
-                        bottom: '6px',
-                        left: '6px',
-                        right: '6px',
+                        padding: '10px 12px',
+                        background:
+                          accessMode === mode.value
+                            ? 'rgba(34, 197, 94, 0.15)'
+                            : 'rgba(255, 255, 255, 0.05)',
+                        border:
+                          accessMode === mode.value
+                            ? '2px solid rgba(34, 197, 94, 0.6)'
+                            : '2px solid rgba(75, 85, 99, 0.5)',
+                        borderRadius: '8px',
+                        color:
+                          accessMode === mode.value
+                            ? 'rgba(134, 239, 172, 1)'
+                            : 'rgba(209, 213, 219, 0.8)',
+                        fontSize: '13px',
+                        fontWeight: '500',
+                        cursor: isPending ? 'not-allowed' : 'pointer',
+                        opacity: isPending ? 0.5 : 1,
+                        transition: 'all 0.2s ease',
                         display: 'flex',
                         alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '30px',
-                        background:
-                          'linear-gradient(0deg, rgba(31, 41, 55, 0.98) 0%, rgba(31, 41, 55, 0.7) 70%, transparent 100%)',
-                        cursor: 'default',
-                        color: 'rgba(34, 197, 94, 1)',
-                        fontSize: '14px',
-                        transition: 'opacity 0.2s ease',
-                        zIndex: 10,
-                        pointerEvents: 'auto',
+                        gap: '8px',
                       }}
                       onMouseEnter={(e) => {
-                        e.currentTarget.style.opacity = '0.7'
+                        if (!isPending && accessMode !== mode.value) {
+                          e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
+                          e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.4)'
+                        }
                       }}
                       onMouseLeave={(e) => {
-                        e.currentTarget.style.opacity = '1'
+                        if (accessMode !== mode.value) {
+                          e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
+                          e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
+                        }
                       }}
                     >
-                      ▼
-                    </animated.div>
-                  </Select.ScrollDownButton>
-                </Select.Content>
-              </Select.Portal>
-            </Select.Root>
-          </div>
+                      <span style={{ fontSize: '18px' }}>{mode.emoji}</span>
+                      <div style={{ textAlign: 'left', flex: 1, lineHeight: '1.2' }}>
+                        <div style={{ fontSize: '13px', fontWeight: '600' }}>{mode.label}</div>
+                        <div style={{ fontSize: '11px', opacity: 0.7 }}>{mode.desc}</div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
 
-          {/* Access Mode Selection */}
-          <div style={{ marginBottom: '16px' }}>
-            <label
-              style={{
-                display: 'block',
-                marginBottom: '8px',
-                fontWeight: '600',
-                color: 'rgba(209, 213, 219, 1)',
-                fontSize: '13px',
-              }}
-            >
-              Who Can Join
-            </label>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
-              {[
-                { value: 'open', emoji: '🌐', label: 'Open', desc: 'Anyone' },
-                { value: 'password', emoji: '🔑', label: 'Password', desc: 'With key' },
-                { value: 'approval-only', emoji: '✋', label: 'Approval', desc: 'Request' },
-                { value: 'restricted', emoji: '🚫', label: 'Restricted', desc: 'Invite only' },
-              ].map((mode) => (
-                <button
-                  key={mode.value}
-                  type="button"
-                  disabled={isPending}
-                  onClick={() => {
-                    setAccessMode(mode.value as typeof accessMode)
-                    if (mode.value !== 'password') setPassword('')
-                  }}
+              {accessMode === 'password' && (
+                <div style={{ marginBottom: '20px' }}>
+                  <label
+                    style={{
+                      display: 'block',
+                      marginBottom: '8px',
+                      fontWeight: '600',
+                      color: 'rgba(209, 213, 219, 1)',
+                      fontSize: '14px',
+                    }}
+                  >
+                    Room Password
+                  </label>
+                  <input
+                    type="text"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Enter a password"
+                    disabled={isPending}
+                    style={{
+                      width: '100%',
+                      padding: '12px',
+                      border: '2px solid rgba(75, 85, 99, 0.5)',
+                      borderRadius: '10px',
+                      background: 'rgba(255, 255, 255, 0.05)',
+                      color: 'rgba(209, 213, 219, 1)',
+                      fontSize: '15px',
+                      outline: 'none',
+                    }}
+                    onFocus={(e) => {
+                      e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.6)'
+                    }}
+                    onBlur={(e) => {
+                      e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
+                    }}
+                  />
+                </div>
+              )}
+
+              {error && (
+                <p
                   style={{
-                    padding: '10px 12px',
-                    background:
-                      accessMode === mode.value
-                        ? 'rgba(34, 197, 94, 0.15)'
-                        : 'rgba(255, 255, 255, 0.05)',
-                    border:
-                      accessMode === mode.value
-                        ? '2px solid rgba(34, 197, 94, 0.6)'
-                        : '2px solid rgba(75, 85, 99, 0.5)',
-                    borderRadius: '8px',
-                    color:
-                      accessMode === mode.value
-                        ? 'rgba(134, 239, 172, 1)'
-                        : 'rgba(209, 213, 219, 0.8)',
                     fontSize: '13px',
-                    fontWeight: '500',
+                    color: 'rgba(248, 113, 113, 1)',
+                    marginBottom: '16px',
+                    textAlign: 'center',
+                  }}
+                >
+                  {error}
+                </p>
+              )}
+
+              <div style={{ display: 'flex', gap: '12px' }}>
+                <button
+                  type="button"
+                  onClick={handleClose}
+                  disabled={isPending}
+                  style={{
+                    flex: 1,
+                    padding: '12px',
+                    background: 'rgba(75, 85, 99, 0.3)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    border: '2px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
                     cursor: isPending ? 'not-allowed' : 'pointer',
                     opacity: isPending ? 0.5 : 1,
                     transition: 'all 0.2s ease',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '8px',
                   }}
                   onMouseEnter={(e) => {
-                    if (!isPending && accessMode !== mode.value) {
-                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
-                      e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.4)'
+                    if (!isPending) {
+                      e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                     }
                   }}
                   onMouseLeave={(e) => {
-                    if (accessMode !== mode.value) {
-                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
-                      e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
+                    if (!isPending) {
+                      e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                     }
                   }}
                 >
-                  <span style={{ fontSize: '18px' }}>{mode.emoji}</span>
-                  <div style={{ textAlign: 'left', flex: 1, lineHeight: '1.2' }}>
-                    <div style={{ fontSize: '13px', fontWeight: '600' }}>{mode.label}</div>
-                    <div style={{ fontSize: '11px', opacity: 0.7 }}>{mode.desc}</div>
-                  </div>
+                  Cancel
                 </button>
-              ))}
-            </div>
-          </div>
-
-          {accessMode === 'password' && (
-            <div style={{ marginBottom: '20px' }}>
-              <label
+                <button
+                  type="submit"
+                  disabled={isPending}
+                  style={{
+                    flex: 1,
+                    padding: '12px',
+                    background: isPending
+                      ? 'rgba(75, 85, 99, 0.3)'
+                      : 'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))',
+                    color: 'rgba(255, 255, 255, 1)',
+                    border: isPending
+                      ? '2px solid rgba(75, 85, 99, 0.5)'
+                      : '2px solid rgba(34, 197, 94, 0.6)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: isPending ? 'not-allowed' : 'pointer',
+                    opacity: isPending ? 0.5 : 1,
+                    transition: 'all 0.2s ease',
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!isPending) {
+                      e.currentTarget.style.background =
+                        'linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))'
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isPending) {
+                      e.currentTarget.style.background =
+                        'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))'
+                    }
+                  }}
+                >
+                  {isPending ? 'Creating...' : 'Create Room'}
+                </button>
+              </div>
+            </form>
+          </>
+        ) : (
+          <>
+            {/* Success View */}
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '20px',
+              }}
+            >
+              <div
                 style={{
-                  display: 'block',
-                  marginBottom: '8px',
-                  fontWeight: '600',
-                  color: 'rgba(209, 213, 219, 1)',
-                  fontSize: '14px',
+                  fontSize: '48px',
+                  lineHeight: 1,
                 }}
               >
-                Room Password
-              </label>
-              <input
-                type="text"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Enter a password"
-                disabled={isPending}
+                ✓
+              </div>
+              <div
                 style={{
-                  width: '100%',
-                  padding: '12px',
-                  border: '2px solid rgba(75, 85, 99, 0.5)',
-                  borderRadius: '10px',
-                  background: 'rgba(255, 255, 255, 0.05)',
-                  color: 'rgba(209, 213, 219, 1)',
-                  fontSize: '15px',
-                  outline: 'none',
+                  textAlign: 'center',
                 }}
-                onFocus={(e) => {
-                  e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.6)'
-                }}
-                onBlur={(e) => {
-                  e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
-                }}
-              />
+              >
+                <h2
+                  style={{
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    marginBottom: '8px',
+                    color: 'rgba(134, 239, 172, 1)',
+                  }}
+                >
+                  Room Created!
+                </h2>
+                <p
+                  style={{
+                    fontSize: '14px',
+                    color: 'rgba(209, 213, 219, 0.8)',
+                  }}
+                >
+                  Ready to play
+                </p>
+              </div>
+
+              {/* Share buttons */}
+              {createdRoomCode && (
+                <div
+                  style={{
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '8px',
+                  }}
+                >
+                  <div
+                    style={{
+                      fontSize: '12px',
+                      fontWeight: '600',
+                      color: 'rgba(156, 163, 175, 1)',
+                      textAlign: 'center',
+                      marginBottom: '4px',
+                    }}
+                  >
+                    Invite friends (optional)
+                  </div>
+                  <RoomShareButtons joinCode={createdRoomCode} shareUrl={shareUrl} />
+                </div>
+              )}
+
+              {/* Action buttons */}
+              <div style={{ display: 'flex', gap: '12px', width: '100%', marginTop: '8px' }}>
+                <button
+                  type="button"
+                  onClick={handleClose}
+                  style={{
+                    flex: 1,
+                    padding: '12px',
+                    background: 'rgba(75, 85, 99, 0.3)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    border: '2px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
+                  }}
+                >
+                  Close
+                </button>
+                <button
+                  type="button"
+                  onClick={handleStartPlaying}
+                  style={{
+                    flex: 1,
+                    padding: '12px',
+                    background:
+                      'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))',
+                    color: 'rgba(255, 255, 255, 1)',
+                    border: '2px solid rgba(34, 197, 94, 0.6)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background =
+                      'linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background =
+                      'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))'
+                  }}
+                >
+                  Start Playing
+                </button>
+              </div>
             </div>
-          )}
-
-          {error && (
-            <p
-              style={{
-                fontSize: '13px',
-                color: 'rgba(248, 113, 113, 1)',
-                marginBottom: '16px',
-                textAlign: 'center',
-              }}
-            >
-              {error}
-            </p>
-          )}
-
-          <div style={{ display: 'flex', gap: '12px' }}>
-            <button
-              type="button"
-              onClick={handleClose}
-              disabled={isPending}
-              style={{
-                flex: 1,
-                padding: '12px',
-                background: 'rgba(75, 85, 99, 0.3)',
-                color: 'rgba(209, 213, 219, 1)',
-                border: '2px solid rgba(75, 85, 99, 0.5)',
-                borderRadius: '10px',
-                fontSize: '15px',
-                fontWeight: '600',
-                cursor: isPending ? 'not-allowed' : 'pointer',
-                opacity: isPending ? 0.5 : 1,
-                transition: 'all 0.2s ease',
-              }}
-              onMouseEnter={(e) => {
-                if (!isPending) {
-                  e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!isPending) {
-                  e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
-                }
-              }}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={isPending}
-              style={{
-                flex: 1,
-                padding: '12px',
-                background: isPending
-                  ? 'rgba(75, 85, 99, 0.3)'
-                  : 'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))',
-                color: 'rgba(255, 255, 255, 1)',
-                border: isPending
-                  ? '2px solid rgba(75, 85, 99, 0.5)'
-                  : '2px solid rgba(34, 197, 94, 0.6)',
-                borderRadius: '10px',
-                fontSize: '15px',
-                fontWeight: '600',
-                cursor: isPending ? 'not-allowed' : 'pointer',
-                opacity: isPending ? 0.5 : 1,
-                transition: 'all 0.2s ease',
-              }}
-              onMouseEnter={(e) => {
-                if (!isPending) {
-                  e.currentTarget.style.background =
-                    'linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))'
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!isPending) {
-                  e.currentTarget.style.background =
-                    'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))'
-                }
-              }}
-            >
-              {isPending ? 'Creating...' : 'Create Room'}
-            </button>
-          </div>
-        </form>
+          </>
+        )}
       </div>
     </Modal>
   )
diff --git a/apps/web/src/components/nav/RoomShareButtons.tsx b/apps/web/src/components/nav/RoomShareButtons.tsx
index c5e73da0..65ccebbc 100644
--- a/apps/web/src/components/nav/RoomShareButtons.tsx
+++ b/apps/web/src/components/nav/RoomShareButtons.tsx
@@ -19,31 +19,37 @@ export interface RoomShareButtonsProps {
  */
 export function RoomShareButtons({ joinCode, shareUrl }: RoomShareButtonsProps) {
   return (
-    <>
-      <CopyButton
-        text={joinCode}
-        variant="code"
-        label={
-          <>
-            <span>📋</span>
-            <span>{joinCode}</span>
-          </>
-        }
-      />
+    <div style={{ display: 'flex', gap: '6px', marginBottom: '6px' }}>
+      {/* Left side: stacked buttons */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', flex: 1 }}>
+        <CopyButton
+          text={joinCode}
+          variant="code"
+          label={
+            <>
+              <span>📋</span>
+              <span>{joinCode}</span>
+            </>
+          }
+          style={{ marginBottom: 0 }}
+        />
 
-      <CopyButton
-        text={shareUrl}
-        variant="link"
-        label={
-          <>
-            <span>🔗</span>
-            <span>Share Link</span>
-          </>
-        }
-        copiedLabel="Link Copied!"
-      />
+        <CopyButton
+          text={shareUrl}
+          variant="link"
+          label={
+            <>
+              <span>🔗</span>
+              <span>Share Link</span>
+            </>
+          }
+          copiedLabel="Link Copied!"
+          style={{ marginBottom: 0 }}
+        />
+      </div>
 
+      {/* Right side: QR code button */}
       <QRCodeButton url={shareUrl} />
-    </>
+    </div>
   )
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72317c75..b66ebe1c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -173,6 +173,9 @@ importers:
       python-bridge:
         specifier: ^1.1.0
         version: 1.1.0
+      qrcode.react:
+        specifier: ^4.2.0
+        version: 4.2.0(react@18.3.1)
       react:
         specifier: ^18.2.0
         version: 18.3.1
@@ -7726,6 +7729,11 @@ packages:
   python-bridge@1.1.0:
     resolution: {integrity: sha512-qjQ0QB8p9cn/XDeILQH0aP307hV58lrmv0Opjyub68Um7FHdF+ZXlTqyxNkKaXOFk2QSkScoPWwn7U9GGnrkeQ==}
 
+  qrcode.react@4.2.0:
+    resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   qs@6.13.0:
     resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==}
     engines: {node: '>=0.6'}
@@ -17587,6 +17595,10 @@ snapshots:
     dependencies:
       bluebird: 3.7.2
 
+  qrcode.react@4.2.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   qs@6.13.0:
     dependencies:
       side-channel: 1.1.0