diff --git a/knockoutwhistweb/app/views/ingame/ingame.scala.html b/knockoutwhistweb/app/views/ingame/ingame.scala.html
index 302d262..28b8550 100644
--- a/knockoutwhistweb/app/views/ingame/ingame.scala.html
+++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html
@@ -1,51 +1,71 @@
+@import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.TrickUtil
+
 @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
 
 @main("Ingame") {
-<div class="container">
-    <div class="row">
-        <div class="col-4 mt-5 text-start">
-            <p class="fs-4">Next Player</p>
-            <p class="fs-4">@gamelobby.getLogic.getPlayerQueue.get.duplicate().nextPlayer()</p>
+    <div class="container py-5">
+
+            <!-- Header Row -->
+        <div class="row mb-4 text-center">
+            <div class="col-md-4 text-start">
+                <h4 class="fw-semibold mb-1">Current Player</h4>
+                <p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
+                @if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
+                    <h4 class="fw-semibold mb-1">Next Player</h4>
+                    @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
+                        <p class="fs-5 text-primary">@nextplayer</p>
+                    }
+                }
+            </div>
+
+                <!-- Middle column without "Cards Played" -->
+            <div class="col-md-4 text-center">
+                    <!-- You can leave this empty or add something else here if needed -->
+            </div>
+
+            <div class="col-md-4 text-end">
+                <h4 class="fw-semibold mb-1">Trumpsuit</h4>
+                <p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
+
+                <h5 class="fw-semibold mt-4 mb-1">First Card</h5>
+                <div class="d-inline-block border rounded shadow-sm p-1 bg-light">
+                @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
+                    @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/>
+                } else {
+                    @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/>
+                }
+                </div>
+            </div>
         </div>
-        <div class="col-4 mt-5 text-center">
-            <p class="fs-3">Cards played</p>
-        </div>
-        <div class="col-4 mt-5 text-end">
-            <p class="fs-4">Trumpsuit:</p>
-            <p class="fs-4">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
-            <p class="fs-4 mt-5">First Card:</p>
-            @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
-                @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="30%"/>
-            } else {
-                @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="30%"/>
-            }
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-6 mt-5">
-            @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
-                <div class="col-auto">
-                    <div class="card" style="max-width: 8rem;">
-                        @util.WebUIUtils.cardtoImage(cardplayed) />
-                        <div class="card-body">
-                            <h5 class="card-title">@player</h5>
-                        </div>
+
+            <!-- Cards Played -->
+        <div class="row justify-content-center g-3 mb-5">
+        @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
+            <div class="col-auto">
+                <div class="card text-center shadow-sm border-0" style="width: 7rem;">
+                    <div class="p-2">
+                        @util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
+                    </div>
+                    <div class="card-body p-2 bg-light">
+                        <small class="fw-semibold text-secondary">@player</small>
                     </div>
                 </div>
-            }
+            </div>
+        }
+        </div>
+
+            <!-- Player Hand at the BOTTOM -->
+        <div class="row justify-content-center g-2 mt-4">
+        @for(i <- player.currentHand().get.cards.indices) {
+            <div class="col-auto">
+                <form action="@(routes.IngameController.playCard(gamelobby.id))" method="post" class="m-0 p-0">
+                    <input type="hidden" name="cardId" value="@i" />
+                    <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none">
+                        @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px"/>
+                    </button>
+                </form>
+            </div>
+        }
         </div>
     </div>
-    <div class="row gx-0">
-                @for(i <- 0 until player.currentHand().get.cards.size) {
-                    <div class="col-auto">
-                        <form action="@(routes.IngameController.playCard(gamelobby.id))" class="d-flex" method="post">
-                            <input type="hidden" name="cardId" value="@i" />
-                            <button type="submit" class="btn bg-transparent p-0 m-0">
-                                @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="40%" />
-                            </button>
-                        </form>
-                    </div>
-                }
-    </div>
-</div>
-}
\ No newline at end of file
+}