diff --git a/client/package-lock.json b/client/package-lock.json
index 7610e6e..a79f6cb 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -17,6 +17,7 @@
         "class-variance-authority": "^0.7.0",
         "client": "file:",
         "clsx": "^2.1.1",
+        "framer-motion": "^11.11.17",
         "lucide-react": "^0.456.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -2852,6 +2853,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.17",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.17.tgz",
+      "integrity": "sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
diff --git a/client/package.json b/client/package.json
index bc6b827..93faea3 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,6 +19,7 @@
     "class-variance-authority": "^0.7.0",
     "client": "file:",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.11.17",
     "lucide-react": "^0.456.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/client/src/components/PlayGround.tsx b/client/src/components/PlayGround.tsx
index b0d4a5a..363fc1c 100644
--- a/client/src/components/PlayGround.tsx
+++ b/client/src/components/PlayGround.tsx
@@ -4,7 +4,6 @@ import { PlayerList } from "./PlayerList";
 import { Whiteboard } from "./Whiteboard";
 import { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
 
 export default function Playground() {
     const socket = useSocket();
@@ -230,56 +229,18 @@ export default function Playground() {
         );
     };
 
-    const WinnerOverlay = ({
-        winner,
-        word,
-        isOpen,
-        onClose,
-    }: {
-        winner: string | null;
-        word: string;
-        isOpen: boolean;
-        onClose: () => void;
-    }) => {
-        // Automatically close after 4 seconds when the overlay is opened
-        useEffect(() => {
-            if (isOpen) {
-                const timer = setTimeout(() => {
-                    onClose();
-                }, 4000); // 4 seconds
 
-                return () => clearTimeout(timer); // Clear timeout if component unmounts or isOpen changes
-            }
-        }, [isOpen, onClose]);
-        return (
-            <Dialog open={isOpen} onOpenChange={onClose}>
-                <DialogContent>
-                    <DialogHeader>
-                        <DialogTitle>
-                            🎉 Winner of this Round is
-                            {Turnwinner} 🎉
-                        </DialogTitle>
-                    </DialogHeader>
-                    <p>
-                        Congratulations, <strong>{winner}</strong>!
-                    </p>
-                    <p>
-                        The word was: <strong>{word}</strong>
-                    </p>
-                </DialogContent>
-            </Dialog>
-        );
-    };
+
     if (!socket) return <div>Connecting...</div>;
 
     return (
         <div className="min-h-screen bg-gradient-to-b from-yellow-300 to-orange-400 p-4 overflow-auto">
-            <WinnerOverlay
+            {/* <WinnerOverlay
                 winner={Turnwinner}
                 word={TurnWord}
                 isOpen={isOverlayOpen}
                 onClose={() => setIsOverlayOpen(false)}
-            />
+            /> */}
             <div className="container mx-auto grid grid-cols-1 md:grid-cols-12 gap-4 h-[calc(100vh-2rem)]">
                 {/* Chat Section */}
                 <div className="col-span-12 md:col-span-3">
@@ -294,6 +255,10 @@ export default function Playground() {
                 {/* Whiteboard Section */}
                 <div className="col-span-12 md:col-span-6">
                     <Whiteboard
+                        setIsOverlayOpen={setIsOverlayOpen}
+                        winner={Turnwinner}
+                        Turnword={TurnWord}
+                        isOpen={isOverlayOpen}
                         clear={clear}
                         word={word}
                         canvasRef={canvasRef}
diff --git a/client/src/components/Whiteboard.tsx b/client/src/components/Whiteboard.tsx
index 98b63c8..6c66489 100644
--- a/client/src/components/Whiteboard.tsx
+++ b/client/src/components/Whiteboard.tsx
@@ -1,7 +1,30 @@
-import { Pencil, Eraser, Trash2 } from 'lucide-react'
-import { Button } from "@/components/ui/button"
+import { useEffect } from "react";
+import { Pencil, Eraser, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { AnimatePresence, motion } from "framer-motion";
+
+export const Whiteboard = ({
+    setIsOverlayOpen,
+    winner,
+    Turnword,
+    isOpen,
+    clear,
+    word,
+    canvasRef,
+    startDrawing,
+    draw,
+    stopDrawing,
+}: any) => {
+    useEffect(() => {
+        if (isOpen) {
+            const timeout = setTimeout(() => {
+                setIsOverlayOpen(false);
+            }, 4000);
+
+            return () => clearTimeout(timeout);
+        }
+    }, [isOpen, setIsOverlayOpen]);
 
-export const Whiteboard = ({ clear, word, canvasRef, startDrawing, draw, stopDrawing }: any) => {
     return (
         <div className="bg-white rounded-lg shadow-lg p-4 flex flex-col h-full max-w-full">
             <div className="flex flex-col md:flex-row justify-between mb-4 space-y-2 md:space-y-0">
@@ -21,7 +44,7 @@ export const Whiteboard = ({ clear, word, canvasRef, startDrawing, draw, stopDra
                     </Button>
                 </div>
             </div>
-            <div className="flex-grow bg-gray-100 rounded-lg overflow-hidden">
+            <div className="relative flex-grow bg-gray-100 rounded-lg overflow-hidden">
                 <canvas
                     ref={canvasRef}
                     width={700}
@@ -32,8 +55,45 @@ export const Whiteboard = ({ clear, word, canvasRef, startDrawing, draw, stopDra
                     onMouseUp={stopDrawing}
                     onMouseLeave={stopDrawing}
                 />
-
+                <AnimatePresence>
+                    {isOpen && (
+                        <motion.div
+                            className="absolute inset-0 bg-black bg-opacity-75 flex items-center justify-center text-white text-lg font-bold"
+                            initial={{ y: -100, opacity: 0 }}
+                            animate={{ y: 0, opacity: 1 }}
+                            exit={{ y: 300, opacity: 0 }}
+                            transition={{ duration: 1, ease: "easeInOut" }}
+                        >
+                            <div className="text-center">
+                                <motion.div
+                                    initial={{ scale: 0.8 }}
+                                    animate={{ scale: 1 }}
+                                    transition={{ duration: 0.5 }}
+                                    className="text-4xl md:text-5xl font-extrabold text-yellow-400 shadow-lg"
+                                >
+                                    🎉 Winner of this Round is {winner}! 🎉
+                                </motion.div>
+                                <motion.div
+                                    initial={{ scale: 0.8 }}
+                                    animate={{ scale: 1 }}
+                                    transition={{ duration: 0.5 }}
+                                    className="text-3xl md:text-4xl font-bold text-pink-500 mt-2"
+                                >
+                                    The word was: <span className="italic text-teal-300">{Turnword}</span>
+                                </motion.div>
+                                <motion.div
+                                    className="mt-4 text-lg text-white font-bold animate-bounce"
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    transition={{ duration: 1, delay: 1 }}
+                                >
+                                    🎨 Keep drawing! 🎨
+                                </motion.div>
+                            </div>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
             </div>
         </div>
-    )
-}
\ No newline at end of file
+    );
+};