diff --git a/public/scripts/make-animations.js b/public/scripts/make-animations.js
index b7c4833..9cfd96e 100755
--- a/public/scripts/make-animations.js
+++ b/public/scripts/make-animations.js
@@ -1,6 +1,6 @@
 const animations = {};
-// animations['victory'] = TODO: implement victory animation
-// animations['defeat'] = TODO: implement defeat animation
+// animations['black-victory'] = TODO: implement black victory animation
+// animations['white-victory'] = TODO: implement white victory animation
 // animations['draw'] = TODO: implement draw animation
 
 document.addEventListener('htmx:wsAfterMessage', function (e) {
diff --git a/src/messages/draw.ts b/src/messages/draw.ts
index e6e6674..bb1e0b2 100755
--- a/src/messages/draw.ts
+++ b/src/messages/draw.ts
@@ -2,6 +2,7 @@ import { PlayerConnection } from '../player-connection';
 import { broadcastBoard } from '../view/board-renderer';
 import { broadcastButtons } from '../view/button-renderer';
 import { broadcastSound } from '../view/sound-renderer';
+import { broadcastAnimation } from '../view/animation-renderer';
 import { broadcastTitle } from '../view/title-renderer';
 import { GameServer } from '../game-server';
 import { ActionType, Message } from './messages';
@@ -67,6 +68,7 @@ function handleAcceptDraw(server: GameServer): void {
   broadcastButtons(server);
   broadcastTitle(server);
   broadcastSound(server, 'draw');
+  broadcastAnimation(server, 'draw');
 }
 
 function handleDeclineDraw(server: GameServer): void {
diff --git a/src/messages/make-move.ts b/src/messages/make-move.ts
index 0fadb31..d1eda99 100755
--- a/src/messages/make-move.ts
+++ b/src/messages/make-move.ts
@@ -2,6 +2,7 @@ import { PlayerConnection } from '../player-connection';
 import { broadcastBoard } from '../view/board-renderer';
 import { broadcastButtons } from '../view/button-renderer';
 import { broadcastSound, broadcastSoundToPlayer } from '../view/sound-renderer';
+import { broadcastAnimation } from '../view/animation-renderer';
 import { broadcastTitle } from '../view/title-renderer';
 import { GameServer } from '../game-server';
 import { Message } from './messages';
@@ -72,6 +73,8 @@ export function handleMakeMove(
       switch (server.gomoku.winnerColor) {
         case 'draw':
           broadcastSound(server, 'draw');
+          broadcastAnimation(server, 'draw');
+          break;
         case 'white':
           if (whiteConn) {
             broadcastSoundToPlayer(whiteConn, 'victory');
@@ -79,6 +82,7 @@ export function handleMakeMove(
           if (blackConn) {
             broadcastSoundToPlayer(blackConn, 'defeat');
           }
+          broadcastAnimation(server, 'white-victory');
           break;
         case 'black':
           if (whiteConn) {
@@ -87,6 +91,7 @@ export function handleMakeMove(
           if (blackConn) {
             broadcastSoundToPlayer(blackConn, 'victory');
           }
+          broadcastAnimation(server, 'black-victory');
           break;
       }
     }
diff --git a/src/messages/resign.ts b/src/messages/resign.ts
index 902b933..8e4da0e 100755
--- a/src/messages/resign.ts
+++ b/src/messages/resign.ts
@@ -2,6 +2,7 @@ import { PlayerConnection } from '../player-connection';
 import { broadcastBoard } from '../view/board-renderer';
 import { broadcastButtons } from '../view/button-renderer';
 import { broadcastSoundToPlayer } from '../view/sound-renderer';
+import { broadcastAnimation } from '../view/animation-renderer';
 import { broadcastTitle } from '../view/title-renderer';
 import { GameServer } from '../game-server';
 import { Message } from './messages';
@@ -41,6 +42,12 @@ export function handleResignation(
     const otherPlayer = server.connections.get(otherPlayerId);
     if (otherPlayer) {
       broadcastSoundToPlayer(otherPlayer, 'victory');
+      // Broadcast animation for the winning player's color
+      if (resigningPlayerColor === 'white') {
+        broadcastAnimation(server, 'black-victory');
+      } else {
+        broadcastAnimation(server, 'white-victory');
+      }
     }
   }