diff --git a/knockoutwhistweb/app/components/WebApplicationConfiguration.scala b/knockoutwhistweb/app/components/WebApplicationConfiguration.scala
index 8226cf8..5d74d6c 100644
--- a/knockoutwhistweb/app/components/WebApplicationConfiguration.scala
+++ b/knockoutwhistweb/app/components/WebApplicationConfiguration.scala
@@ -1,7 +1,7 @@
 package components
 
-import controllers.WebUI
 import de.knockoutwhist.components.DefaultConfiguration
+import controllers.WebUI
 import de.knockoutwhist.ui.UI
 import de.knockoutwhist.utils.events.EventListener
 
diff --git a/knockoutwhistweb/app/controllers/sessions/SimpleSession.scala b/knockoutwhistweb/app/controllers/sessions/SimpleSession.scala
index ad0f86f..3b62d76 100644
--- a/knockoutwhistweb/app/controllers/sessions/SimpleSession.scala
+++ b/knockoutwhistweb/app/controllers/sessions/SimpleSession.scala
@@ -10,6 +10,8 @@ import de.knockoutwhist.events.cards.{RenderHandEvent, ShowTieCardsEvent}
 import de.knockoutwhist.events.round.ShowCurrentTrickEvent
 import de.knockoutwhist.player.AbstractPlayer
 import de.knockoutwhist.utils.events.SimpleEvent
+import scalafx.scene.image.Image
+import util.WebUIUtils
 
 import java.util.UUID
 
@@ -17,6 +19,7 @@ case class SimpleSession(id: UUID, private var output: String) extends PlayerSes
   def get(): String = {
     output
   }
+
   override def updatePlayer(event: SimpleEvent): Unit = {
     event match {
       case event: RenderHandEvent =>
@@ -35,13 +38,13 @@ case class SimpleSession(id: UUID, private var output: String) extends PlayerSes
         showcurtrevmet(event)
     }
   }
-  
+
   private def clear(): Unit = {
     output = ""
   }
 
   private def renderHand(event: RenderHandEvent): Unit = {
-    WebUICards.renderHandEvent(event.hand, event.showNumbers).foreach(addToOutput)
+    output += WebUICards.renderHandEvent(event.hand, event.showNumbers).map(_.toString).mkString
   }
 
   private def showtiecardseventmethod(event: ShowTieCardsEvent): Option[Boolean] = {
@@ -49,14 +52,14 @@ case class SimpleSession(id: UUID, private var output: String) extends PlayerSes
     for ((player, card) <- event.card) {
       val playerNameLength = player.name.length
       a(0) += " " + player.name + ":" + (" " * (playerNameLength - 1))
-      val rendered = WebUICards.renderCardAsString(card)
-      a(1) += " " + rendered(0)
-      a(2) += " " + rendered(1)
-      a(3) += " " + rendered(2)
-      a(4) += " " + rendered(3)
-      a(5) += " " + rendered(4)
-      a(6) += " " + rendered(5)
-      a(7) += " " + rendered(6)
+      val rendered = WebUIUtils.cardtoImage(card)
+      //a(1) += " " + rendered(0)
+      //a(2) += " " + rendered(1)
+      //a(3) += " " + rendered(2)
+      //a(4) += " " + rendered(3)
+      //a(5) += " " + rendered(4)
+      //a(6) += " " + rendered(5)
+      //a(7) += " " + rendered(6)
     }
     a.foreach(addToOutput)
     Some(true)
@@ -253,16 +256,16 @@ case class SimpleSession(id: UUID, private var output: String) extends PlayerSes
       )
     }
 
-    def renderHandEvent(hand: Hand, showNumbers: Boolean): Vector[String] = {
-      val cardStrings = hand.cards.map(renderCardAsString)
-      var zipped = cardStrings.transpose
-      if (showNumbers) zipped = {
-        List.tabulate(hand.cards.length) { i =>
-          s"     ${i + 1}     "
-        }
-      } :: zipped
-      zipped.map(_.mkString(" ")).toVector
+    def renderHandEvent(hand: Hand, showNumbers: Boolean): List[Image] = {
+      hand.cards.map(WebUIUtils.cardtoImage)
+      //var zipped = cardStrings.transpose
+      //if (showNumbers) zipped = {
+      // List.tabulate(hand.cards.length) { i =>
+      //    s"     ${i + 1}     "
+      //  }
+      // } :: zipped
+      // zipped.map(_.mkString(" ")).toVector
+      // }
     }
   }
