diff --git a/apps/multiplayer/src/multiplayer.ts b/apps/multiplayer/src/multiplayer.ts
index 95417b65..7d4a2156 100644
--- a/apps/multiplayer/src/multiplayer.ts
+++ b/apps/multiplayer/src/multiplayer.ts
@@ -358,11 +358,19 @@ export class Multiplayer implements DurableObject {
         );
 
         if (allPlayersGuessedCorrectly) {
-          game.gameState.hasWon = true;
-          game.gameState.isActive = false;
-          game.gameState.statusMessage = {
-            type: 'success',
-            message: `Everyone guessed correctly! The word was "${game.gameState.targetWord}"`,
+          game.gameState = {
+            ...game.gameState,
+            hasWon: true,
+            isActive: false,
+            isLobby: true,
+            targetWord: '',
+            timeRemaining: this.GAME_DURATION,
+            currentDrawer: undefined,
+            endTime: undefined,
+            statusMessage: {
+              type: 'success',
+              message: `Everyone guessed correctly! The word was "${game.gameState.targetWord}"`,
+            },
           };
 
           if (game.timerInterval) {
@@ -480,10 +488,19 @@ export class Multiplayer implements DurableObject {
           game.gameState.endTime &&
           Date.now() >= game.gameState.endTime
         ) {
-          game.gameState.isActive = false;
-          game.gameState.statusMessage = {
-            type: 'failure',
-            message: `Time's up! The word was "${game.gameState.targetWord}"`,
+          const oldWord = game.gameState.targetWord;
+          game.gameState = {
+            ...game.gameState,
+            isActive: false,
+            isLobby: true,
+            targetWord: '',
+            timeRemaining: this.GAME_DURATION,
+            currentDrawer: undefined,
+            endTime: undefined,
+            statusMessage: {
+              type: 'failure',
+              message: `Time's up! The word was "${oldWord}"`,
+            },
           };
 
           if (game.timerInterval) {
@@ -493,19 +510,12 @@ export class Multiplayer implements DurableObject {
 
           this.broadcast(gameId, {
             type: 'gameEnded',
-            gameState: {
-              ...game.gameState,
-              drawingData: undefined,
-            },
+            gameState: game.gameState,
             users: Array.from(game.users.entries()).map(([id, data]) => ({
               id,
               ...data,
             })),
           });
-
-          if (game.users.size === 0) {
-            this.games.delete(gameId);
-          }
         }
       }
 
diff --git a/apps/web/components/DrawingCanvas/Components/Canvas.tsx b/apps/web/components/DrawingCanvas/Components/Canvas.tsx
index 21f25562..c86405e8 100644
--- a/apps/web/components/DrawingCanvas/Components/Canvas.tsx
+++ b/apps/web/components/DrawingCanvas/Components/Canvas.tsx
@@ -152,9 +152,10 @@ export function Canvas({
         ref={canvasRef}
         width={800}
         height={650}
-        className={`bg-[#f9fafb] top-0 left-0 w-full h-full max-h-[650px] border border-gray-200 rounded-lg touch-none ${
+        className={`bg-[#f9fafb] w-full h-auto max-h-[80vh] border border-gray-200 rounded-lg touch-none ${
           isReadOnly ? 'cursor-default' : 'cursor-crosshair'
         }`}
+        style={{ aspectRatio: '800 / 650' }}
         onMouseDown={startDrawing}
         onMouseUp={stopDrawing}
         onMouseOut={stopDrawing}
diff --git a/apps/web/components/DrawingCanvas/Components/ColorPicker.tsx b/apps/web/components/DrawingCanvas/Components/ColorPicker.tsx
index 402ccc1a..af2c9520 100644
--- a/apps/web/components/DrawingCanvas/Components/ColorPicker.tsx
+++ b/apps/web/components/DrawingCanvas/Components/ColorPicker.tsx
@@ -21,7 +21,7 @@ export function ColorPicker({
         />
         <span className="text-sm text-muted-foreground">Custom Color</span>
       </div>
-      <div className="grid grid-cols-5 gap-2">
+      <div className="grid grid-cols-5 sm:grid-cols-10 gap-2">
         {COLORS.map((color) => (
           <button
             key={color}
diff --git a/apps/web/components/DrawingCanvas/Components/GameStatus.tsx b/apps/web/components/DrawingCanvas/Components/GameStatus.tsx
index 32dfada4..a260235b 100644
--- a/apps/web/components/DrawingCanvas/Components/GameStatus.tsx
+++ b/apps/web/components/DrawingCanvas/Components/GameStatus.tsx
@@ -56,7 +56,7 @@ export function GameStatus({
 
           {isConnected ? (
             <>
-              <div className="flex gap-2 my-4">
+              <div className="flex flex-col sm:flex-row gap-2 my-4">
                 <Input
                   value={newGameName}
                   onChange={(e) => setNewGameName(e.target.value)}
@@ -94,6 +94,7 @@ export function GameStatus({
                       <Button
                         onClick={() => onJoinGame(game.id)}
                         disabled={!game.isLobby}
+                        className="w-full sm:w-auto mt-2 sm:mt-0"
                       >
                         {game.isLobby ? 'Join' : 'In Progress'}
                       </Button>
@@ -159,7 +160,7 @@ export function GameStatus({
           </div>
         )}
 
-        <div className="flex gap-2">
+        <div className="flex flex-col sm:flex-row gap-2">
           <Button
             onClick={onStartGame}
             disabled={users.length < 2}
diff --git a/apps/web/components/DrawingCanvas/index.tsx b/apps/web/components/DrawingCanvas/index.tsx
index 07f9835a..019c2ff6 100644
--- a/apps/web/components/DrawingCanvas/index.tsx
+++ b/apps/web/components/DrawingCanvas/index.tsx
@@ -1,8 +1,15 @@
 'use client';
 
 import { useRef, useState, useEffect } from 'react';
-
 import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { Menu } from 'lucide-react';
 
 import type { DrawingResponse, DrawingCanvasProps } from './types';
 import { ColorPicker } from './Components/ColorPicker';
@@ -30,6 +37,7 @@ export function DrawingCanvas({
   const [isFillMode, setIsFillMode] = useState(false);
   const [history, setHistory] = useState<ImageData[]>([]);
   const [historyIndex, setHistoryIndex] = useState(-1);
+  const [isToolsOpen, setIsToolsOpen] = useState(false);
 
   const saveToHistory = () => {
     const canvas = canvasRef.current;
@@ -161,49 +169,65 @@ export function DrawingCanvas({
   const displaySidebar =
     !gameState.isActive || (gameState.isActive && isDrawer);
 
+  const DrawingTools = () => (
+    <div className="flex flex-col gap-4 p-4 bg-card rounded-lg border shadow-sm">
+      <Header
+        undo={undo}
+        redo={redo}
+        history={history}
+        historyIndex={historyIndex}
+      />
+
+      <ToolPicker isFillMode={isFillMode} setIsFillMode={setIsFillMode} />
+
+      <LineWidthPicker lineWidth={lineWidth} setLineWidth={setLineWidth} />
+
+      <ColorPicker
+        currentColor={currentColor}
+        setCurrentColor={setCurrentColor}
+      />
+
+      <Button
+        onClick={clearCanvas}
+        variant="outline"
+        size="sm"
+        className="w-full text-muted-foreground"
+      >
+        Clear Canvas
+      </Button>
+    </div>
+  );
+
   return (
-    <div className="flex flex-col gap-6 w-full mx-auto">
-      <div className="flex flex-col lg:flex-row gap-6">
+    <div className="flex flex-col gap-4 w-full mx-auto">
+      <div className="flex flex-col lg:flex-row gap-4">
         {!result && (
-          <div className="flex flex-col lg:flex-row gap-6 w-full">
+          <div className="flex flex-col lg:flex-row gap-4 w-full">
             {displaySidebar && (
-              <div className="lg:w-64 flex flex-col gap-4">
-                <div className="flex flex-col gap-4 p-4 bg-card rounded-lg border shadow-sm">
-                  <Header
-                    undo={undo}
-                    redo={redo}
-                    history={history}
-                    historyIndex={historyIndex}
-                  />
-
-                  <ToolPicker
-                    isFillMode={isFillMode}
-                    setIsFillMode={setIsFillMode}
-                  />
-
-                  <LineWidthPicker
-                    lineWidth={lineWidth}
-                    setLineWidth={setLineWidth}
-                  />
-
-                  <ColorPicker
-                    currentColor={currentColor}
-                    setCurrentColor={setCurrentColor}
-                  />
-
-                  <Button
-                    onClick={clearCanvas}
-                    variant="outline"
-                    size="sm"
-                    className="w-full text-muted-foreground"
-                  >
-                    Clear Canvas
-                  </Button>
-                </div>
+              <div className="w-full lg:w-64 hidden lg:flex flex-col gap-4">
+                <DrawingTools />
               </div>
             )}
 
-            <div className="flex-1 flex flex-col gap-6">
+            <div className="flex-1 flex flex-col gap-4">
+              {displaySidebar && (
+                <div className="lg:hidden">
+                  <Sheet open={isToolsOpen} onOpenChange={setIsToolsOpen}>
+                    <SheetTrigger asChild>
+                      <Button variant="outline" className="w-full">
+                        <Menu className="mr-2 h-4 w-4" /> Drawing Tools
+                      </Button>
+                    </SheetTrigger>
+                    <SheetContent side="bottom" className="h-[80vh]">
+                      <SheetHeader>
+                        <SheetTitle>Drawing Tools</SheetTitle>
+                      </SheetHeader>
+                      <DrawingTools />
+                    </SheetContent>
+                  </Sheet>
+                </div>
+              )}
+
               <Canvas
                 canvasRef={canvasRef}
                 isFillMode={isFillMode}
@@ -216,7 +240,7 @@ export function DrawingCanvas({
               />
             </div>
 
-            <div className="lg:w-80 flex flex-col gap-4">
+            <div className="w-full lg:w-80 flex flex-col gap-4">
               {!gameState.isActive && (
                 <GenerateDrawing
                   handleSubmit={handleSubmit}
diff --git a/apps/web/components/ui/sheet.tsx b/apps/web/components/ui/sheet.tsx
new file mode 100644
index 00000000..a37f17ba
--- /dev/null
+++ b/apps/web/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}