diff --git a/deep-sea-stories/.env.example b/deep-sea-stories/.env.example
new file mode 100644
index 0000000..8b62bef
--- /dev/null
+++ b/deep-sea-stories/.env.example
@@ -0,0 +1,3 @@
+FISHJAM_ID=
+FISHJAM_MANAGEMENT_TOKEN=
+ELEVENLABS_API_KEY=
diff --git a/deep-sea-stories/packages/web/src/Layout.tsx b/deep-sea-stories/packages/web/src/Layout.tsx
index c124bde..1c9386e 100644
--- a/deep-sea-stories/packages/web/src/Layout.tsx
+++ b/deep-sea-stories/packages/web/src/Layout.tsx
@@ -3,7 +3,7 @@ import { Toaster } from '@/components/ui/sonner';
 
 const Layout: FC<PropsWithChildren> = (props) => {
 	return (
-		<main className="flex flex-col h-screen w-screen">
+		<main className="flex flex-col h-screen w-screen px-4 md:px-8">
 			{props.children}
 			<Toaster />
 		</main>
diff --git a/deep-sea-stories/packages/web/src/assets/elevenlabs.svg b/deep-sea-stories/packages/web/src/assets/elevenlabs.svg
index 5410000..1880710 100644
--- a/deep-sea-stories/packages/web/src/assets/elevenlabs.svg
+++ b/deep-sea-stories/packages/web/src/assets/elevenlabs.svg
@@ -1,4 +1,14 @@
-<svg width="876" height="876" viewBox="292 292 292 292" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M468 292H528V584H468V292Z" fill="#f4f4f4"/>
-<path d="M348 292H408V584H348V292Z" fill="#f4f4f4"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="694" height="90" viewBox="0 0 694 90" fill="none">
+<path d="M248.261 22.1901H230.466L251.968 88.5124H271.123L292.625 22.1901H274.83L261.365 72.1488L248.261 22.1901Z" fill="white"/>
+<path d="M0 0H18.413V88.5124H0V0Z" fill="white"/>
+<path d="M36.5788 0H54.9917V88.5124H36.5788V0Z" fill="white"/>
+<path d="M73.1551 0H127.652V14.7521H91.568V35.8264H125.181V50.5785H91.568V73.7603H127.652V88.5124H73.1551V0Z" fill="white"/>
+<path d="M138.896 0H156.32V88.5124H138.896V0Z" fill="white"/>
+<path d="M166.824 55.2893C166.824 31.1157 178.811 20.7025 197.471 20.7025C216.131 20.7025 226.759 30.9917 226.759 55.5372V59.5041H184.001C184.619 73.8843 188.944 78.719 197.224 78.719C203.773 78.719 207.851 74.876 208.593 68.1818H226.017C224.905 82.8099 212.795 90 197.224 90C177.452 90 166.824 79.4628 166.824 55.2893ZM209.582 47.9752C208.717 35.8264 204.515 31.8595 197.224 31.8595C189.933 31.8595 185.36 35.9504 184.125 47.9752H209.582Z" fill="white"/>
+<path d="M295.962 55.2893C295.962 31.1157 307.949 20.7025 326.609 20.7025C345.269 20.7025 355.897 30.9917 355.897 55.5372V59.5041H313.139C313.757 73.8843 318.082 78.719 326.362 78.719C332.911 78.719 336.989 74.876 337.731 68.1818H355.155C354.043 82.8099 341.932 90 326.362 90C306.589 90 295.962 79.4628 295.962 55.2893ZM338.719 47.9752C337.854 35.8264 333.653 31.8595 326.362 31.8595C319.071 31.8595 314.498 35.9504 313.263 47.9752H338.719Z" fill="white"/>
+<path d="M438.443 0H456.856V73.7603H491.457V88.5124H438.443V0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M495.783 55.2893C495.783 30 507.399 20.7025 522.352 20.7025C529.766 20.7025 536.563 24.9174 539.282 29.3802V22.1901H557.077V88.5124H539.776V80.7025C537.181 85.9091 529.89 90 521.857 90C506.04 90 495.783 79.8347 495.783 55.2893ZM526.924 33.719C535.574 33.719 540.27 40.2893 540.27 55.2893C540.27 70.2893 535.574 76.9835 526.924 76.9835C518.274 76.9835 513.331 70.2893 513.331 55.2893C513.331 40.2893 518.274 33.719 526.924 33.719Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M587.847 80.7025V88.5124H570.547V0H587.971V29.3802C590.937 24.7934 597.857 20.7025 605.272 20.7025C619.854 20.7025 631.47 30 631.47 55.2893C631.47 80.5785 620.101 90 604.901 90C596.869 90 590.319 85.9091 587.847 80.7025ZM600.329 33.843C608.979 33.843 613.922 40.2893 613.922 55.2893C613.922 70.2893 608.979 76.9835 600.329 76.9835C591.678 76.9835 586.982 70.2893 586.982 55.2893C586.982 40.2893 591.678 33.843 600.329 33.843Z" fill="white"/>
+<path d="M638.638 68.8017H656.062C656.309 75.7438 660.016 79.0909 666.566 79.0909C673.115 79.0909 676.823 76.1157 676.823 70.9091C676.823 66.1983 673.981 64.4628 667.802 62.9752L662.488 61.6116C647.412 57.7686 639.873 53.6777 639.873 41.157C639.873 28.6364 651.49 20.7025 666.319 20.7025C681.148 20.7025 692.394 26.5289 692.888 40.2893H675.463C675.093 34.2149 671.385 31.6116 666.072 31.6116C660.758 31.6116 657.05 34.2149 657.05 39.1736C657.05 43.7603 660.016 45.4959 665.207 46.7355L670.644 48.0992C684.979 51.6942 694 55.2893 694 68.6777C694 82.0661 682.137 90 666.072 90C648.647 90 639.008 83.4297 638.638 68.8017Z" fill="white"/>
+<path d="M384.072 49.4628C384.072 39.0496 389.015 33.3471 396.677 33.3471C402.979 33.3471 406.563 37.314 406.563 45.8678V88.5124H423.987V43.1405C423.987 27.7686 415.337 20.7025 402.732 20.7025C394.205 20.7025 387.162 25.0413 384.072 30.7438V22.1901H366.401V88.5124H384.072V49.4628Z" fill="white"/>
 </svg>
diff --git a/deep-sea-stories/packages/web/src/components/AgentPanel.tsx b/deep-sea-stories/packages/web/src/components/AgentPanel.tsx
index 15bc4af..c530b1f 100644
--- a/deep-sea-stories/packages/web/src/components/AgentPanel.tsx
+++ b/deep-sea-stories/packages/web/src/components/AgentPanel.tsx
@@ -28,8 +28,8 @@ const PanelEvent: FC<PropsWithChildren<PanelEventProps>> = ({
 }) => (
 	<div key={timestamp} className="flex gap-3 py-1 items-start">
 		<Icon size={24} className="flex-none" />
-		<div className="grow flex flex-col text-lg">{children}</div>
-		<div className="text-right flex-none text-sm text-muted">
+		<div className="grow flex flex-col text-sm md:text-lg">{children}</div>
+		<div className="text-right flex-none text-xs md:text-sm text-muted">
 			{new Date(timestamp).toLocaleTimeString()}
 		</div>
 	</div>
@@ -44,7 +44,7 @@ const renderEvent = (event: AgentEvent, index: number) => {
 					icon={LogIn}
 					timestamp={event.timestamp}
 				>
-					<div className="text-lg">
+					<div className="text-sm md:text-lg">
 						<span className="font-bold">{event.name}</span>
 						<span className="text-muted-foreground"> has joined the game</span>
 					</div>
@@ -57,7 +57,7 @@ const renderEvent = (event: AgentEvent, index: number) => {
 					icon={LogOut}
 					timestamp={event.timestamp}
 				>
-					<div className="text-lg">
+					<div className="text-sm md:text-lg">
 						<span className="font-bold">{event.name}</span>
 						<span className="text-muted-foreground"> has left the game</span>
 					</div>
@@ -70,7 +70,7 @@ const renderEvent = (event: AgentEvent, index: number) => {
 					icon={BookCheck}
 					timestamp={event.timestamp}
 				>
-					<div className="text-lg">
+					<div className="text-sm md:text-lg">
 						<span className="text-muted-foreground">Game Started</span>
 					</div>
 				</PanelEvent>
@@ -82,7 +82,7 @@ const renderEvent = (event: AgentEvent, index: number) => {
 					icon={OctagonMinus}
 					timestamp={event.timestamp}
 				>
-					<div className="text-lg">
+					<div className="text-sm md:text-lg">
 						<span className="text-muted-foreground">Game Ended</span>
 					</div>
 				</PanelEvent>
@@ -94,8 +94,8 @@ const renderEvent = (event: AgentEvent, index: number) => {
 					icon={MessageSquare}
 					timestamp={event.timestamp}
 				>
-					<div className="text-lg font-bold grow">Storyteller</div>
-					<div className="text-lg">
+					<div className="text-sm md:text-lg font-bold grow">Storyteller</div>
+					<div className="text-sm md:text-lg">
 						<p>{event.text}</p>
 					</div>
 				</PanelEvent>
@@ -107,13 +107,13 @@ const AgentPanel: FC<AgentPanelProps> = ({ roomId }) => {
 	const events = useAgentEvents(roomId);
 
 	return (
-		<div className="grid grid-cols-3 p-8 border rounded-xl">
+		<div className="md:grid grid-cols-3 flex flex-col md:p-8 md:border rounded-xl overflow-y-auto">
 			<img
 				src={blob}
 				alt="agent-visualizer"
-				className="object-contain h-full"
+				className="object-contain hidden md:block h-24 md:h-full flex-none"
 			/>
-			<ScrollArea className="grow col-span-2 border rounded-xl p-6">
+			<ScrollArea className="grow col-span-2 border rounded-xl p-3 md:p-6 md:mt-0 md:ml-4">
 				{events.map((event, index) => renderEvent(event, index))}
 			</ScrollArea>
 		</div>
diff --git a/deep-sea-stories/packages/web/src/components/DeepSeaLogo.tsx b/deep-sea-stories/packages/web/src/components/DeepSeaLogo.tsx
new file mode 100644
index 0000000..3b3c122
--- /dev/null
+++ b/deep-sea-stories/packages/web/src/components/DeepSeaLogo.tsx
@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils';
+import type { FC, HTMLAttributes } from 'react';
+
+type DeepSeaLogoProps = HTMLAttributes<HTMLHeadingElement>;
+
+export const DeepSeaLogo: FC<DeepSeaLogoProps> = (props) => (
+	<h1
+		{...props}
+		className={cn(
+			'font-title text-xl md:text-2xl text-center',
+			props.className,
+		)}
+	>
+		Deep Sea Stories
+	</h1>
+);
diff --git a/deep-sea-stories/packages/web/src/components/Footer.tsx b/deep-sea-stories/packages/web/src/components/Footer.tsx
index bd06928..fe48ca2 100644
--- a/deep-sea-stories/packages/web/src/components/Footer.tsx
+++ b/deep-sea-stories/packages/web/src/components/Footer.tsx
@@ -3,27 +3,29 @@ import elevenlabs from '@/assets/elevenlabs.svg';
 import fishjam from '@/assets/fishjam.svg';
 import HowItWorks from './HowItWorks';
 import HowToPlay from './HowToPlay';
-import Icon from './Icon';
 import LinkButton from './LinkButton';
 
 const Footer: FC = () => {
 	return (
-		<div className="flex pb-20 px-16 w-full flex-col items-center justify-between gap-4 md:flex-row">
-			<div className="flex items-center gap-4">
-				<p className="shrink-0 text-lg">Created with</p>
-				<LinkButton to="https://fishjam.io" variant="outline" newTab>
-					Fishjam
-					<Icon img={fishjam} alt="fishjam logo" />
-				</LinkButton>
-				<LinkButton to="https://elevenlabs.io" variant="outline" newTab>
-					ElevenLabs
-					<Icon img={elevenlabs} alt="elevenlabs logo" />
-				</LinkButton>
-			</div>
-			<div className="flex items-center gap-4">
+		<div className="flex w-full flex-col items-center md:flex-row-reverse justify-between gap-16 md:gap-4">
+			<div className="flex flex-col lg:flex-row items-center justify-between gap-4">
 				<HowToPlay />
 				<HowItWorks />
 			</div>
+
+			<div className="flex items-center flex-col md:flex-row gap-4">
+				<p className="shrink-0 text-lg">Created with</p>
+				<div className="flex gap-2 items-center flex-col lg:flex-row">
+					<LinkButton to="https://fishjam.io" variant="outline" newTab>
+						Fishjam
+						<img src={fishjam} alt="Fishjam logo" className="size-6 block" />
+					</LinkButton>
+
+					<LinkButton to="https://elevenlabs.io" variant="outline" newTab>
+						<img src={elevenlabs} alt="Elevenlabs logo" className="h-4 block" />
+					</LinkButton>
+				</div>
+			</div>
 		</div>
 	);
 };
diff --git a/deep-sea-stories/packages/web/src/components/HowItWorks.tsx b/deep-sea-stories/packages/web/src/components/HowItWorks.tsx
index 311b257..a6d2aca 100644
--- a/deep-sea-stories/packages/web/src/components/HowItWorks.tsx
+++ b/deep-sea-stories/packages/web/src/components/HowItWorks.tsx
@@ -15,11 +15,11 @@ const HowItWorks: FC<ButtonProps> = ({ variant, ...props }) => (
 				How does it work?
 			</Button>
 		</DialogTrigger>
-		<DialogContent className="bg-accent p-12 w-4xl rounded-4xl">
+		<DialogContent className="bg-accent p-12 max-w-4xl rounded-4xl">
 			<DialogHeader className="font-display text-2xl pb-4">
 				How to play Deep Sea Stories?
 			</DialogHeader>
-			<DialogDescription className="text-lg text-primary flex flex-col gap-4">
+			<DialogDescription className="text-lg text-primary flex flex-col gap-4 overflow-auto max-h-[50vh]">
 				<p>
 					“Deep Sea Stories” are a loose adaptation of the well-known game
 					called “Dark Stories”. With the help of an AI agent and room you can
diff --git a/deep-sea-stories/packages/web/src/components/HowToPlay.tsx b/deep-sea-stories/packages/web/src/components/HowToPlay.tsx
index 750145b..f763a4c 100644
--- a/deep-sea-stories/packages/web/src/components/HowToPlay.tsx
+++ b/deep-sea-stories/packages/web/src/components/HowToPlay.tsx
@@ -12,14 +12,14 @@ const HowToPlay: FC<ButtonProps> = ({ variant, ...props }) => (
 	<Dialog>
 		<DialogTrigger asChild>
 			<Button variant={variant ?? 'outline'} {...props}>
-				How to play?
+				Help
 			</Button>
 		</DialogTrigger>
-		<DialogContent className="bg-accent p-12 w-4xl rounded-4xl">
+		<DialogContent className="bg-accent p-12 max-w-4xl rounded-4xl">
 			<DialogHeader className="font-display text-2xl pb-4">
 				How to play Deep Sea Stories?
 			</DialogHeader>
-			<DialogDescription className="text-lg text-primary flex flex-col gap-4">
+			<DialogDescription className="text-lg text-primary flex flex-col gap-4 overflow-auto max-h-[50vh]">
 				<p>
 					“Deep Sea Stories” are a loose adaptation of the well-known game
 					called “Dark Stories”. With the help of an AI agent and room you can
diff --git a/deep-sea-stories/packages/web/src/components/PeerTile.tsx b/deep-sea-stories/packages/web/src/components/PeerTile.tsx
index 526496c..0c5aa51 100644
--- a/deep-sea-stories/packages/web/src/components/PeerTile.tsx
+++ b/deep-sea-stories/packages/web/src/components/PeerTile.tsx
@@ -30,14 +30,14 @@ export const PeerTile: FC<PeerTileProps> = ({
 	return (
 		<div
 			className={cn(
-				'h-full w-full grid place-items-center border rounded-xl',
+				'h-full w-full flex border items-center max-w-xl justify-center rounded-xl overflow-hidden',
 				className,
 			)}
 			{...props}
 		>
 			{stream ? (
 				<video
-					className="h-full w-full rounded-xl object-cover"
+					className="h-full rounded-xl max-w-full object-cover"
 					autoPlay
 					muted
 					disablePictureInPicture
@@ -45,7 +45,9 @@ export const PeerTile: FC<PeerTileProps> = ({
 					ref={videoRef}
 				></video>
 			) : (
-				<div className="text-xl font-display">{name}</div>
+				<div className="text-sm md:text-xl font-display text-center p-2">
+					{name}
+				</div>
 			)}
 			{/* biome-ignore lint/a11y/useMediaCaption: Peer audio feed from WebRTC doesn't have captions */}
 			<audio ref={audioRef} autoPlay playsInline title={`Audio from ${name}`} />
diff --git a/deep-sea-stories/packages/web/src/components/RoomControls.tsx b/deep-sea-stories/packages/web/src/components/RoomControls.tsx
index 48d20ad..def96e2 100644
--- a/deep-sea-stories/packages/web/src/components/RoomControls.tsx
+++ b/deep-sea-stories/packages/web/src/components/RoomControls.tsx
@@ -8,6 +8,7 @@ import StorySelectionPanel from './StorySelectionPanel';
 import { Button } from './ui/button';
 import { toast } from './ui/sonner';
 import { useTRPCClient } from '@/contexts/trpc';
+import { DeepSeaLogo } from './DeepSeaLogo';
 
 export type RoomControlsProps = {
 	roomId: string;
@@ -23,30 +24,30 @@ const RoomControls: FC<RoomControlsProps> = ({ roomId }) => {
 	}, [trpc]);
 
 	return (
-		<div className="flex flex-col py-6 gap-8">
-			<section className="font-title text-2xl text-center">
-				Deep Sea Stories
-			</section>
-			<section className="w-full grow">
+		<div className="flex flex-col py-2 md:py-6 gap-4 md:gap-8">
+			<DeepSeaLogo className="hidden md:block" />
+
+			<section className="w-full flex-none grid grid-cols-2 md:flex md:flex-col gap-4">
 				<Button
 					size="large"
-					className="w-full"
+					className="col-span-2 md:w-full text-sm md:text-base"
 					onClick={() => setIsStoryPanelOpen(true)}
 				>
 					Choose a story
 				</Button>
-			</section>
-			<section className="w-full flex-none flex flex-col gap-4">
-				<HowToPlay className="w-full" />
-				<HowItWorks className="w-full" />
+
+				<HowToPlay className="w-full text-sm md:text-base" />
+				<HowItWorks className="w-full text-sm md:text-base" />
 				<CopyButton
 					variant="outline"
+					className="col-span-2 md:col-span-1 text-sm md:text-base"
 					onCopy={() => toast('Gameroom link copied to clipboard', Check)}
 					value={url}
 				>
-					{url.length > 40 ? `${url.substring(0, 37)}...` : url}
+					Copy room link
 				</CopyButton>
 			</section>
+
 			<StorySelectionPanel
 				isOpen={isStoryPanelOpen}
 				onClose={() => setIsStoryPanelOpen(false)}
diff --git a/deep-sea-stories/packages/web/src/components/TitleBar.tsx b/deep-sea-stories/packages/web/src/components/TitleBar.tsx
index f8468f0..f32bc80 100644
--- a/deep-sea-stories/packages/web/src/components/TitleBar.tsx
+++ b/deep-sea-stories/packages/web/src/components/TitleBar.tsx
@@ -1,10 +1,12 @@
 import type { FC } from 'react';
+import { DeepSeaLogo } from './DeepSeaLogo';
 
 const TitleBar: FC = () => {
 	return (
-		<div className="flex w-full pt-16 flex-col items-center justify-between gap-10">
-			<h1 className="font-title text-8xl">Deep Sea Stories</h1>
-			<h2 className="font-display text-3xl">
+		<div className="w-full space-y-4 text-center">
+			<DeepSeaLogo className="text-6xl xl:text-8xl" />
+
+			<h2 className="font-display text-xl lg:text-3xl">
 				Hear the most mysterious stories and try to deduce how they happened.
 			</h2>
 		</div>
diff --git a/deep-sea-stories/packages/web/src/contexts/trpc.tsx b/deep-sea-stories/packages/web/src/contexts/trpc.tsx
index 0722fbb..e3cf77e 100644
--- a/deep-sea-stories/packages/web/src/contexts/trpc.tsx
+++ b/deep-sea-stories/packages/web/src/contexts/trpc.tsx
@@ -32,6 +32,9 @@ export const TRPCClientProvider: FC<TRPCClientProviderProps> = ({
 	queryClient,
 	children,
 }) => {
+	if (!import.meta.env.VITE_BACKEND_URL) {
+		throw new Error('VITE_BACKEND_URL is not set');
+	}
 	const [trpcClient] = useState(() =>
 		createTRPCClient<AppRouter>({
 			links: [
diff --git a/deep-sea-stories/packages/web/src/views/GameView.tsx b/deep-sea-stories/packages/web/src/views/GameView.tsx
index 739c4c6..4183696 100644
--- a/deep-sea-stories/packages/web/src/views/GameView.tsx
+++ b/deep-sea-stories/packages/web/src/views/GameView.tsx
@@ -1,4 +1,8 @@
-import { usePeers } from '@fishjam-cloud/react-client';
+import {
+	useCamera,
+	useInitializeDevices,
+	usePeers,
+} from '@fishjam-cloud/react-client';
 import type { FC } from 'react';
 import { useMemo, useEffect, useRef } from 'react';
 import { useQuery } from '@tanstack/react-query';
@@ -6,6 +10,7 @@ import AgentPanel from '@/components/AgentPanel';
 import { PeerTile } from '@/components/PeerTile';
 import RoomControls from '@/components/RoomControls';
 import { useTRPCClient } from '@/contexts/trpc';
+import { cn } from '@/lib/utils';
 
 export type GameViewProps = {
 	roomId: string;
@@ -49,28 +54,27 @@ const GameView: FC<GameViewProps> = ({ roomId }) => {
 		agentAudioRef.current.srcObject = audioStream ?? null;
 	}, [agentPeer?.tracks[0]?.stream]);
 
-	const gridColumns = displayedPeers.length + 1;
-
 	return (
 		<>
-			<section className="w-full h-1/2 flex gap-8 pt-10 px-10">
+			<section className="w-full h-1/2 flex flex-col md:flex-row gap-8 pt-10 px-10">
 				<AgentPanel roomId={roomId} />
 				<RoomControls roomId={roomId} />
 			</section>
+
 			<section
-				className="w-full h-1/2 grid place-items-center gap-4 py-10 px-10"
-				style={{
-					gridTemplateColumns: `repeat(${gridColumns}, minmax(0, 1fr))`,
-				}}
+				className={cn(
+					'h-1/2 items-center w-full justify-items-center grid gap-4 py-10 overflow-hidden grid-cols-2 grid-rows-2 xl:grid-cols-4 xl:grid-rows-1',
+					{
+						'grid-cols-1 grid-rows-1 xl:grid-cols-1 md:grid-rows-1':
+							displayedPeers.length === 0,
+						'grid-rows-2 grid-cols-1 md:grid-cols-2 md:grid-rows-1 xl:grid-rows-1 xl:grid-cols-2':
+							displayedPeers.length === 1,
+					},
+				)}
 			>
-				<PeerTile
-					className="max-w-2xl"
-					name="You"
-					stream={localPeer?.cameraTrack?.stream}
-				/>
+				<PeerTile name="You" stream={localPeer?.cameraTrack?.stream} />
 				{displayedPeers.map((peer) => (
 					<PeerTile
-						className="max-w-2xl"
 						name={peer.metadata?.peer?.name ?? peer.id}
 						key={peer.id}
 						stream={
diff --git a/deep-sea-stories/packages/web/src/views/HomeView.tsx b/deep-sea-stories/packages/web/src/views/HomeView.tsx
index afbe202..e6f0979 100644
--- a/deep-sea-stories/packages/web/src/views/HomeView.tsx
+++ b/deep-sea-stories/packages/web/src/views/HomeView.tsx
@@ -23,7 +23,7 @@ export default function HomeView() {
 	};
 
 	return (
-		<>
+		<section className="h-full w-full flex justify-between flex-col py-16 px-4 lg:px-16">
 			<TitleBar />
 			<section className="flex-1 py-16 grid place-items-center">
 				<Button
@@ -36,6 +36,6 @@ export default function HomeView() {
 				</Button>
 			</section>
 			<Footer />
-		</>
+		</section>
 	);
 }
diff --git a/deep-sea-stories/packages/web/src/views/JoinView.tsx b/deep-sea-stories/packages/web/src/views/JoinView.tsx
index 7ddb428..3a23610 100644
--- a/deep-sea-stories/packages/web/src/views/JoinView.tsx
+++ b/deep-sea-stories/packages/web/src/views/JoinView.tsx
@@ -65,26 +65,31 @@ const JoinView: FC<JoinViewProps> = ({ roomId }) => {
 	}, [trpcClient, roomId, joinRoom, name]);
 
 	return (
-		<>
-			<section className="font-title w-full text-center text-lg py-10">
+		<section className="space-y-4 py-8">
+			<h1 className="font-title w-full text-center text-4xl">
 				Deep Sea Stories
-			</section>
-			<section className="w-full text-center flex flex-col gap-8 py-12">
-				<div className="text-4xl font-display">Finish a player setup</div>
-				<div className="text-2xl">
+			</h1>
+
+			<section className="w-full md:pt-8 text-center flex flex-col gap-4">
+				<div className="text-2xl md:text-3xl font-display">
+					Finish a player setup
+				</div>
+				<div className="text-lg md:text-xl">
 					Enter your player’s name and test out your camera and microphone.
 				</div>
 			</section>
-			<section className="w-full flex-1 grid place-items-center">
-				<div className="w-2xl h-full flex flex-col gap-4 items-center justify-between">
+
+			<section className="flex-1 grid place-items-center">
+				<div className="max-w-xl h-full flex flex-col gap-4 items-center justify-between">
 					<Input
 						className="font-display"
+						autoFocus
 						onChange={(e) => setName(e.target.value)}
 						value={name}
 						placeholder="Enter your name"
 					/>
-					<PeerTile className="flex-1" name={name} stream={cameraStream} />
-					<div className="flex gap-4">
+					<PeerTile name={name} stream={cameraStream} />
+					<div className="flex gap-4 md:flex-row flex-col">
 						<DeviceSelect
 							placeholder="Select camera"
 							devices={cameraDevices}
@@ -93,6 +98,7 @@ const JoinView: FC<JoinViewProps> = ({ roomId }) => {
 						>
 							<Camera size={24} className="flex-none" />
 						</DeviceSelect>
+
 						<DeviceSelect
 							placeholder="Select microphone"
 							devices={microphoneDevices}
@@ -104,12 +110,13 @@ const JoinView: FC<JoinViewProps> = ({ roomId }) => {
 					</div>
 				</div>
 			</section>
-			<section className="w-full pt-10 pb-16 grid place-items-center">
+
+			<section className="w-full grid place-items-center">
 				<Button onClick={handleEnterRoom} size="large">
 					Enter the game room
 				</Button>
 			</section>
-		</>
+		</section>
 	);
 };