-
-}
+}
\ No newline at end of file
diff --git a/knockoutwhistweb/app/util/WebUIUtils.scala b/knockoutwhistweb/app/util/WebUIUtils.scala
new file mode 100644
index 0000000..a89cc82
--- /dev/null
+++ b/knockoutwhistweb/app/util/WebUIUtils.scala
@@ -0,0 +1,33 @@
+package util
+
+import de.knockoutwhist.cards.Card
+import de.knockoutwhist.cards.CardValue.{Ace, Eight, Five, Four, Jack, King, Nine, Queen, Seven, Six, Ten, Three, Two}
+import de.knockoutwhist.cards.Suit.{Clubs, Diamonds, Hearts, Spades}
+import scalafx.scene.image.Image
+
+object WebUIUtils {
+  def cardtoImage(card: Card): Image = {
+    val s = card.suit match {
+      case Spades => "S"
+      case Hearts => "H"
+      case Clubs => "C"
+      case Diamonds => "D"
+    }
+    val cv = card.cardValue match {
+      case Ace => "A"
+      case King => "K"
+      case Queen => "Q"
+      case Jack => "J"
+      case Ten => "T"
+      case Nine => "9"
+      case Eight => "8"
+      case Seven => "7"
+      case Six => "6"
+      case Five => "5"
+      case Four => "4"
+      case Three => "3"
+      case Two => "2"
+    }
+    new Image(f"public/images/cards/$cv$s.png")
+  }
+}
diff --git a/knockoutwhistweb/app/views/tui.scala.html b/knockoutwhistweb/app/views/tui.scala.html
index 67b715a..f6ae5be 100644
--- a/knockoutwhistweb/app/views/tui.scala.html
+++ b/knockoutwhistweb/app/views/tui.scala.html
@@ -3,7 +3,7 @@
 @main("Tui") {
     <div id="tui">
         @for(line <- toRender.split('\n')) {
-            <p>@line</p>
+            <a href="@routes.Relative.ingame(line)">@line</a>
         }
     </div>
 }
