diff --git a/uno/css/uno.css b/uno/css/uno.css
index 75c132b..d6e1c33 100644
--- a/uno/css/uno.css
+++ b/uno/css/uno.css
@@ -41,4 +41,28 @@ body
 #first-put
 {
     opacity: 0;
+}
+
+.playerDeck{
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 30%;
+}
+.pictureCard
+{
+    position: absolute;
+    width: 8vw;
+    box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
+    background-color: rgb(0, 0, 0);
+    border: 0.2vw solid black;
+    border-radius: 1.5vw;
+    transition: top 0.5s, width 0.5s, transform 0.5s, left 0.5s, opacity 0.5s;
+}
+
+.pictureCard img{
+    width: 100%;
 }
\ No newline at end of file
diff --git a/uno/img/cards/BLUE/A.png b/uno/img/cards/BLUE/S.png
similarity index 100%
rename from uno/img/cards/BLUE/A.png
rename to uno/img/cards/BLUE/S.png
diff --git a/uno/img/cards/GREEN/A.png b/uno/img/cards/GREEN/S.png
similarity index 100%
rename from uno/img/cards/GREEN/A.png
rename to uno/img/cards/GREEN/S.png
diff --git a/uno/img/cards/RED/A.png b/uno/img/cards/RED/S.png
similarity index 100%
rename from uno/img/cards/RED/A.png
rename to uno/img/cards/RED/S.png
diff --git a/uno/img/cards/YELLOW/A.png b/uno/img/cards/YELLOW/S.png
similarity index 100%
rename from uno/img/cards/YELLOW/A.png
rename to uno/img/cards/YELLOW/S.png
diff --git a/uno/index.html b/uno/index.html
index b6cf432..3ebeb05 100644
--- a/uno/index.html
+++ b/uno/index.html
@@ -34,7 +34,7 @@
 
     </div>
 
-    <div>
+    <div id="playerDeck">
 
 
 
diff --git a/uno/web/Style.js b/uno/web/Style.js
index 7dfc181..8dff528 100644
--- a/uno/web/Style.js
+++ b/uno/web/Style.js
@@ -27,10 +27,11 @@ export default class Style {
         this.firstDraw.on('click', () => {
 
             this.game.currentPlayerInstanz.drawCard(1);
-            this.refreshHtml();
 
             this.drawCardAnim(false, true);
 
+            this.refreshHtml();
+
         });
     }
 
@@ -44,6 +45,7 @@ export default class Style {
             this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
         }
 
+        this.showPlayerDeck(this.game.currentPlayerInstanz, true);
 
         this.refreshDebug();
     }
@@ -58,17 +60,17 @@ export default class Style {
             $('#playerCards').append('<button id="button' + i + '">+</button>  | ');
             $('#button' + i).on('click', () => {
                 this.game.currentPlayerInstanz.putCard(i);
-                this.refreshHtml();
+                setTimeout(() => {
+                    this.refreshHtml();
+                }, 100);
             });
-            if (this.game.currentPlayerInstanz.hand[i].canPut)
-                $('#button' + i).css('background-color', 'green');
+            if (this.game.currentPlayerInstanz.hand[i].canPut) $('#button' + i).css('background-color', 'green');
         }
         $('#playerCards').append("" + this.game.currentPlayerInstanz.hand.length)
         $("#cardOnDeck").html("Karte auf dem Tisch: " + this.game.cardOnDeck.name + " - " + this.game.cardOnDeck.color);
         $("#playerInGame").html("Spieler im Spiel: " + this.game.players.length);
 
