diff --git a/App.tsx b/App.tsx
index 8f0e380..1bcfac8 100644
--- a/App.tsx
+++ b/App.tsx
@@ -137,10 +137,10 @@ function App() {
   });
 
   return (
-    <div className="min-h-screen text-white relative">
+    <div className="h-screen text-white relative overflow-hidden">
       <FloatingShapes />
       
-      <div className="relative z-10">
+      <div className="relative z-10 h-full">
         {gameState === 'LANDING' || gameState === 'GENERATING' ? (
           <Landing 
             onGenerate={startQuizGen} 
@@ -179,6 +179,7 @@ function App() {
               role={role}
               onStart={startGame}
               onEndGame={role === 'HOST' ? endGame : undefined}
+              currentPlayerId={currentPlayerId}
             />
             {auth.isAuthenticated && pendingQuizToSave && (
               <SaveQuizPrompt
diff --git a/components/DisconnectedScreen.tsx b/components/DisconnectedScreen.tsx
index 0596d5a..5077fd5 100644
--- a/components/DisconnectedScreen.tsx
+++ b/components/DisconnectedScreen.tsx
@@ -18,7 +18,7 @@ export const DisconnectedScreen: React.FC<DisconnectedScreenProps> = ({
   onGoHome,
 }) => {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen p-6 text-center">
+    <div className="flex flex-col items-center justify-center h-screen p-4 md:p-6 text-center overflow-hidden">
       <motion.div
         initial={{ scale: 0.8, opacity: 0 }}
         animate={{ scale: 1, opacity: 1 }}
diff --git a/components/GameConfigPanel.tsx b/components/GameConfigPanel.tsx
index df29120..1ee8131 100644
--- a/components/GameConfigPanel.tsx
+++ b/components/GameConfigPanel.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Shuffle, Eye, Flame, TrendingUp, MinusCircle, Award, Info, ChevronDown, ChevronUp } from 'lucide-react';
+import { Shuffle, Eye, Flame, TrendingUp, MinusCircle, Award, Info, ChevronDown, ChevronUp, Dices } from 'lucide-react';
 import type { GameConfig } from '../types';
 
 interface GameConfigPanelProps {
@@ -222,6 +222,16 @@ export const GameConfigPanel: React.FC<GameConfigPanelProps> = ({
         onChange={(v) => update({ hostParticipates: v })}
       />
 
+      <ToggleRow
+        icon={<Dices size={20} />}
+        iconActive={config.randomNamesEnabled}
+        label="Random Names"
+        description="Assign fun two-word names to players"
+        checked={config.randomNamesEnabled}
+        onChange={(v) => update({ randomNamesEnabled: v })}
+        tooltip="Players will be assigned random names like 'Brave Falcon' or 'Swift Tiger' instead of choosing their own nicknames."
+      />
+
       <ToggleRow
         icon={<Flame size={20} />}
         iconActive={config.streakBonusEnabled}
diff --git a/components/GameScreen.tsx b/components/GameScreen.tsx
index 060de98..d68279d 100644
--- a/components/GameScreen.tsx
+++ b/components/GameScreen.tsx
@@ -40,35 +40,34 @@ export const GameScreen: React.FC<GameScreenProps> = ({
   return (
     <div className="flex flex-col h-screen max-h-screen overflow-hidden relative">
       {/* Header */}
-      <div className="flex justify-between items-center p-4 md:p-6">
-        <div className="bg-white/20 backdrop-blur-md px-6 py-2 rounded-2xl font-black text-xl shadow-sm border-2 border-white/10">
+      <div className="flex justify-between items-center p-2 md:p-6 shrink-0">
+        <div className="bg-white/20 backdrop-blur-md px-3 md:px-6 py-1 md:py-2 rounded-xl md:rounded-2xl font-black text-sm md:text-xl shadow-sm border-2 border-white/10">
           {currentQuestionIndex + 1} / {totalQuestions}
         </div>
         
-        {/* Whimsical Timer */}
         <div className="relative">
-             <div className="absolute inset-0 bg-white/20 rounded-full blur-xl animate-pulse"></div>
-<div className={`bg-white ${timerTextColor} rounded-full w-20 h-20 flex items-center justify-center text-4xl font-black shadow-[0_6px_0_rgba(0,0,0,0.2)] border-4 ${timerBorderColor} ${timerAnimation} relative z-10 transition-colors duration-300`}>
-                {timeLeftSeconds}
-              </div>
+          <div className="absolute inset-0 bg-white/20 rounded-full blur-xl animate-pulse"></div>
+          <div className={`bg-white ${timerTextColor} rounded-full w-14 h-14 md:w-20 md:h-20 flex items-center justify-center text-2xl md:text-4xl font-black shadow-[0_6px_0_rgba(0,0,0,0.2)] border-4 ${timerBorderColor} ${timerAnimation} relative z-10 transition-colors duration-300`}>
+            {timeLeftSeconds}
+          </div>
         </div>
 
-        <div className="bg-white/20 backdrop-blur-md px-6 py-2 rounded-2xl font-black text-xl shadow-sm border-2 border-white/10">
+        <div className="bg-white/20 backdrop-blur-md px-3 md:px-6 py-1 md:py-2 rounded-xl md:rounded-2xl font-black text-sm md:text-xl shadow-sm border-2 border-white/10">
           {isClient ? 'Player' : isSpectator ? 'Spectator' : 'Host'}
         </div>
       </div>
 
       {/* Question Area */}
-      <div className="flex-1 flex flex-col items-center justify-center p-4 md:p-8 text-center relative z-10">
+      <div className="shrink-0 flex flex-col items-center justify-center p-2 md:p-8 text-center relative z-10">
         {question && (
           <motion.div
             key={question.id}
             initial={{ y: 20, opacity: 0, scale: 0.95 }}
             animate={{ y: 0, opacity: 1, scale: 1 }}
             transition={{ duration: 0.3, ease: "easeOut" }}
-            className="bg-white text-black p-8 md:p-12 rounded-[2rem] shadow-[0_12px_0_rgba(0,0,0,0.1)] max-w-5xl w-full border-b-8 border-gray-200"
+            className="bg-white text-black p-4 md:p-12 rounded-2xl md:rounded-[2rem] shadow-[0_12px_0_rgba(0,0,0,0.1)] max-w-5xl w-full border-b-4 md:border-b-8 border-gray-200"
           >
-            <h2 className="text-2xl md:text-5xl font-black text-[#333] font-display leading-tight">
+            <h2 className="text-lg md:text-5xl font-black text-[#333] font-display leading-tight">
               {question.text}
             </h2>
           </motion.div>
@@ -76,7 +75,7 @@ export const GameScreen: React.FC<GameScreenProps> = ({
       </div>
 
       {/* Answer Grid */}
-      <div className="grid grid-cols-2 gap-3 md:gap-6 p-3 md:p-6 h-1/2 md:h-[45vh] pb-8 md:pb-12">
+      <div className="grid grid-cols-2 gap-2 md:gap-6 p-2 md:p-6 flex-1 min-h-0">
         {displayOptions.map((option, idx) => {
           const ShapeIcon = SHAPES[option.shape];
           const colorClass = COLORS[option.color];
diff --git a/components/HostReconnected.tsx b/components/HostReconnected.tsx
index 3069ac0..4783fef 100644
--- a/components/HostReconnected.tsx
+++ b/components/HostReconnected.tsx
@@ -20,7 +20,7 @@ export const HostReconnected: React.FC<HostReconnectedProps> = ({
   onEndGame,
 }) => {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen p-6 text-center">
+    <div className="flex flex-col items-center justify-center h-screen p-4 md:p-6 text-center overflow-hidden">
       <motion.div
         initial={{ scale: 0.8, opacity: 0 }}
         animate={{ scale: 1, opacity: 1 }}
diff --git a/components/Landing.tsx b/components/Landing.tsx
index f8c52d2..0e8ceb5 100644
--- a/components/Landing.tsx
+++ b/components/Landing.tsx
@@ -40,6 +40,8 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
   const [editingDefaultConfig, setEditingDefaultConfig] = useState<GameConfig | null>(null);
   const [preferencesOpen, setPreferencesOpen] = useState(false);
   const [accountSettingsOpen, setAccountSettingsOpen] = useState(false);
+  const [gameInfo, setGameInfo] = useState<{ randomNamesEnabled: boolean; quizTitle: string } | null>(null);
+  const [checkingPin, setCheckingPin] = useState(false);
   
   const hasImageFile = selectedFiles.some(f => f.type.startsWith('image/'));
   const hasDocumentFile = selectedFiles.some(f => !f.type.startsWith('image/') && !['application/pdf', 'text/plain', 'text/markdown', 'text/csv', 'text/html'].includes(f.type));
@@ -67,6 +69,30 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
     }
   }, [libraryOpen, auth.isAuthenticated, fetchQuizzes]);
 
+  useEffect(() => {
+    const checkGamePin = async () => {
+      if (pin.trim().length === 6) {
+        setCheckingPin(true);
+        try {
+          const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3001';
+          const response = await fetch(`${backendUrl}/api/games/${pin.trim()}`);
+          if (response.ok) {
+            const data = await response.json();
+            setGameInfo({ randomNamesEnabled: data.randomNamesEnabled, quizTitle: data.quizTitle });
+          } else {
+            setGameInfo(null);
+          }
+        } catch {
+          setGameInfo(null);
+        }
+        setCheckingPin(false);
+      } else {
+        setGameInfo(null);
+      }
+    };
+    checkGamePin();
+  }, [pin]);
+
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
       const newFiles = Array.from(e.target.files);
@@ -128,7 +154,9 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
 
   const handleJoinSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (pin.trim() && name.trim()) onJoin(pin, name);
+    if (pin.trim() && (gameInfo?.randomNamesEnabled || name.trim())) {
+      onJoin(pin, name.trim() || 'Player');
+    }
   };
 
   const handleLoadQuiz = async (id: string) => {
@@ -145,7 +173,7 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
   };
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen p-4 text-center relative">
+    <div className="flex flex-col items-center justify-center h-screen p-4 text-center relative overflow-hidden">
       <div className="absolute top-4 right-4 flex items-center gap-2">
         {auth.isAuthenticated && (
           <>
@@ -174,17 +202,17 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
         initial={{ scale: 0.8, opacity: 0, rotate: -2 }}
         animate={{ scale: 1, opacity: 1, rotate: 0 }}
         transition={{ type: "spring", bounce: 0.5 }}
-        className="bg-white text-gray-900 p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] max-w-md w-full border-4 border-white/50"
+        className="bg-white text-gray-900 p-6 md:p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] max-w-md w-full border-4 border-white/50 max-h-[calc(100vh-2rem)] overflow-y-auto"
       >
-        <div className="flex justify-center mb-6">
-          <div className="bg-theme-primary p-4 rounded-3xl rotate-3 shadow-lg">
-            <BrainCircuit size={48} className="text-white" />
+        <div className="flex justify-center mb-4 md:mb-6">
+          <div className="bg-theme-primary p-3 md:p-4 rounded-2xl md:rounded-3xl rotate-3 shadow-lg">
+            <BrainCircuit size={36} className="text-white md:w-12 md:h-12" />
           </div>
         </div>
-        <h1 className="text-5xl font-black mb-2 text-theme-primary tracking-tight">Kaboot</h1>
-        <p className="text-gray-500 font-bold mb-6">The AI Quiz Party</p>
+        <h1 className="text-4xl md:text-5xl font-black mb-1 md:mb-2 text-theme-primary tracking-tight">Kaboot</h1>
+        <p className="text-gray-500 font-bold mb-4 md:mb-6">The AI Quiz Party</p>
         
-        <div className="flex bg-gray-100 p-2 rounded-2xl mb-8">
+        <div className="flex bg-gray-100 p-2 rounded-2xl mb-6 md:mb-8">
             <button 
                 onClick={() => setMode('HOST')}
                 className={`flex-1 py-3 rounded-xl font-black text-lg transition-all duration-200 ${mode === 'HOST' ? 'bg-white shadow-md text-theme-primary scale-105' : 'text-gray-400 hover:text-gray-600'}`}
@@ -432,19 +460,27 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
                 onChange={(e) => setPin(e.target.value)}
                 className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none text-center"
               />
-              <input
-                type="text"
-                placeholder="Nickname"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none text-center"
-              />
+              {gameInfo?.randomNamesEnabled ? (
+                <div className="p-4 bg-theme-primary/10 rounded-2xl border-2 border-theme-primary/20">
+                  <p className="text-theme-primary font-bold text-center">
+                    You'll get a random name!
+                  </p>
+                </div>
+              ) : (
+                <input
+                  type="text"
+                  placeholder="Nickname"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none text-center"
+                />
+              )}
               <button
                 type="submit"
-                disabled={!pin.trim() || !name.trim()}
-                className="w-full bg-[#333] text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#000] active:shadow-none active:translate-y-[6px] transition-all hover:bg-black flex items-center justify-center gap-3"
+                disabled={!pin.trim() || (!gameInfo?.randomNamesEnabled && !name.trim()) || checkingPin}
+                className="w-full bg-[#333] text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#000] active:shadow-none active:translate-y-[6px] transition-all hover:bg-black flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                <Play fill="currentColor" /> Join Game
+                {checkingPin ? <Loader2 className="animate-spin" /> : <Play fill="currentColor" />} Join Game
               </button>
             </form>
         )}
diff --git a/components/Lobby.tsx b/components/Lobby.tsx
index 972f783..e3c518f 100644
--- a/components/Lobby.tsx
+++ b/components/Lobby.tsx
@@ -11,23 +11,25 @@ interface LobbyProps {
   role: 'HOST' | 'CLIENT';
   onStart: () => void;
   onEndGame?: () => void;
+  currentPlayerId?: string | null;
 }
 
-export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role, onStart, onEndGame }) => {
+export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role, onStart, onEndGame, currentPlayerId }) => {
   const isHost = role === 'HOST';
   const realPlayers = players.filter(p => p.id !== 'host');
+  const currentPlayer = currentPlayerId ? players.find(p => p.id === currentPlayerId) : null;
 
   return (
-    <div className="flex flex-col min-h-screen p-6">
-      <header className="flex flex-col md:flex-row justify-between items-center bg-white/10 p-6 rounded-[2rem] backdrop-blur-md mb-8 gap-6 border-4 border-white/20 shadow-xl">
+    <div className="flex flex-col h-screen p-4 md:p-6 overflow-hidden">
+      <header className="flex flex-col md:flex-row justify-between items-center bg-white/10 p-4 md:p-6 rounded-2xl md:rounded-[2rem] backdrop-blur-md mb-4 md:mb-8 gap-3 md:gap-6 border-4 border-white/20 shadow-xl shrink-0">
         <div className="flex flex-col items-center md:items-start">
-            <span className="text-white/80 font-bold uppercase tracking-widest text-sm mb-1">Game PIN</span>
-            <div className="text-5xl md:text-6xl font-black bg-white text-theme-primary px-8 py-2 rounded-full shadow-[0_6px_0_rgba(0,0,0,0.2)] tracking-wider">
+            <span className="text-white/80 font-bold uppercase tracking-widest text-xs md:text-sm mb-1">Game PIN</span>
+            <div className="text-4xl md:text-6xl font-black bg-white text-theme-primary px-6 md:px-8 py-1 md:py-2 rounded-full shadow-[0_6px_0_rgba(0,0,0,0.2)] tracking-wider">
                 {gamePin}
             </div>
         </div>
         
-        <div className="text-center">
+        <div className="text-center hidden md:block">
             <div className="text-3xl font-black font-display mb-2">{quizTitle}</div>
             <div className="inline-flex items-center gap-2 bg-[#00000040] px-4 py-1 rounded-full">
                 <div className="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
@@ -35,23 +37,23 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
             </div>
         </div>
         
-        <div className="bg-white/20 px-6 py-3 rounded-2xl font-black text-2xl flex flex-col items-center min-w-[120px]">
+        <div className="bg-white/20 px-4 md:px-6 py-2 md:py-3 rounded-xl md:rounded-2xl font-black text-xl md:text-2xl flex flex-col items-center min-w-[100px] md:min-w-[120px]">
             <span>{realPlayers.length}</span>
-            <span className="text-sm font-bold opacity-80 uppercase">Players</span>
+            <span className="text-xs md:text-sm font-bold opacity-80 uppercase">Players</span>
         </div>
       </header>
 
-      <main className="flex-1 flex flex-col items-center justify-center">
+      <main className="flex-1 flex flex-col items-center justify-center overflow-hidden min-h-0">
         {isHost ? (
             <>
-                <div className="flex flex-wrap gap-4 justify-center w-full max-w-6xl mb-12 min-h-[200px] content-start">
+                <div className="flex flex-wrap gap-3 md:gap-4 justify-center w-full max-w-6xl pb-24 md:pb-28 overflow-y-auto content-start">
                 <AnimatePresence>
                     {realPlayers.length === 0 && (
-                        <div className="flex flex-col items-center opacity-60 mt-12">
-                            <div className="bg-white/10 p-6 rounded-full mb-4 animate-bounce">
-                                <Sparkles size={48} />
+                        <div className="flex flex-col items-center opacity-60 mt-8 md:mt-12">
+                            <div className="bg-white/10 p-4 md:p-6 rounded-full mb-4 animate-bounce">
+                                <Sparkles size={36} className="md:w-12 md:h-12" />
                             </div>
-                            <div className="text-3xl font-bold font-display">Waiting for players to join...</div>
+                            <div className="text-xl md:text-3xl font-bold font-display text-center px-4">Waiting for players to join...</div>
                         </div>
                     )}
                     {realPlayers.map((player) => (
@@ -60,7 +62,7 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
                         initial={{ scale: 0, rotate: -10 }}
                         animate={{ scale: 1, rotate: 0 }}
                         exit={{ scale: 0, opacity: 0 }}
-                        className="bg-white text-black px-6 py-3 rounded-full font-black text-xl shadow-[0_4px_0_rgba(0,0,0,0.2)] flex items-center gap-3 border-b-4 border-gray-200"
+                        className="bg-white text-black px-4 md:px-6 py-2 md:py-3 rounded-full font-black text-base md:text-xl shadow-[0_4px_0_rgba(0,0,0,0.2)] flex items-center gap-2 md:gap-3 border-b-4 border-gray-200"
                     >
                         <PlayerAvatar seed={player.avatarSeed} size={20} />
                         {player.name}
@@ -72,38 +74,45 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
                 <motion.div 
                     initial={{ y: 50, opacity: 0 }}
                     animate={{ y: 0, opacity: 1 }}
-                    className="fixed bottom-8 flex gap-4"
+                    className="fixed bottom-4 md:bottom-8 flex gap-2 md:gap-4 px-4"
                 >
                     {onEndGame && (
                         <button
                             onClick={onEndGame}
-                            className="bg-white/20 text-white px-8 py-5 rounded-full text-xl font-bold hover:bg-white/30 active:scale-95 transition-all flex items-center gap-2"
+                            className="bg-white/20 text-white px-4 md:px-8 py-3 md:py-5 rounded-full text-base md:text-xl font-bold hover:bg-white/30 active:scale-95 transition-all flex items-center gap-2"
                         >
-                            <X size={24} />
-                            End Game
+                            <X size={20} className="md:w-6 md:h-6" />
+                            <span className="hidden md:inline">End Game</span>
+                            <span className="md:hidden">End</span>
                         </button>
                     )}
                     <button
                         onClick={onStart}
                         disabled={realPlayers.length === 0}
-                        className="bg-white text-theme-primary px-16 py-5 rounded-full text-3xl font-black hover:scale-105 active:scale-95 transition-all shadow-[0_8px_0_rgba(0,0,0,0.2)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none disabled:translate-y-2"
+                        className="bg-white text-theme-primary px-8 md:px-16 py-3 md:py-5 rounded-full text-xl md:text-3xl font-black hover:scale-105 active:scale-95 transition-all shadow-[0_8px_0_rgba(0,0,0,0.2)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none disabled:translate-y-2"
                     >
-                        Start Game
+                        Start
                     </button>
                 </motion.div>
             </>
         ) : (
-            <div className="flex flex-col items-center justify-center h-full text-center p-8">
+            <div className="flex flex-col items-center justify-center flex-1 text-center p-4 md:p-8">
                 <motion.div 
                     initial={{ scale: 0.5 }}
                     animate={{ scale: 1 }}
                     transition={{ type: 'spring', bounce: 0.6 }}
-                    className="bg-white text-theme-primary p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] mb-8"
+                    className="bg-white p-6 md:p-8 rounded-2xl md:rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] mb-4 md:mb-8"
                 >
-                    <User size={80} strokeWidth={2.5} />
+                    {currentPlayer ? (
+                        <PlayerAvatar seed={currentPlayer.avatarSeed} size={60} className="md:w-20 md:h-20" />
+                    ) : (
+                        <User size={60} strokeWidth={2.5} className="text-theme-primary md:w-20 md:h-20" />
+                    )}
                 </motion.div>
-                <h2 className="text-5xl font-black mb-4 font-display">You're in!</h2>
-                <p className="text-2xl font-bold opacity-80">See your name on the big screen?</p>
+                <h2 className="text-3xl md:text-5xl font-black mb-2 md:mb-4 font-display">
+                    {currentPlayer?.name || "You're in!"}
+                </h2>
+                <p className="text-lg md:text-2xl font-bold opacity-80">Waiting for the host to start...</p>
             </div>
         )}
       </main>
diff --git a/components/Podium.tsx b/components/Podium.tsx
index 31526be..0030697 100644
--- a/components/Podium.tsx
+++ b/components/Podium.tsx
@@ -34,10 +34,10 @@ export const Podium: React.FC<PodiumProps> = ({ players, onRestart }) => {
   }, []);
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center p-4">
-      <h1 className="text-6xl font-black text-white mb-12 font-display drop-shadow-[0_5px_0_rgba(0,0,0,0.3)] tracking-wide">Podium</h1>
+    <div className="h-screen flex flex-col items-center justify-center p-4 overflow-hidden">
+      <h1 className="text-4xl md:text-6xl font-black text-white mb-6 md:mb-12 font-display drop-shadow-[0_5px_0_rgba(0,0,0,0.3)] tracking-wide">Podium</h1>
       
-      <div className="flex items-end justify-center gap-4 md:gap-8 mb-12 w-full max-w-4xl h-96">
+      <div className="flex items-end justify-center gap-2 md:gap-8 mb-6 md:mb-12 w-full max-w-4xl h-48 md:h-96 px-2">
         {/* Second Place */}
         {second && (
           <motion.div 
diff --git a/components/QuizCreator.tsx b/components/QuizCreator.tsx
index 7260cd1..acaebee 100644
--- a/components/QuizCreator.tsx
+++ b/components/QuizCreator.tsx
@@ -60,8 +60,8 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 text-gray-900 p-4 md:p-8 flex flex-col items-center">
-      <div className="max-w-4xl w-full bg-white rounded-[2rem] shadow-xl overflow-hidden border-4 border-white">
+    <div className="h-screen bg-gray-100 text-gray-900 p-4 md:p-8 flex flex-col items-center overflow-hidden">
+      <div className="max-w-4xl w-full bg-white rounded-[2rem] shadow-xl overflow-hidden border-4 border-white flex-1 min-h-0 flex flex-col">
         <div className="bg-theme-primary p-8 text-white flex justify-between items-center relative overflow-hidden">
           <div className="relative z-10">
             <h2 className="text-4xl font-black font-display">Create Quiz</h2>
@@ -79,7 +79,7 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
           <div className="absolute right-20 bottom-[-50px] w-24 h-24 bg-white/10 rounded-full"></div>
         </div>
 
-        <div className="p-8 space-y-8">
+        <div className="p-6 md:p-8 space-y-6 md:space-y-8 flex-1 min-h-0 overflow-y-auto">
           <div>
             <label className="block text-sm font-black uppercase tracking-wider text-gray-500 mb-2 ml-2">Quiz Title</label>
             <input
diff --git a/components/QuizEditor.tsx b/components/QuizEditor.tsx
index 8cb3157..2529fcf 100644
--- a/components/QuizEditor.tsx
+++ b/components/QuizEditor.tsx
@@ -153,8 +153,8 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 text-gray-900 p-4 md:p-8 flex flex-col items-center">
-      <div className="max-w-4xl w-full bg-white rounded-[2rem] shadow-xl overflow-hidden border-4 border-white">
+    <div className="h-screen bg-gray-100 text-gray-900 p-4 md:p-8 flex flex-col items-center overflow-hidden">
+      <div className="max-w-4xl w-full bg-white rounded-[2rem] shadow-xl overflow-hidden border-4 border-white flex-1 min-h-0 flex flex-col">
         <div className="bg-theme-primary p-6 text-white relative overflow-hidden">
           <div className="relative z-10 flex items-center justify-between gap-4">
             <button
@@ -206,7 +206,7 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
           <div className="absolute right-20 bottom-[-50px] w-24 h-24 bg-white/10 rounded-full"></div>
         </div>
 
-        <div className="p-6 space-y-4">
+        <div className="p-6 space-y-4 flex-1 min-h-0 overflow-y-auto">
           <div className="flex items-center justify-between">
             <h2 className="text-lg font-bold text-gray-700">Questions</h2>
             <button
diff --git a/components/WaitingToRejoin.tsx b/components/WaitingToRejoin.tsx
index 0171c4f..40a7a91 100644
--- a/components/WaitingToRejoin.tsx
+++ b/components/WaitingToRejoin.tsx
@@ -9,7 +9,7 @@ interface WaitingToRejoinProps {
 
 export const WaitingToRejoin: React.FC<WaitingToRejoinProps> = ({ playerName, score }) => {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen p-6 text-center">
+    <div className="flex flex-col items-center justify-center h-screen p-4 md:p-6 text-center overflow-hidden">
       <motion.div
         initial={{ scale: 0.8, opacity: 0 }}
         animate={{ scale: 1, opacity: 1 }}
diff --git a/hooks/useGame.ts b/hooks/useGame.ts
index 9302aa7..07fc5b5 100644
--- a/hooks/useGame.ts
+++ b/hooks/useGame.ts
@@ -3,6 +3,7 @@ import { Quiz, Player, GameState, GameRole, NetworkMessage, AnswerOption, Questi
 import { generateQuiz } from '../services/geminiService';
 import { QUESTION_TIME, QUESTION_TIME_MS, PLAYER_COLORS, calculatePointsWithBreakdown, getPlayerRank } from '../constants';
 import { Peer, DataConnection } from 'peerjs';
+import { uniqueNamesGenerator, adjectives, animals } from 'unique-names-generator';
 
 const BACKEND_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3001';
 const SESSION_STORAGE_KEY = 'kaboot_session';
@@ -86,6 +87,15 @@ export const useGame = () => {
 
   const generateGamePin = () => Math.floor(Math.random() * 900000) + 100000 + "";
 
+  const generateRandomName = (): string => {
+    return uniqueNamesGenerator({
+      dictionaries: [adjectives, animals],
+      separator: ' ',
+      style: 'capital',
+      length: 2,
+    });
+  };
+
   const syncGameState = useCallback(async () => {
     if (!gamePinRef.current || !hostSecretRef.current) return;
     if (gameStateRef.current === 'LANDING' || gameStateRef.current === 'EDITING' || gameStateRef.current === 'CREATING' || gameStateRef.current === 'GENERATING') return;
@@ -510,13 +520,23 @@ export const useGame = () => {
         allPlayers: playersRef.current.map(p => ({ id: p.id, name: p.name, lastAnswerCorrect: p.lastAnswerCorrect }))
       });
       
+      let assignedName = payload.name;
+      if (!reconnectedPlayer && gameConfigRef.current.randomNamesEnabled) {
+        assignedName = generateRandomName();
+      }
+      
+      let updatedPlayers = playersRef.current;
+      let newPlayer: Player | null = null;
+      
       if (reconnectedPlayer) {
-        setPlayers(prev => prev.map(p => p.id === reconnectedPlayer.id ? { ...p, id: conn.peer } : p));
+        updatedPlayers = playersRef.current.map(p => p.id === reconnectedPlayer.id ? { ...p, id: conn.peer } : p);
+        setPlayers(updatedPlayers);
+        assignedName = reconnectedPlayer.name;
       } else if (!playersRef.current.find(p => p.id === conn.peer)) {
         const colorIndex = playersRef.current.length % PLAYER_COLORS.length;
-        const newPlayer: Player = {
+        newPlayer = {
           id: conn.peer,
-          name: payload.name,
+          name: assignedName,
           score: 0,
           previousScore: 0,
           streak: 0,
@@ -527,7 +547,8 @@ export const useGame = () => {
           avatarSeed: Math.random(),
           color: PLAYER_COLORS[colorIndex]
         };
-        setPlayers(prev => [...prev, newPlayer]);
+        updatedPlayers = [...playersRef.current, newPlayer];
+        setPlayers(updatedPlayers);
       }
       
       const currentState = gameStateRef.current;
@@ -538,7 +559,7 @@ export const useGame = () => {
       const welcomePayload: any = { 
         playerId: conn.peer, 
         quizTitle: currentQuiz?.title || 'Kaboot', 
-        players: playersRef.current,
+        players: updatedPlayers,
         gameState: currentState,
         currentQuestionIndex: currentIndex,
         totalQuestions: currentQuiz?.questions.length || 0,
@@ -548,6 +569,7 @@ export const useGame = () => {
         hasAnswered: false,
         lastAnswerCorrect: null,
         selectedShape: null,
+        assignedName,
       };
       
       if (currentQuestion) {
@@ -915,6 +937,13 @@ export const useGame = () => {
       if (payload.players) {
         setPlayers(payload.players);
       }
+      if (payload.assignedName) {
+        setCurrentPlayerName(payload.assignedName);
+        const session = getStoredSession();
+        if (session) {
+          storeSession({ ...session, playerName: payload.assignedName });
+        }
+      }
       if (payload.selectedShape && payload.options) {
         const matchedOption = payload.options.find(opt => opt.shape === payload.selectedShape);
         if (matchedOption) {
diff --git a/index.css b/index.css
index e8b64b7..1d21d0e 100644
--- a/index.css
+++ b/index.css
@@ -1,16 +1,11 @@
-html, body, #root {
-  height: 100%;
-  min-height: 100dvh;
-}
-
 .h-screen {
-  height: 100dvh;
+  height: 100dvh !important;
 }
 
 .min-h-screen {
-  min-height: 100dvh;
+  min-height: 100dvh !important;
 }
 
 .max-h-screen {
-  max-height: 100dvh;
+  max-height: 100dvh !important;
 }
diff --git a/index.html b/index.html
index 46b0b5c..925b482 100644
--- a/index.html
+++ b/index.html
@@ -33,8 +33,19 @@
         font-family: 'Montserrat', sans-serif;
         background: linear-gradient(180deg, var(--theme-primary) 0%, var(--theme-primary-darker) 100%);
         color: white;
-        overflow-x: hidden;
-        min-height: 100dvh;
+        overflow: hidden;
+        height: 100dvh;
+        margin: 0;
+        padding: 0;
+      }
+      
+      html {
+        height: 100dvh;
+        overflow: hidden;
+      }
+      
+      #root {
+        height: 100%;
       }
       
       h1, h2, h3, h4, h5, h6, .font-display {
diff --git a/package-lock.json b/package-lock.json
index 7323a05..6c215ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "react-hot-toast": "^2.6.0",
         "react-oidc-context": "^3.2.0",
         "recharts": "^3.6.0",
+        "unique-names-generator": "^4.7.1",
         "uuid": "^13.0.0"
       },
       "devDependencies": {
@@ -4160,6 +4161,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unique-names-generator": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
+      "integrity": "sha512-lMx9dX+KRmG8sq6gulYYpKWZc9RlGsgBR6aoO8Qsm3qvkSJ+3rAymr+TnV8EDMrIrwuFJ4kruzMWM/OpYzPoow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
diff --git a/package.json b/package.json
index 72eb488..1077f01 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "react-hot-toast": "^2.6.0",
     "react-oidc-context": "^3.2.0",
     "recharts": "^3.6.0",
+    "unique-names-generator": "^4.7.1",
     "uuid": "^13.0.0"
   },
   "devDependencies": {
diff --git a/server/src/routes/games.ts b/server/src/routes/games.ts
index c083f1e..0d6aa29 100644
--- a/server/src/routes/games.ts
+++ b/server/src/routes/games.ts
@@ -74,6 +74,7 @@ router.get('/:pin', (req: Request, res: Response) => {
       return;
     }
     
+    const gameConfig = JSON.parse(session.game_config);
     res.json({
       pin: session.pin,
       hostPeerId: session.host_peer_id,
@@ -81,6 +82,7 @@ router.get('/:pin', (req: Request, res: Response) => {
       currentQuestionIndex: session.current_question_index,
       quizTitle: JSON.parse(session.quiz_data).title,
       playerCount: JSON.parse(session.players_data).length,
+      randomNamesEnabled: gameConfig.randomNamesEnabled || false,
     });
   } catch (err) {
     console.error('Error getting game session:', err);
diff --git a/types.ts b/types.ts
index 8e375f3..6b85014 100644
--- a/types.ts
+++ b/types.ts
@@ -62,6 +62,7 @@ export interface GameConfig {
   shuffleQuestions: boolean;
   shuffleAnswers: boolean;
   hostParticipates: boolean;
+  randomNamesEnabled: boolean;
   streakBonusEnabled: boolean;
   streakThreshold: number;
   streakMultiplier: number;
@@ -77,6 +78,7 @@ export const DEFAULT_GAME_CONFIG: GameConfig = {
   shuffleQuestions: false,
   shuffleAnswers: false,
   hostParticipates: true,
+  randomNamesEnabled: false,
   streakBonusEnabled: false,
   streakThreshold: 3,
   streakMultiplier: 1.1,
@@ -170,6 +172,7 @@ export type NetworkMessage =
       options?: AnswerOption[];
       correctShape?: string;
       timeLeft?: number;
+      assignedName?: string;
     } }
   | { type: 'PLAYER_JOINED'; payload: { player: Player } }
   | { type: 'GAME_START'; payload: {} }