diff --git a/knockoutwhistweb/public/images/cards/1B.png b/knockoutwhistweb/public/images/cards/1B.png
new file mode 100644
index 0000000..56dcd3a
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/1B.png differ
diff --git a/knockoutwhistweb/public/images/cards/1J.png b/knockoutwhistweb/public/images/cards/1J.png
new file mode 100644
index 0000000..089ce54
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/1J.png differ
diff --git a/knockoutwhistweb/public/images/cards/2B.png b/knockoutwhistweb/public/images/cards/2B.png
new file mode 100644
index 0000000..d3338f6
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/2B.png differ
diff --git a/knockoutwhistweb/public/images/cards/2C.png b/knockoutwhistweb/public/images/cards/2C.png
new file mode 100644
index 0000000..9782303
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/2C.png differ
diff --git a/knockoutwhistweb/public/images/cards/2D.png b/knockoutwhistweb/public/images/cards/2D.png
new file mode 100644
index 0000000..fc84d48
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/2D.png differ
diff --git a/knockoutwhistweb/public/images/cards/2H.png b/knockoutwhistweb/public/images/cards/2H.png
new file mode 100644
index 0000000..f258c36
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/2H.png differ
diff --git a/knockoutwhistweb/public/images/cards/2J.png b/knockoutwhistweb/public/images/cards/2J.png
new file mode 100644
index 0000000..276a83e
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/2J.png differ
diff --git a/knockoutwhistweb/public/images/cards/2S.png b/knockoutwhistweb/public/images/cards/2S.png
new file mode 100644
index 0000000..c74b01f
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/2S.png differ
diff --git a/knockoutwhistweb/public/images/cards/3C.png b/knockoutwhistweb/public/images/cards/3C.png
new file mode 100644
index 0000000..a3ac6dd
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/3C.png differ
diff --git a/knockoutwhistweb/public/images/cards/3D.png b/knockoutwhistweb/public/images/cards/3D.png
new file mode 100644
index 0000000..6f5642b
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/3D.png differ
diff --git a/knockoutwhistweb/public/images/cards/3H.png b/knockoutwhistweb/public/images/cards/3H.png
new file mode 100644
index 0000000..4f10a41
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/3H.png differ
diff --git a/knockoutwhistweb/public/images/cards/3S.png b/knockoutwhistweb/public/images/cards/3S.png
new file mode 100644
index 0000000..905e6a6
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/3S.png differ
diff --git a/knockoutwhistweb/public/images/cards/4C.png b/knockoutwhistweb/public/images/cards/4C.png
new file mode 100644
index 0000000..a1496c4
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/4C.png differ
diff --git a/knockoutwhistweb/public/images/cards/4D.png b/knockoutwhistweb/public/images/cards/4D.png
new file mode 100644
index 0000000..8ffaa60
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/4D.png differ
diff --git a/knockoutwhistweb/public/images/cards/4H.png b/knockoutwhistweb/public/images/cards/4H.png
new file mode 100644
index 0000000..606df63
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/4H.png differ
diff --git a/knockoutwhistweb/public/images/cards/4S.png b/knockoutwhistweb/public/images/cards/4S.png
new file mode 100644
index 0000000..9823182
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/4S.png differ
diff --git a/knockoutwhistweb/public/images/cards/5C.png b/knockoutwhistweb/public/images/cards/5C.png
new file mode 100644
index 0000000..bfe56c5
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/5C.png differ
diff --git a/knockoutwhistweb/public/images/cards/5D.png b/knockoutwhistweb/public/images/cards/5D.png
new file mode 100644
index 0000000..29efb30
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/5D.png differ
diff --git a/knockoutwhistweb/public/images/cards/5H.png b/knockoutwhistweb/public/images/cards/5H.png
new file mode 100644
index 0000000..7c37348
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/5H.png differ
diff --git a/knockoutwhistweb/public/images/cards/5S.png b/knockoutwhistweb/public/images/cards/5S.png
new file mode 100644
index 0000000..9db06c8
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/5S.png differ
diff --git a/knockoutwhistweb/public/images/cards/6C.png b/knockoutwhistweb/public/images/cards/6C.png
new file mode 100644
index 0000000..a0767c2
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/6C.png differ
diff --git a/knockoutwhistweb/public/images/cards/6D.png b/knockoutwhistweb/public/images/cards/6D.png
new file mode 100644
index 0000000..9ee9f3b
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/6D.png differ
diff --git a/knockoutwhistweb/public/images/cards/6H.png b/knockoutwhistweb/public/images/cards/6H.png
new file mode 100644
index 0000000..153c954
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/6H.png differ
diff --git a/knockoutwhistweb/public/images/cards/6S.png b/knockoutwhistweb/public/images/cards/6S.png
new file mode 100644
index 0000000..9520a8b
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/6S.png differ
diff --git a/knockoutwhistweb/public/images/cards/7C.png b/knockoutwhistweb/public/images/cards/7C.png
new file mode 100644
index 0000000..71df8c3
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/7C.png differ
diff --git a/knockoutwhistweb/public/images/cards/7D.png b/knockoutwhistweb/public/images/cards/7D.png
new file mode 100644
index 0000000..910eac4
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/7D.png differ
diff --git a/knockoutwhistweb/public/images/cards/7H.png b/knockoutwhistweb/public/images/cards/7H.png
new file mode 100644
index 0000000..b3b3868
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/7H.png differ
diff --git a/knockoutwhistweb/public/images/cards/7S.png b/knockoutwhistweb/public/images/cards/7S.png
new file mode 100644
index 0000000..74ac462
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/7S.png differ
diff --git a/knockoutwhistweb/public/images/cards/8C.png b/knockoutwhistweb/public/images/cards/8C.png
new file mode 100644
index 0000000..81e275a
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/8C.png differ
diff --git a/knockoutwhistweb/public/images/cards/8D.png b/knockoutwhistweb/public/images/cards/8D.png
new file mode 100644
index 0000000..fa7784f
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/8D.png differ
diff --git a/knockoutwhistweb/public/images/cards/8H.png b/knockoutwhistweb/public/images/cards/8H.png
new file mode 100644
index 0000000..a89d9a3
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/8H.png differ
diff --git a/knockoutwhistweb/public/images/cards/8S.png b/knockoutwhistweb/public/images/cards/8S.png
new file mode 100644
index 0000000..e5cba5a
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/8S.png differ
diff --git a/knockoutwhistweb/public/images/cards/9C.png b/knockoutwhistweb/public/images/cards/9C.png
new file mode 100644
index 0000000..f4fe232
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/9C.png differ
diff --git a/knockoutwhistweb/public/images/cards/9D.png b/knockoutwhistweb/public/images/cards/9D.png
new file mode 100644
index 0000000..fac0a45
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/9D.png differ
diff --git a/knockoutwhistweb/public/images/cards/9H.png b/knockoutwhistweb/public/images/cards/9H.png
new file mode 100644
index 0000000..d94adcc
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/9H.png differ
diff --git a/knockoutwhistweb/public/images/cards/9S.png b/knockoutwhistweb/public/images/cards/9S.png
new file mode 100644
index 0000000..d6e3ae8
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/9S.png differ
diff --git a/knockoutwhistweb/public/images/cards/AC.png b/knockoutwhistweb/public/images/cards/AC.png
new file mode 100644
index 0000000..28bf67d
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/AC.png differ
diff --git a/knockoutwhistweb/public/images/cards/ACB.png b/knockoutwhistweb/public/images/cards/ACB.png
new file mode 100644
index 0000000..df81ced
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/ACB.png differ
diff --git a/knockoutwhistweb/public/images/cards/AD.png b/knockoutwhistweb/public/images/cards/AD.png
new file mode 100644
index 0000000..5b06a40
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/AD.png differ
diff --git a/knockoutwhistweb/public/images/cards/ADB.png b/knockoutwhistweb/public/images/cards/ADB.png
new file mode 100644
index 0000000..2619745
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/ADB.png differ
diff --git a/knockoutwhistweb/public/images/cards/AH.png b/knockoutwhistweb/public/images/cards/AH.png
new file mode 100644
index 0000000..92c5421
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/AH.png differ
diff --git a/knockoutwhistweb/public/images/cards/AHB.png b/knockoutwhistweb/public/images/cards/AHB.png
new file mode 100644
index 0000000..c75de36
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/AHB.png differ
diff --git a/knockoutwhistweb/public/images/cards/AS.png b/knockoutwhistweb/public/images/cards/AS.png
new file mode 100644
index 0000000..dc897ef
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/AS.png differ
diff --git a/knockoutwhistweb/public/images/cards/ASB.png b/knockoutwhistweb/public/images/cards/ASB.png
new file mode 100644
index 0000000..ada726f
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/ASB.png differ
diff --git a/knockoutwhistweb/public/images/cards/JC.png b/knockoutwhistweb/public/images/cards/JC.png
new file mode 100644
index 0000000..878375f
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/JC.png differ
diff --git a/knockoutwhistweb/public/images/cards/JD.png b/knockoutwhistweb/public/images/cards/JD.png
new file mode 100644
index 0000000..73bd136
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/JD.png differ
diff --git a/knockoutwhistweb/public/images/cards/JH.png b/knockoutwhistweb/public/images/cards/JH.png
new file mode 100644
index 0000000..7082994
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/JH.png differ
diff --git a/knockoutwhistweb/public/images/cards/JS.png b/knockoutwhistweb/public/images/cards/JS.png
new file mode 100644
index 0000000..5f8a781
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/JS.png differ
diff --git a/knockoutwhistweb/public/images/cards/KC.png b/knockoutwhistweb/public/images/cards/KC.png
new file mode 100644
index 0000000..84ecb73
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/KC.png differ
diff --git a/knockoutwhistweb/public/images/cards/KD.png b/knockoutwhistweb/public/images/cards/KD.png
new file mode 100644
index 0000000..8d305e9
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/KD.png differ
diff --git a/knockoutwhistweb/public/images/cards/KH.png b/knockoutwhistweb/public/images/cards/KH.png
new file mode 100644
index 0000000..3eeefa1
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/KH.png differ
diff --git a/knockoutwhistweb/public/images/cards/KS.png b/knockoutwhistweb/public/images/cards/KS.png
new file mode 100644
index 0000000..57c19d8
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/KS.png differ
diff --git a/knockoutwhistweb/public/images/cards/QC.png b/knockoutwhistweb/public/images/cards/QC.png
new file mode 100644
index 0000000..97598cc
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/QC.png differ
diff --git a/knockoutwhistweb/public/images/cards/QD.png b/knockoutwhistweb/public/images/cards/QD.png
new file mode 100644
index 0000000..2ef96f7
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/QD.png differ
diff --git a/knockoutwhistweb/public/images/cards/QH.png b/knockoutwhistweb/public/images/cards/QH.png
new file mode 100644
index 0000000..6dd421e
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/QH.png differ
diff --git a/knockoutwhistweb/public/images/cards/QS.png b/knockoutwhistweb/public/images/cards/QS.png
new file mode 100644
index 0000000..787699d
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/QS.png differ
diff --git a/knockoutwhistweb/public/images/cards/TC.png b/knockoutwhistweb/public/images/cards/TC.png
new file mode 100644
index 0000000..59fb535
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/TC.png differ
diff --git a/knockoutwhistweb/public/images/cards/TD.png b/knockoutwhistweb/public/images/cards/TD.png
new file mode 100644
index 0000000..18d25e5
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/TD.png differ
diff --git a/knockoutwhistweb/public/images/cards/TH.png b/knockoutwhistweb/public/images/cards/TH.png
new file mode 100644
index 0000000..3fafa4a
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/TH.png differ
diff --git a/knockoutwhistweb/public/images/cards/TS.png b/knockoutwhistweb/public/images/cards/TS.png
new file mode 100644
index 0000000..4246ba6
Binary files /dev/null and b/knockoutwhistweb/public/images/cards/TS.png differ