diff --git a/game/cards.php b/game/cards.php
index d5b4c78..2b2d6db 100644
--- a/game/cards.php
+++ b/game/cards.php
@@ -7,3 +7,23 @@ foreach($suits as $suit) {
     echo $card.'_of_'.$suit.', ';
   }
 }
+foreach($suits as $suit) {
+  foreach($cards as $card) {
+    $replace = [
+      'two' => 2,
+      'three' => 3,
+      'four' => 4,
+      'five' => 5,
+      'six' => 6,
+      'seven' => 7,
+      'eight' => 8,
+      'nine' => 9,
+      'ten' => 10,
+    ];
+    $new_card = $replace[$card] ?? $card;
+    echo <<<EOF
+      text = text.replace('{$card}_of_{$suit}', '<img class="card" src="/images/{$new_card}_of_{$suit}.svg">');\n
+    EOF;
+  }
+}
+
diff --git a/scss/style.scss b/scss/style.scss
index 94caf9b..847ae0b 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -234,3 +234,6 @@ body {
 .error {
   color: red;
 }
+.card {
+  width: 3em;
+}
diff --git a/src/index.js b/src/index.js
index 852b3d5..ce2e6c8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,7 +11,58 @@ import entryPoint from '../game/game.ink';
  * It's an easy way to define your own tags and text transformations.
  */
 function transform (text: string) {
-  text = text.replace('two_of_spades', '<img src="/images/2_of_spades.svg">');
+  text = text.replace('two_of_spades', '<img class="card" src="/images/2_of_spades.svg">');
+  text = text.replace('three_of_spades', '<img class="card" src="/images/3_of_spades.svg">');
+  text = text.replace('four_of_spades', '<img class="card" src="/images/4_of_spades.svg">');
+  text = text.replace('five_of_spades', '<img class="card" src="/images/5_of_spades.svg">');
+  text = text.replace('six_of_spades', '<img class="card" src="/images/6_of_spades.svg">');
+  text = text.replace('seven_of_spades', '<img class="card" src="/images/7_of_spades.svg">');
+  text = text.replace('eight_of_spades', '<img class="card" src="/images/8_of_spades.svg">');
+  text = text.replace('nine_of_spades', '<img class="card" src="/images/9_of_spades.svg">');
+  text = text.replace('ten_of_spades', '<img class="card" src="/images/10_of_spades.svg">');
+  text = text.replace('jack_of_spades', '<img class="card" src="/images/jack_of_spades.svg">');
+  text = text.replace('queen_of_spades', '<img class="card" src="/images/queen_of_spades.svg">');
+  text = text.replace('king_of_spades', '<img class="card" src="/images/king_of_spades.svg">');
+  text = text.replace('ace_of_spades', '<img class="card" src="/images/ace_of_spades.svg">');
+  text = text.replace('two_of_clubs', '<img class="card" src="/images/2_of_clubs.svg">');
+  text = text.replace('three_of_clubs', '<img class="card" src="/images/3_of_clubs.svg">');
+  text = text.replace('four_of_clubs', '<img class="card" src="/images/4_of_clubs.svg">');
+  text = text.replace('five_of_clubs', '<img class="card" src="/images/5_of_clubs.svg">');
+  text = text.replace('six_of_clubs', '<img class="card" src="/images/6_of_clubs.svg">');
+  text = text.replace('seven_of_clubs', '<img class="card" src="/images/7_of_clubs.svg">');
+  text = text.replace('eight_of_clubs', '<img class="card" src="/images/8_of_clubs.svg">');
+  text = text.replace('nine_of_clubs', '<img class="card" src="/images/9_of_clubs.svg">');
+  text = text.replace('ten_of_clubs', '<img class="card" src="/images/10_of_clubs.svg">');
+  text = text.replace('jack_of_clubs', '<img class="card" src="/images/jack_of_clubs.svg">');
+  text = text.replace('queen_of_clubs', '<img class="card" src="/images/queen_of_clubs.svg">');
+  text = text.replace('king_of_clubs', '<img class="card" src="/images/king_of_clubs.svg">');
+  text = text.replace('ace_of_clubs', '<img class="card" src="/images/ace_of_clubs.svg">');
+  text = text.replace('two_of_hearts', '<img class="card" src="/images/2_of_hearts.svg">');
+  text = text.replace('three_of_hearts', '<img class="card" src="/images/3_of_hearts.svg">');
+  text = text.replace('four_of_hearts', '<img class="card" src="/images/4_of_hearts.svg">');
+  text = text.replace('five_of_hearts', '<img class="card" src="/images/5_of_hearts.svg">');
+  text = text.replace('six_of_hearts', '<img class="card" src="/images/6_of_hearts.svg">');
+  text = text.replace('seven_of_hearts', '<img class="card" src="/images/7_of_hearts.svg">');
+  text = text.replace('eight_of_hearts', '<img class="card" src="/images/8_of_hearts.svg">');
+  text = text.replace('nine_of_hearts', '<img class="card" src="/images/9_of_hearts.svg">');
+  text = text.replace('ten_of_hearts', '<img class="card" src="/images/10_of_hearts.svg">');
+  text = text.replace('jack_of_hearts', '<img class="card" src="/images/jack_of_hearts.svg">');
+  text = text.replace('queen_of_hearts', '<img class="card" src="/images/queen_of_hearts.svg">');
+  text = text.replace('king_of_hearts', '<img class="card" src="/images/king_of_hearts.svg">');
+  text = text.replace('ace_of_hearts', '<img class="card" src="/images/ace_of_hearts.svg">');
+  text = text.replace('two_of_diamonds', '<img class="card" src="/images/2_of_diamonds.svg">');
+  text = text.replace('three_of_diamonds', '<img class="card" src="/images/3_of_diamonds.svg">');
+  text = text.replace('four_of_diamonds', '<img class="card" src="/images/4_of_diamonds.svg">');
+  text = text.replace('five_of_diamonds', '<img class="card" src="/images/5_of_diamonds.svg">');
+  text = text.replace('six_of_diamonds', '<img class="card" src="/images/6_of_diamonds.svg">');
+  text = text.replace('seven_of_diamonds', '<img class="card" src="/images/7_of_diamonds.svg">');
+  text = text.replace('eight_of_diamonds', '<img class="card" src="/images/8_of_diamonds.svg">');
+  text = text.replace('nine_of_diamonds', '<img class="card" src="/images/9_of_diamonds.svg">');
+  text = text.replace('ten_of_diamonds', '<img class="card" src="/images/10_of_diamonds.svg">');
+  text = text.replace('jack_of_diamonds', '<img class="card" src="/images/jack_of_diamonds.svg">');
+  text = text.replace('queen_of_diamonds', '<img class="card" src="/images/queen_of_diamonds.svg">');
+  text = text.replace('king_of_diamonds', '<img class="card" src="/images/king_of_diamonds.svg">');
+  text = text.replace('ace_of_diamonds', '<img class="card" src="/images/ace_of_diamonds.svg">');
   text = text.replace('<st>', '<span class="subtitle">');
   text = text.replace('</st>', '</span>');
   text = text.replace('<ell>', '<span class="ellipsis">⏸️&nbsp;</span>');