diff --git a/package.json b/package.json
index 041b8a5..cecaa7e 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "axios": "^1.7.1",
     "detect-browser": "^5.3.0",
     "focus-trap-react": "^10.2.3",
+    "framer-motion": "^11.3.19",
     "howler": "^2.2.4",
     "random-js": "^2.1.0",
     "react": "^18.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ec6c10..d5e98b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
       focus-trap-react:
         specifier: ^10.2.3
         version: 10.2.3(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      framer-motion:
+        specifier: ^11.3.19
+        version: 11.3.19(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       howler:
         specifier: ^2.2.4
         version: 2.2.4
@@ -1138,6 +1141,20 @@ packages:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
     engines: {node: '>= 6'}
 
+  framer-motion@11.3.19:
+    resolution: {integrity: sha512-+luuQdx4AsamyMcvzW7jUAJYIKvQs1KE7oHvKkW3eNzmo0S+3PSDWjBuQkuIP9WyneGnKGMLUSuHs8OP7jKpQg==}
+    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
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3003,6 +3020,14 @@ snapshots:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
+  framer-motion@11.3.19(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      tslib: 2.6.2
+    optionalDependencies:
+      '@emotion/is-prop-valid': 1.2.2
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   fsevents@2.3.3:
     optional: true
 
diff --git a/public/sounds/wilhelm_scream.mp3 b/public/sounds/wilhelm_scream.mp3
new file mode 100644
index 0000000..1ac5238
Binary files /dev/null and b/public/sounds/wilhelm_scream.mp3 differ
diff --git a/public/sounds/wilhelm_scream.ogg b/public/sounds/wilhelm_scream.ogg
new file mode 100644
index 0000000..57607af
Binary files /dev/null and b/public/sounds/wilhelm_scream.ogg differ
diff --git a/src/hooks/sounds.ts b/src/hooks/sounds.ts
index 27b00b8..2a5d2ff 100644
--- a/src/hooks/sounds.ts
+++ b/src/hooks/sounds.ts
@@ -37,6 +37,7 @@ const SoundNames = [
   "wicked",
   "firework",
   "camera_shutter",
+  "wilhelm_scream",
 ] as const;
 
 type SoundName = (typeof SoundNames)[number];
diff --git a/src/views/Game/components/CardInventory.tsx b/src/views/Game/components/CardInventory.tsx
index 90add16..e6d29ee 100644
--- a/src/views/Game/components/CardInventory.tsx
+++ b/src/views/Game/components/CardInventory.tsx
@@ -1,4 +1,5 @@
-import { Box, Card, darken, Stack, Typography } from "@mui/material";
+import { Box, Card, darken, Stack, Typography, useTheme } from "@mui/material";
+import { AnimatePresence, motion } from "framer-motion";
 import { FunctionComponent, memo } from "react";
 import { useCardFlash } from "../../../components/CardFlash";
 import useGame from "../../../stores/game";
@@ -75,70 +76,90 @@ interface CardInventoryCardProps {
 const CardInventoryCard: FunctionComponent<CardInventoryCardProps> = (
   props,
 ) => {
+  const theme = useTheme();
+
   return (
     <Box
       sx={{
         position: "relative",
       }}
     >
-      <Card
-        variant="outlined"
-        onClick={props.onClick}
-        sx={{
-          zIndex: 1,
-          width: 78,
-          height: 106,
-          flexShrink: 0,
-          textAlign: "center",
-          position: "relative",
-          userSelect: "none",
-          cursor: "pointer",
-
-          ...(props.value <= 0 && {
-            opacity: 0.5,
-            background: (t) =>
-              t.palette.mode === "dark"
-                ? "url('/whiteheart.svg')"
-                : "url('/blackheart.svg')",
-            backgroundSize: "36px",
-            backgroundRepeat: "no-repeat",
-            backgroundPosition: "center",
-          }),
-        }}
-      >
-        {props.value > 0 && (
-          <>
-            <Typography
-              fontSize={14}
-              fontWeight={800}
-              textAlign="left"
-              paddingLeft="8px"
-              paddingTop="8px"
-              zIndex={989}
-            >
-              {props.kind}
-            </Typography>
-
-            <Typography fontSize={32}>{props.value}</Typography>
-
-            <Typography
-              fontSize={14}
-              fontWeight={800}
-              textAlign="left"
-              paddingLeft="8px"
-              paddingTop="8px"
-              sx={{
-                transform: "rotate(180deg)",
-                color: "primary.main",
-              }}
-            >
-              {props.kind}
-            </Typography>
-          </>
-        )}
-      </Card>
-
-      <CardStack size={props.value} />
+      <AnimatePresence initial={false}>
+        <Card
+          variant="outlined"
+          onClick={props.onClick}
+          sx={{
+            zIndex: 1,
+            width: 78,
+            height: 106,
+            flexShrink: 0,
+            textAlign: "center",
+            position: "relative",
+            userSelect: "none",
+            cursor: "pointer",
+
+            ...(props.value <= 0 && {
+              opacity: 0.5,
+              background: (t) =>
+                t.palette.mode === "dark"
+                  ? "url('/whiteheart.svg')"
+                  : "url('/blackheart.svg')",
+              backgroundSize: "36px",
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "center",
+            }),
+          }}
+        >
+          {props.value > 0 && (
+            <>
+              <Typography
+                fontSize={14}
+                fontWeight={800}
+                textAlign="left"
+                paddingLeft="8px"
+                paddingTop="8px"
+                zIndex={989}
+              >
+                {props.kind}
+              </Typography>
+
+              <motion.div
+                animate={{
+                  scale: [1, 1.5, 1],
+                  color: [
+                    theme.palette.text.primary,
+                    theme.palette.primary.light,
+                    theme.palette.text.primary,
+                  ],
+                }}
+                key={props.value}
+                transition={{
+                  duration: 0.5,
+                  ease: "easeInOut",
+                }}
+              >
+                <Typography fontSize={32}>{props.value}</Typography>
+              </motion.div>
+
+              <Typography
+                fontSize={14}
+                fontWeight={800}
+                textAlign="left"
+                paddingLeft="8px"
+                paddingTop="8px"
+                sx={{
+                  transform: "rotate(180deg)",
+                  color: "primary.main",
+                }}
+              >
+                {props.kind}
+              </Typography>
+            </>
+          )}
+        </Card>
+
+        <CardStack size={props.value} />
+      </AnimatePresence>
     </Box>
   );
 };
diff --git a/src/views/Game/components/DNFDialog.tsx b/src/views/Game/components/DNFDialog.tsx
index 99a5cc1..4170533 100644
--- a/src/views/Game/components/DNFDialog.tsx
+++ b/src/views/Game/components/DNFDialog.tsx
@@ -28,11 +28,13 @@ const DNFDialog: FunctionComponent<DNFDialogProps> = (props) => {
   const sound = useSounds();
 
   const toggle = (index: number) => {
-    sound.play("click");
+    const isDNF = !dnf_player_indexes.includes(index);
 
-    const isDNF = dnf_player_indexes.includes(index);
+    if (isDNF) {
+      sound.play("wilhelm_scream");
+    }
 
-    SetPlayerDNF(index, !isDNF);
+    SetPlayerDNF(index, isDNF);
   };
 
   return (
diff --git a/src/views/Game/components/Table.tsx b/src/views/Game/components/Table.tsx
index 5de32f2..e8d0b8b 100644
--- a/src/views/Game/components/Table.tsx
+++ b/src/views/Game/components/Table.tsx
@@ -1,4 +1,6 @@
 import {
+  Box,
+  Grow,
   Stack,
   Table,
   TableBody,
@@ -168,26 +170,26 @@ const GameTable: FunctionComponent<GameTableProps> = () => {
                       }}
                     >
                       {card && (
-                        <>
-                          <Typography
-                            color={getCardSuitColor(card, theme.palette.mode)}
-                            sx={{
-                              width: 25,
-                              textAlign: "left",
-                            }}
-                          >
-                            {getCardASCIISymbol(card)}
-                          </Typography>
-
-                          <Typography
-                            sx={{
-                              width: 25,
-                              textAlign: "right",
-                            }}
-                          >
-                            {card?.value}
-                          </Typography>
-                        </>
+                        <Grow in={true}>
+                          <Box sx={{ display: "flex" }}>
+                            <Typography
+                              color={getCardSuitColor(card, theme.palette.mode)}
+                              sx={{
+                                width: 25,
+                              }}
+                            >
+                              {getCardASCIISymbol(card)}
+                            </Typography>
+
+                            <Typography
+                              sx={{
+                                width: 25,
+                              }}
+                            >
+                              {card?.value}
+                            </Typography>
+                          </Box>
+                        </Grow>
                       )}
                     </Stack>
                   </TableCell>