diff --git a/apps/web/src/app/@modal/(.)join/page.tsx b/apps/web/src/app/@modal/(.)join/page.tsx
index d9dd874..3ff1942 100644
--- a/apps/web/src/app/@modal/(.)join/page.tsx
+++ b/apps/web/src/app/@modal/(.)join/page.tsx
@@ -48,8 +48,9 @@ export default function GameJoinModal() {
   return (
     <Modal
       className={`animate-scaleUp transition-all flex flex-col items-center overflow-y-scroll max-w-md duration-1000 ${
-        loading ? "max-h-80" : "max-h-[90dvh]"
+        loading ? "max-h-96" : "max-h-[90dvh]"
       }`}
+      closeButton
     >
       {isJoining ? (
         <>
diff --git a/apps/web/src/app/games/[id]/components/DownloadModal.tsx b/apps/web/src/app/games/[id]/components/DownloadModal.tsx
index 3cd090b..5769014 100644
--- a/apps/web/src/app/games/[id]/components/DownloadModal.tsx
+++ b/apps/web/src/app/games/[id]/components/DownloadModal.tsx
@@ -11,7 +11,7 @@ export default function DownloadModal() {
   const isLoading = useSelector(selectIsGameLoading$()) || isWalletLoading;
   if (isLoading)
     return (
-      <Modal className="w-96 h-52 animate-grow-in">
+      <Modal closeButton={false} className="w-96 h-52 animate-grow-in">
         <div className="flex flex-col items-center gap-1 text-white text-center">
           {percentage ? (
             <>
diff --git a/apps/web/src/app/games/[id]/components/Pot.tsx b/apps/web/src/app/games/[id]/components/Pot.tsx
index 7df7d9d..6dec623 100644
--- a/apps/web/src/app/games/[id]/components/Pot.tsx
+++ b/apps/web/src/app/games/[id]/components/Pot.tsx
@@ -1,7 +1,7 @@
 import { useSelector } from "@legendapp/state/react";
 import chips from "@src/assets/images/chips/chips-3-stacks.png";
 import Image from "next/image";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { selectPot$ } from "../state/selectors/gameSelectors";
 
 export default function Pot() {
@@ -12,8 +12,8 @@ export default function Pot() {
   return (
     <>
       <div
-        className={`text-white items-center  bg-black/20 px-4 py-1 mt-2 absolute pot ${
-          started ? "animate-headShake " : ""
+        className={`text-white sm:text-lg text-[10px] items-center bg-black/20 px-4 py-1 mt-2 absolute pot ${
+          started ? "" : ""
         }`}
       >
         ${pot}
@@ -21,8 +21,8 @@ export default function Pot() {
       {raisedSeats.map((seat) => (
         <Image
           key={seat}
-          className={`absolute duration-700 ${
-            started ? "pot animate-fading opacity-0" : `seat-${seat} opacity-0`
+          className={`absolute duration-1000 ${
+            started ? "pot animate-fading opacity-0" : `seat-${seat}  opacity-0`
           }`}
           width={32}
           height={32}
diff --git a/apps/web/src/app/games/[id]/components/Seat.tsx b/apps/web/src/app/games/[id]/components/Seat.tsx
index 102e78c..787ef95 100644
--- a/apps/web/src/app/games/[id]/components/Seat.tsx
+++ b/apps/web/src/app/games/[id]/components/Seat.tsx
@@ -4,6 +4,13 @@ import Avatar1 from "@src/assets/images/avatars/avatar-1.png";
 import Avatar2 from "@src/assets/images/avatars/avatar-2.png";
 import Avatar3 from "@src/assets/images/avatars/avatar-3.png";
 import Avatar4 from "@src/assets/images/avatars/avatar-4.png";
+import Avatar5 from "@src/assets/images/avatars/avatar-5.png";
+import Avatar6 from "@src/assets/images/avatars/avatar-6.png";
+import Avatar7 from "@src/assets/images/avatars/avatar-7.png";
+import Avatar8 from "@src/assets/images/avatars/avatar-8.png";
+import Avatar9 from "@src/assets/images/avatars/avatar-9.png";
+import Avatar10 from "@src/assets/images/avatars/avatar-10.png";
+import WinnerStuff from "@src/assets/images/champagne-pixel-animated.gif";
 import { CARDS_MAP } from "@src/lib/constants/cards";
 import Image from "next/image";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -17,6 +24,14 @@ import {
 import Card from "./Card";
 import DealerBadge from "./DealerBadge";
 
+function hashPlayerIDToAvatar(id: string, avatarCount: number) {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = id.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash % avatarCount);
+}
+
 export default function Seat({
   player,
   seatNumber,
@@ -24,13 +39,28 @@ export default function Seat({
   player: Player;
   seatNumber: number;
 }) {
-  const avatars = [Avatar1, Avatar2, Avatar3, Avatar4];
+  const avatars = [
+    Avatar1,
+    Avatar2,
+    Avatar3,
+    Avatar4,
+    Avatar5,
+    Avatar6,
+    Avatar7,
+    Avatar8,
+    Avatar9,
+    Avatar10,
+  ];
   const mounted = useRef(false);
+
+  // Hash the player ID to consistently pick an avatar
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  const randomAvatar = useMemo(
-    () => avatars[Math.floor(Math.random() * avatars.length)],
-    [seatNumber],
-  );
+  const playerAvatarIndex = useMemo(() => {
+    return hashPlayerIDToAvatar(player.id, avatars.length);
+  }, [player.id]);
+
+  const playerAvatar = avatars[playerAvatarIndex];
+
   const shufflingPlayer = useSelector(selectShufflingPlayer$());
   const awaitingBetFrom = useSelector(selectAwaitingBetFrom$());
   const isPlayerTurn = awaitingBetFrom?.id === player.id;
@@ -39,6 +69,7 @@ export default function Seat({
 
   const gameStatus = useSelector(selectGameStatus$());
   const [lastAction, setLastAction] = useState("");
+  const isWinner = false;
 
   useEffect(() => {
     if (mounted.current) return;
@@ -62,22 +93,34 @@ export default function Seat({
         shufflingPlayer?.id === player.id
           ? "seat-dealer scale-110"
           : `seat-${seatNumber} ${2 > Math.random() ? "z-[501]" : ""} ${
-              player.status === PlayerStatus.folded ? "opacity-80" : ""
-            } ${player.status === PlayerStatus.sittingOut ? "opacity-70" : ""}`
+              player.status === PlayerStatus.sittingOut ? "opacity-80" : ""
+            }`
       }`}
       style={{ animationDelay: `${seatNumber * 100 + 100}ms` }}
     >
       <Image
         draggable={false}
-        src={randomAvatar ?? ""}
+        src={playerAvatar ?? ""}
         alt="avatar"
-        className={`w-full aspect-square animate-grow-in grow-0 sm:w-14 rounded-full shrink-0 border-2 md:border-8 ${
+        className={`w-full aspect-square object-contain bg-black/70 h-full animate-grow-in grow-0 sm:w-14 rounded-full shrink-0 border-2 md:border-8 ${
           shufflingPlayer?.id === player.id ? "scale-125 animate-bounce delay-1000" : ""
-        } ${isPlayerTurn ? "ring-8 animate-bounce ring-blue-600 duration-500" : ""}`}
+        } ${isPlayerTurn ? "ring-8 animate-bounce ring-blue-600 duration-500" : ""} ${
+          player.status === PlayerStatus.sittingOut || player.status === PlayerStatus.folded
+            ? "scale-95"
+            : ""
+        } ${isWinner ? "animate-tada" : ""}`}
         style={{
           transitionDelay: mounted.current ? "0ms" : `${150 * seatNumber}ms`,
         }}
       />
+      {isWinner && (
+        <Image
+          className={`absolute top-0 -right-14 animate-grow-in ${isWinner ? "animate-tada" : ""}`}
+          alt="chicken winner"
+          src={WinnerStuff}
+        />
+      )}
+
       {(lastAction || player.status === PlayerStatus.folded) && (
         <div className="nes-balloon from-left z-50 animate-grow-in origin-bottom-left absolute top-0 -right-20 text-center p-2 sm:p-2">
           <p className="text-[8px] sm:text-sm">
@@ -103,7 +146,7 @@ export default function Seat({
           )}
         </div>
       )}
-      <div className="bg-[#b87d5b] shrink-0 flex-col rounded-sm line-clamp-1 relative flex justify-center text-[8px] text-white text-center shadow-2xl md:text-sm px-1 bg-opacity-80">
+      <div className="bg-black/70 shrink-0 flex-col rounded-sm line-clamp-1 relative flex justify-center text-[8px] text-white text-center shadow-2xl md:text-sm px-1 ">
         <span>{player.id.slice(2, 8)} </span> <span>${player.balance}</span>
       </div>
     </div>
diff --git a/apps/web/src/app/games/[id]/page.tsx b/apps/web/src/app/games/[id]/page.tsx
index 725cc09..f24838a 100644
--- a/apps/web/src/app/games/[id]/page.tsx
+++ b/apps/web/src/app/games/[id]/page.tsx
@@ -7,6 +7,7 @@ import { GameStatus } from "@jeton/ts-sdk";
 import { useSelector } from "@legendapp/state/react";
 
 import { JetonContext } from "@src/components/JetonContextProvider";
+import { mockPlayers } from "@src/lib/constants/mocks";
 import { orderPlayersSeats } from "@src/utils/seat";
 import { useRouter } from "next/navigation";
 import { useContext, useEffect, useMemo, useState } from "react";
@@ -115,7 +116,7 @@ export default function PlayPage({ params }: { params: { id: string } }) {
         )}
       </Table>
       <PlayerActions />
-      {/* <DownloadModal /> */}
+      <DownloadModal />
       <GameStatusBox />
     </GameContainer>
   );
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 3ff9c2b..c477e56 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -183,14 +183,20 @@
   }
 
   .pot {
-    top: 65%;
-    left: 50%;
+    top: 65% !important;
+    left: 50% !important;
     transform: translateX(-50%);
   }
 }
 
+.pot {
+  top: 80%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .seat-1 {
-  top: 120%;
+  top: 110%;
   left: 50%;
   transform: translateX(-50%);
 }
@@ -229,7 +235,7 @@
 }
 
 .seat-4 {
-  top: 40%;
+  top: 30%;
   left: 20%;
   transform: translateY(-50%);
 }
@@ -242,8 +248,8 @@
 }
 
 .seat-5 {
-  top: 10%;
-  left: 20%;
+  top: -10%;
+  left: 25%;
   transform: translateY(-50%);
 }
 
@@ -255,8 +261,8 @@
 }
 
 .seat-6 {
-  top: 10%;
-  left: 72%;
+  top: -10%;
+  left: 68%;
   transform: translateY(-50%);
 }
 
@@ -268,7 +274,7 @@
 }
 
 .seat-7 {
-  top: 40%;
+  top: 30%;
   left: 72%;
   transform: translateY(-50%);
 }
diff --git a/apps/web/src/assets/icons/close.svg b/apps/web/src/assets/icons/close.svg
new file mode 100644
index 0000000..6b9e231
--- /dev/null
+++ b/apps/web/src/assets/icons/close.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="m22 2v-1h-20v1h-1v20h1v1h20v-1h1v-20zm-4 7h-1v1h-1v1h-1v2h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v-1h1v-1h1v-1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v1h1v1h1z"/></svg>
\ No newline at end of file
diff --git a/apps/web/src/assets/images/avatars/avatar-1.png b/apps/web/src/assets/images/avatars/avatar-1.png
index 3c1acf7..6e5acf6 100644
Binary files a/apps/web/src/assets/images/avatars/avatar-1.png and b/apps/web/src/assets/images/avatars/avatar-1.png differ
diff --git a/apps/web/src/assets/images/avatars/avatar-10.png b/apps/web/src/assets/images/avatars/avatar-10.png
new file mode 100644
index 0000000..31b17af
Binary files /dev/null and b/apps/web/src/assets/images/avatars/avatar-10.png differ
diff --git a/apps/web/src/assets/images/avatars/avatar-2.png b/apps/web/src/assets/images/avatars/avatar-2.png
index c4e3a0c..2884c28 100644
Binary files a/apps/web/src/assets/images/avatars/avatar-2.png and b/apps/web/src/assets/images/avatars/avatar-2.png differ
diff --git a/apps/web/src/assets/images/avatars/avatar-3.png b/apps/web/src/assets/images/avatars/avatar-3.png
index 99f17ce..d5d7a32 100644
Binary files a/apps/web/src/assets/images/avatars/avatar-3.png and b/apps/web/src/assets/images/avatars/avatar-3.png differ
diff --git a/apps/web/src/assets/images/avatars/avatar-4.png b/apps/web/src/assets/images/avatars/avatar-4.png
index 15e7f37..7496a33 100644
Binary files a/apps/web/src/assets/images/avatars/avatar-4.png and b/apps/web/src/assets/images/avatars/avatar-4.png differ
diff --git a/apps/web/src/assets/images/avatars/avatar-5.png b/apps/web/src/assets/images/avatars/avatar-5.png
new file mode 100644
index 0000000..dd79f60
Binary files /dev/null and b/apps/web/src/assets/images/avatars/avatar-5.png differ
diff --git a/apps/web/src/assets/images/avatars/avatar-6.png b/apps/web/src/assets/images/avatars/avatar-6.png
new file mode 100644
index 0000000..4cce83a
Binary files /dev/null and b/apps/web/src/assets/images/avatars/avatar-6.png differ
diff --git a/apps/web/src/assets/images/avatars/avatar-7.png b/apps/web/src/assets/images/avatars/avatar-7.png
new file mode 100644
index 0000000..7c99450
Binary files /dev/null and b/apps/web/src/assets/images/avatars/avatar-7.png differ
diff --git a/apps/web/src/assets/images/avatars/avatar-8.png b/apps/web/src/assets/images/avatars/avatar-8.png
new file mode 100644
index 0000000..cf1b5f1
Binary files /dev/null and b/apps/web/src/assets/images/avatars/avatar-8.png differ
diff --git a/apps/web/src/assets/images/avatars/avatar-9.png b/apps/web/src/assets/images/avatars/avatar-9.png
new file mode 100644
index 0000000..9249de0
Binary files /dev/null and b/apps/web/src/assets/images/avatars/avatar-9.png differ
diff --git a/apps/web/src/assets/images/champagne-pixel-animated.gif b/apps/web/src/assets/images/champagne-pixel-animated.gif
new file mode 100644
index 0000000..4945526
Binary files /dev/null and b/apps/web/src/assets/images/champagne-pixel-animated.gif differ
diff --git a/apps/web/src/components/Modal.tsx b/apps/web/src/components/Modal.tsx
index 8585839..0ab28db 100644
--- a/apps/web/src/components/Modal.tsx
+++ b/apps/web/src/components/Modal.tsx
@@ -1,16 +1,20 @@
 "use client";
 
 import { motion } from "framer-motion";
+import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { type MouseEventHandler, useCallback, useEffect, useRef } from "react";
 import { cn } from "../../../../packages/ui/libs/utils";
+import CloseIcon from "../assets/icons/close.svg";
 
 export default function Modal({
   children,
   className,
+  closeButton = true,
 }: {
   children: React.ReactNode;
   className?: string;
+  closeButton?: boolean;
 }) {
   const overlay = useRef(null);
   const wrapper = useRef(null);
@@ -20,15 +24,6 @@ export default function Modal({
     router.back();
   }, [router]);
 
-  const onClick: MouseEventHandler = useCallback(
-    (e) => {
-      if (e.target === overlay.current || e.target === wrapper.current) {
-        if (onDismiss) onDismiss();
-      }
-    },
-    [onDismiss],
-  );
-
   const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === "Escape") onDismiss();
@@ -45,7 +40,6 @@ export default function Modal({
     <motion.div
       ref={overlay}
       className="fixed z-50 inset-0 flex justify-center items-center animate-fadeIn"
-      onClick={onClick}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.3 }}
@@ -53,10 +47,18 @@ export default function Modal({
       <div
         ref={wrapper}
         className={cn(
-          `absolute rounded-2xl p-10 bg-[url("/images/wood-pattern-light.png")] bg-repeat bg-center bg-[length:200px_200px] border-8 shadow border-[#b87d5b]`,
+          `absolute rounded-2xl p-10 bg-[url("/images/wood-pattern-light.png")] pt-20 bg-repeat bg-center bg-[length:200px_200px] border-8 shadow border-[#b87d5b]`,
           className,
         )}
       >
+        {closeButton && (
+          <button
+            className="absolute right-3 top-3 opacity-80 hover:scale-90 duration-300"
+            onClick={onDismiss}
+          >
+            <Image width={48} height={48} src={CloseIcon} alt="close icon" />
+          </button>
+        )}
         {children}
       </div>
     </motion.div>
diff --git a/apps/web/src/lib/constants/cards.ts b/apps/web/src/lib/constants/cards.ts
index f23a0b6..a282a0c 100644
--- a/apps/web/src/lib/constants/cards.ts
+++ b/apps/web/src/lib/constants/cards.ts
@@ -2,55 +2,55 @@ import type { CardName } from "@src/types";
 
 export const CARDS_MAP: Record<number, CardName> = {
   0: "clubs-02",
-  1: "clubs-03",
-  2: "clubs-04",
-  3: "clubs-05",
-  4: "clubs-06",
-  5: "clubs-07",
-  6: "clubs-08",
-  7: "clubs-09",
-  8: "clubs-10",
-  9: "clubs-J",
-  10: "clubs-Q",
-  11: "clubs-K",
-  12: "clubs-A",
-  13: "diamonds-02",
-  14: "diamonds-03",
-  15: "diamonds-04",
-  16: "diamonds-05",
+  1: "diamonds-02",
+  2: "hearts-02",
+  3: "spades-02",
+  4: "clubs-03",
+  5: "diamonds-03",
+  6: "hearts-03",
+  7: "spades-03",
+  8: "clubs-04",
+  9: "diamonds-04",
+  10: "hearts-04",
+  11: "spades-04",
+  12: "clubs-05",
+  13: "diamonds-05",
+  14: "hearts-05",
+  15: "spades-05",
+  16: "clubs-06",
   17: "diamonds-06",
-  18: "diamonds-07",
-  19: "diamonds-08",
-  20: "diamonds-09",
-  21: "diamonds-10",
-  22: "diamonds-J",
-  23: "diamonds-Q",
-  24: "diamonds-K",
-  25: "diamonds-A",
-  26: "hearts-02",
-  27: "hearts-03",
-  28: "hearts-04",
-  29: "hearts-05",
-  30: "hearts-06",
-  31: "hearts-07",
-  32: "hearts-08",
-  33: "hearts-09",
+  18: "hearts-06",
+  19: "spades-06",
+  20: "clubs-07",
+  21: "diamonds-07",
+  22: "hearts-07",
+  23: "spades-07",
+  24: "clubs-08",
+  25: "diamonds-08",
+  26: "hearts-08",
+  27: "spades-08",
+  28: "clubs-09",
+  29: "diamonds-09",
+  30: "hearts-09",
+  31: "spades-09",
+  32: "clubs-10",
+  33: "diamonds-10",
   34: "hearts-10",
-  35: "hearts-J",
-  36: "hearts-Q",
-  37: "hearts-K",
-  38: "hearts-A",
-  39: "spades-02",
-  40: "spades-03",
-  41: "spades-04",
-  42: "spades-05",
-  43: "spades-06",
-  44: "spades-07",
-  45: "spades-08",
-  46: "spades-09",
-  47: "spades-10",
-  48: "spades-J",
-  49: "spades-Q",
-  50: "spades-K",
+  35: "spades-10",
+  36: "clubs-J",
+  37: "diamonds-J",
+  38: "hearts-J",
+  39: "spades-J",
+  40: "clubs-Q",
+  41: "diamonds-Q",
+  42: "hearts-Q",
+  43: "spades-Q",
+  44: "clubs-K",
+  45: "diamonds-K",
+  46: "hearts-K",
+  47: "spades-K",
+  48: "clubs-A",
+  49: "diamonds-A",
+  50: "hearts-A",
   51: "spades-A",
 };
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 5b78835..f5211d2 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -7,6 +7,19 @@ module.exports = {
   theme: {
     extend: {
       keyframes: {
+        tada: {
+          "0%": { transform: "scale3d(1, 1, 1)" },
+          "10%, 20%": {
+            transform: "scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)",
+          },
+          "30%, 50%, 70%, 90%": {
+            transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
+          },
+          "40%, 60%, 80%": {
+            transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)",
+          },
+          "100%": { transform: "scale3d(1, 1, 1)" },
+        },
         cardAnimation: {
           "0%, 100%": { transform: "rotate(0deg)" },
           "30%": { transform: "rotate(360deg)" },
@@ -66,6 +79,8 @@ module.exports = {
         dealAndRotate2: "dealAndRotate2 1s ease-out forwards",
         spinner: "spinner 2s infinite",
         cardLoop: "cardAnimation 6s ease-in-out infinite",
+        tada: "tada 1s ease-in-out infinite",
+        "pot-charge": "tada 1s ease-in-out .4s",
       },
     },
   },