diff --git a/uno/css/uno.css b/uno/css/uno.css
index e13653d..7494c2a 100644
--- a/uno/css/uno.css
+++ b/uno/css/uno.css
@@ -30,4 +30,9 @@ body
     top: 47vh;
     left: min(90%, (53% + 10vh));
     transform: translate(-50%, -50%);
+}
+
+#first-draw
+{
+    transition: min-width 0.3s, top 0.5s;
 }
\ No newline at end of file
diff --git a/uno/img/stackCards/BLUE/A.png b/uno/img/stackCards/BLUE/S.png
similarity index 100%
rename from uno/img/stackCards/BLUE/A.png
rename to uno/img/stackCards/BLUE/S.png
diff --git a/uno/img/stackCards/GREEN/A.png b/uno/img/stackCards/GREEN/S.png
similarity index 100%
rename from uno/img/stackCards/GREEN/A.png
rename to uno/img/stackCards/GREEN/S.png
diff --git a/uno/img/stackCards/RED/A.png b/uno/img/stackCards/RED/S.png
similarity index 100%
rename from uno/img/stackCards/RED/A.png
rename to uno/img/stackCards/RED/S.png
diff --git a/uno/img/stackCards/YELLOW/A.png b/uno/img/stackCards/YELLOW/S.png
similarity index 100%
rename from uno/img/stackCards/YELLOW/A.png
rename to uno/img/stackCards/YELLOW/S.png
diff --git a/uno/index.html b/uno/index.html
index 30bcc4f..45b7484 100644
--- a/uno/index.html
+++ b/uno/index.html
@@ -23,10 +23,11 @@
 
         <!-- "Karte legen" Stapel -->
         <img class="stack-put" src="./img/stackCards/StackPutCards.png">
+        <img class="stack-put" id="first-put" src="#">
 
         <!-- "Karte ziehen" Stapel -->
         <img class="stack-draw" src="./img/stackCards/StackDrawCards.png">
-        <img class="stack-draw" alt="" id="first-draw" src="./img/stackCards/FirstDrawCard.png">
+        <img class="stack-draw" id="first-draw" src="./img/stackCards/FirstDrawCard.png">
 
     </div>
 
diff --git a/uno/web/Style.js b/uno/web/Style.js
index 1218113..145c5a7 100644
--- a/uno/web/Style.js
+++ b/uno/web/Style.js
@@ -7,6 +7,33 @@ export default class Style{
             this.game.currentPlayerInstanz.drawCard(1);
             this.refreshDebug();
         });
+
+        let firstDraw = $('#first-draw');
+
+        firstDraw.on('mouseenter', ()=>{
+            firstDraw.css('transition', 'min-width 0.3s, top 0.5s');
+            firstDraw.css('min-width', '27vh');
+            firstDraw.css('top', '50vh');
+        });
+        firstDraw.on('mouseleave', ()=>{
+            firstDraw.css('transition', 'min-width 1s, top 0.5s');
+            firstDraw.css('top', '47vh');
+            firstDraw.css('min-width', '20vh');
+        });
+        firstDraw.on('click', ()=>{
+
+            this.game.currentPlayerInstanz.drawCard(1);
+            this.refreshDebug();
+            this.refreshHtml();
+
+            firstDraw.css('transition', 'min-width 1s, top 0.5s');
+            firstDraw.css('top', '47vh');
+            firstDraw.css('min-width', '20vh');
+        });
+    }
+
+    refreshHtml(){
+        $('#first-put').attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
     }
 
     refreshDebug(){
@@ -20,6 +47,7 @@ export default class Style{
             $('#button' + i).on('click', () =>{
                this.game.currentPlayerInstanz.putCard(i);
                this.refreshDebug();
+               this.refreshHtml();
             });
             if (this.game.currentPlayerInstanz.hand[i].canPut)
                 $('#button' + i).css('background-color', 'green');
diff --git a/uno/web/uno.js b/uno/web/uno.js
index ffe9357..7062b78 100644
--- a/uno/web/uno.js
+++ b/uno/web/uno.js
@@ -16,6 +16,7 @@ $(()=>{
     game.start();
 
     style.showDebug();
+    style.refreshHtml();
 
 });