diff --git a/server.js b/server.js
index 2b9187d..fd37327 100644
--- a/server.js
+++ b/server.js
@@ -169,7 +169,8 @@ io.on('connection', function(socket) {
         if (game) {
             let player = game.players.find((player) => player.id === id);
             game.players.find((player) => player.id === id).dead = true;
-            game.message = player.name + ", a " + player.card.role + ", has been killed!";
+            game.killedPlayer = player;
+            game.killedRole = player.card.role;
             const winCheck = teamWon(game);
             if (winCheck === "wolf") {
                 game.winningTeam = "wolf";
diff --git a/static/game.js b/static/game.js
index ed87fbb..7a349a0 100644
--- a/static/game.js
+++ b/static/game.js
@@ -11,7 +11,8 @@ let cardRendered = false;
 // respond to the game state received from the server
 socket.on('state', function(game) {
     currentGame = game;
-    if (game.message) {
+    if (game.killedPlayer && game.killedRole) {
+        playKilledAnimation();
         document.getElementById("message-box").innerText = game.message;
     }
     buildGameBasedOnState();
@@ -33,6 +34,10 @@ function buildGameBasedOnState() {
     }
 }
 
+function playKilledAnimation() {
+    
+}
+
 function launchGame() {
     randomlyDealCardsToPlayers();
     socket.emit('startGame', { players: currentGame.players , code: currentGame.accessCode});
diff --git a/static/styles.css b/static/styles.css
index c347409..b85c6b5 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -220,6 +220,55 @@ html, body {
     }
 }
 
+@keyframes slide-fade-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-150px)
+
+    }
+    50% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(-150px)
+
+    }
+}
+
+@keyframes slide-fade-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(150px)
+
+    }
+    50% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(150px)
+
+    }
+}
+
+@keyframes fade-overlay {
+    0% {
+        background-color: rgba(0,0,0,0.0);
+    }
+    50% {
+        background-color: rgba(0,0,0,0.9);
+    }
+
+    100% {
+        background-color: rgba(0,0,0,0.0);
+    }
+}
+
 #app-content {
     text-align: center;
     margin: 0 auto;
@@ -699,6 +748,17 @@ label {
     }
 }
 
+@keyframes flip-slide {
+    0% {
+        transform: rotateY(0deg);
+        transform: translateX(-100px);
+    }
+    100% {
+        transform: rotateY(-90deg);
+        transform: translateX(0px);
+    }
+}
+
 @keyframes flip-down {
     0% {
         transform: rotateY(0deg);
@@ -756,6 +816,12 @@ label {
     animation-fill-mode: forwards;
 }
 
+.flip-slide{
+    animation: flip-slide 1s;
+    animation-fill-mode: forwards;
+}
+
+
 #game-card h2 {
     font-size: 1.7em;
     font-family: 'diavlo', sans-serif;
@@ -1015,6 +1081,54 @@ label {
     color: #7d0b0b;
 }
 
+.overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.9);
+    z-index: 3;
+    animation: fade-overlay 5s;
+    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+#killed-name {
+    color: white;
+    padding-top: 2em;
+    font-size: 2.5em;
+    margin: 0;
+    animation: slide-fade-top 5s;
+    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+#killed-role {
+    animation: slide-fade-bottom 5s;
+    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+
+.killed-card {
+    width: 50px;
+    height: 200px;
+    background-color: white;
+    position: absolute;
+    top: 19%;
+    left: 14%;
+    background-color: transparent;
+    cursor: pointer;
+    justify-content: space-between;
+    max-width: 17em;
+    border-radius: 3px;
+    height: 23em;
+    width: 72%;
+    box-shadow: 0 13px 17px rgba(0,0,0,0.6);
+    perspective: 1000px;
+    transform-style: preserve-3d;
+}
+
 @keyframes animatetop {
     from {top: -300px; opacity: 0}
     to {top: 0; opacity: 1}
diff --git a/views/game.html b/views/game.html
index 0fe352f..0c801a2 100644
--- a/views/game.html
+++ b/views/game.html
@@ -9,6 +9,12 @@
 </head>
 <body>
 <div id="app-content">
+    <div id="killed-animation">
+        <div class='overlay'>
+            <h2 id="killed-name">Test was a role!</h2>
+            <img id="killed-role" alt="Werewolf" src="../assets/images/roles/Werewolf.png">
+        </div>
+    </div>
     <div id="message-box"></div>
     <div id="lobby-container"></div>
     <div id="game-container"></div>