-        if (!this.game.currentPlayerInstanz.canPlay)
-            $('#drawCard').css('background-color', 'red');
+        if (!this.game.currentPlayerInstanz.canPlay) $('#drawCard').css('background-color', 'red');
     }
 
     putCardAnim() {
@@ -89,8 +91,68 @@ export default class Style {
 
     }
 
+    showPlayerDeck(player, click) {
+        console.log("anzeigen")
+        $('#playerDeck').html("");
+
+        let currentPlayerHand = player.hand;
+
+        let width = window.innerWidth;
+        let height = window.innerHeight;
+
+        let percent = 0;
+        let top = window.innerHeight * 0.68;
+        let cardAmount = currentPlayerHand.length;
+
+        for (let i = 0; i < cardAmount; i++) {
+            console.log(this.game.currentPlayer);
+            currentPlayerHand.xPos = 0;
+            currentPlayerHand.yPos = 0;
+
+
+            $('#playerDeck').append('<div id="card' + i + '" class="pictureCard">' + '<img src="./img/cards/' + currentPlayerHand[i].color + '/' + currentPlayerHand[i].name + '.png' + '"></div>');
+
+            currentPlayerHand[i].xPos = (width * (((43 + cardAmount / 2 * 5) - percent)) / 100);
+            currentPlayerHand[i].yPos = top;
+
+            console.log(i + ' ' + currentPlayerHand[i].yPos);
+
+            let card = $('#card' + i);
+
+            let put = false;
+
+            if (click) {
+                let yPos = currentPlayerHand[i].yPos;
+                card.on('mouseenter', () => {
+                    if (!put) card.css('top', yPos - 60);
+                })
+                card.on('mouseleave', () => {
+                    if (!put) card.css('top', yPos);
+                })
+                card.on('click', () => {
+                    if (!this.game.players[this.game.currentPlayer].hand[i].canPut) return;
+                    put = true
+                    let lastPlayer = player;
+                    player.putCard(i);
+                    card.css('top', yPos - height * 0.2);
+                    card.css('opacity', 0);
+                    setTimeout(() => {
+                        this.refreshHtml();
+
+                    }, 400);
+                })
+            }
+
+            card.css('left', currentPlayerHand[i].xPos + 'px');
+            card.css('top', top + 'px')
+            $('.pictureCard')
+            percent += 5;
+
+        }
+    }
+
     drawCardAnim(enable, playerDraw) {
-        if(this.drawCardRunning) return;
+        if (this.drawCardRunning) return;
         this.drawCardRunning = true;
 
         if (playerDraw) {
@@ -100,7 +162,7 @@ export default class Style {
             this.firstDraw.css('top', '60vh');
             this.firstDraw.css('opacity', 0);
 
-            setTimeout(()=>{
+            setTimeout(() => {
                 this.firstDraw.css('transition', '');
                 this.firstDraw.css('top', '47vh');
                 this.firstDraw.css('min-width', '20vh');
@@ -148,11 +210,11 @@ export default class Style {
         return this._firstPutAnim;
     }
 
-    get drawCardRunning(){
+    get drawCardRunning() {
         return this._drawCardRunnig;
     }
 
-    set drawCardRunning(bool){
+    set drawCardRunning(bool) {
         this._drawCardRunnig = bool;
     }
 
diff --git a/uno/web/cards/Card.js b/uno/web/cards/Card.js
index 5a936c5..5cb7972 100644
--- a/uno/web/cards/Card.js
+++ b/uno/web/cards/Card.js
@@ -3,7 +3,7 @@
 export default class Card {
 
     //Konstruktor für das Erstellen einer Karte
-    constructor(name, color, gameInstanz, ) {
+    constructor(name, color, gameInstanz) {
 
         this._game = gameInstanz;
         this._onScreen = false; //Die Karte wird bei Erstellung noch nicht auf dem Bildschirm angezeigt
@@ -11,6 +11,9 @@ export default class Card {
         this._name = name; //Name der Karte (z.B. 0,1...,9,+2,+4,CC,R,S)
         this._color = color; //Farbe der Karte (CARD_COLORS)
 
+        this._xpos = 0;
+        this._ypos = 0;
+
     }
 
     //Logik beim Legen einer Karte (wird für alle Karten ausgeführt)
@@ -56,4 +59,20 @@ export default class Card {
         this._canPut = bool;
     }
 
+    set xPos(pos){
+        this._xpos = pos;
+    }
+
+    set yPos(pos){
+        this._ypos = pos;
+    }
+
+    get xPos(){
+        return this._xpos;
+    }
+
+    get yPos(){
+        return this._ypos;
+    }
+
 }
\ No newline at end of file
diff --git a/uno/web/uno.js b/uno/web/uno.js
index 7062b78..88e1c59 100644
--- a/uno/web/uno.js
+++ b/uno/web/uno.js
@@ -11,7 +11,7 @@ let rules = {
 
 $(()=>{
 
-    let game = new Game(2, rules);
+    let game = new Game(4, rules);
     let style = new Style(game);
     game.start();