diff --git a/app.js b/app.js
index 5b9e088e5ff036e60fc48a5c9fc2eb66c70669b3..08e90ede23bd0d3fbb697c47afa933f803603fa1 100644
--- a/app.js
+++ b/app.js
@@ -4,6 +4,10 @@ document.addEventListener('DOMContentLoaded', () => {
   //Aus der html werden alle divs in die constante
   const flaechen = document.querySelectorAll('.grid div');
   const ergebnis = document.querySelector('#result');
+  const ergebnis2 = document.querySelector('#result2');
+  const bubbles1 = document.querySelector('.bubbles span');
+  const bubbles2 = document.querySelector('.bubbles span:nth-child(even)');
+
   const displayCurrentPlayer = document.querySelector('#current-player');
   // Variable für den aktuellen Spieler (1 oder 2)
   let currentPlayer = 1;
@@ -155,8 +159,14 @@ function placeChipInColumn(column) {
         square4.classList.contains('player-one')
       )
       {
-        ergebnis.innerHTML = 'Player One Wins!'
+        ergebnis.innerHTML = 'Spieler 1 siegt!'
+        ergebnis2.innerHTML = 'Spieler 1 siegt!'
+        bubbles1.style.background = '#ff0000'
+        bubbles2.style.background = '#ff0000'
+        bubbles1.style.boxShadow = '#ff000044'
+        bubbles2.style.boxShadow = '#ff000044'
       }
+
       if (
         square1.classList.contains('player-two') &&
         square2.classList.contains('player-two') &&
@@ -164,8 +174,14 @@ function placeChipInColumn(column) {
         square4.classList.contains('player-two')
       )
       {
-        ergebnis.innerHTML = 'Player Two Wins!'
+        ergebnis.innerHTML = 'Spieler 2 siegt!'
+        ergebnis2.innerHTML = 'Spieler 2 siegt!'
+        bubbles1.style.background = '#ffff00'
+        bubbles2.style.background = '#ffff00'
+        bubbles1.style.boxShadow = '#ffff0044'
+        bubbles2.style.boxShadow = '#ffff0044'
       }
+
     }
   }
 // Fügt jedem Feld im Grid einen Klick-Event-Listener hinzu
diff --git a/index.html b/index.html
index 786fc62fd1cc7ccc76497a7dc579ff5c240f2ca6..7a930447efd854ac5b99afb9160b4ac1da3528df 100644
--- a/index.html
+++ b/index.html
@@ -8,15 +8,56 @@
   <script type="module" src="app.js" charset="utf-8" defer></script>
 </head>
 <body>
+<div class="backgroundContainer">
+  <div class="bubbles">
+    <span style="--i:11"></span>
+    <span style="--i:12"></span>
+    <span style="--i:24"></span>
+    <span style="--i:10"></span>
+    <span style="--i:14"></span>
+    <span style="--i:23"></span>
+    <span style="--i:18"></span>
+    <span style="--i:16"></span>
+    <span style="--i:19"></span>
+    <span style="--i:20"></span>
+    <span style="--i:22"></span>
+    <span style="--i:25"></span>
+    <span style="--i:18"></span>
+    <span style="--i:21"></span>
+    <span style="--i:15"></span>
+    <span style="--i:13"></span>
+    <span style="--i:26"></span>
+    <span style="--i:17"></span>
+    <span style="--i:13"></span>
+    <span style="--i:28"></span>
+
+    <span style="--i:32"></span>
+    <span style="--i:34"></span>
+    <span style="--i:38"></span>
+    <span style="--i:40"></span>
+    <span style="--i:42"></span>
+    <span style="--i:13"></span>
+    <span style="--i:26"></span>
+    <span style="--i:17"></span>
+    <span style="--i:13"></span>
+    <span style="--i:28"></span>
+
+
+
+
+
+
+
 <!--<div id="main-menu">
   <h1>Connect Four</h1>
   <button id="start-game">Spiel starten</button>
   <button id="settings">Einstellungen</button>
 </div>-->
-  <h1>Der derzeitige Spieler ist: Spieler <span id="current-player">1</span></h1>
+<div id="totalDiv">
   <h3 id="result"></h3>
-  <img id ="img"  alt="4 Gewinnt" src="four.jpg" width="500" height="600">  <div class="grid">
-  <h1 id="title">4 GEWINNT SPIEL</h1>
+  <h3 id="result2"></h3>
+  <h1 id="playerTitle">Spieler <span id="current-player">1</span> ist am Zug</h1>
+  <div class="grid">
     <div></div>
     <div></div>
     <div></div>
@@ -67,10 +108,11 @@
     <div class="taken"></div>
     <div class="taken"></div>
   </div>
+  </div>
 <img id="cursor0" src="file.png" width="15" height="20" alt="Cursor 1" style="position: absolute;"/>
 <img id="cursor1" src="file.png" width="15" height="20" alt="Cursor 2" style="position: absolute;"/>
-
-
+</div>
+</div>
 
 </body>
 </html>
diff --git a/style.css b/style.css
index 9d78949ac2a03132660e887c286167932bae88d2..40a5859ece8b28429b8266417a24e884d5f21b91 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,52 @@
+*{
+
+}
+body{
+  min-height: 100vh;
+  background: #0c192c;
+}
+.backgroundContainer{
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+.bubbles{
+  position: relative;
+  display: flex;
+}
+.bubbles span{
+  position: relative;
+  width: 30px;
+  height: 30px;
+  background: #FF0000;
+  margin: 0 15px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 10px #FF000044,
+  0 0 50px #FF0000,
+  0 0 100px #FF0000;
+  animation: animate 30s linear infinite;
+  animation-duration: calc(200s /var(--i));
+}
+@keyframes animate {
+0%{
+  transform: translateY(100vh) scale(0);
+}
+  100%{
+  transform: translateY(-10vh) scale(1);
+}
+}
+  .bubbles span:nth-child(even){
+     background: #ffff00;
+    box-shadow: 0 0 0 10px #ffff0044,
+  0 0 50px #ffff00,
+  0 0 100px #ffff00;
+  }
 .grid {
+  left:1000px;
   border: 5px solid;
-  height: 480px;
-  width: 560px;
+  height: 720px;
+  width: 840px;
   display: flex;
   flex-wrap: wrap;
   background-color: blue;
@@ -10,9 +55,9 @@
 }
 
 .grid div {
-  height: 70px;
-  width: 70px;
-  margin: 5px;
+  height: 105px;
+  width: 105px;
+  margin: 7.5px;
   background-color: white;
   border-radius: 50%;
   transition: background-color 0.3s ease;
@@ -89,6 +134,51 @@ button:hover {
   }
 }
 
+@keyframes playerSwitch {
+  0% {
+    transform: scale(1);
+    color: #000;
+  }
+  50% {
+    transform: scale(1.5);
+    color: #fff;
+  }
+  100% {
+    transform: scale(1);
+    color: #000;
+  }
+}
+
+#current-player {
+  animation: playerSwitch 0.5s ease-in-out;
+}
+
+#playerTitle{
+  font-family: "Comic Sans MS";
+  font-size: 80px;
+  color: green;
+}
+#totalDiv{
+  position: absolute;
+  left:600px;
+}
+#result{
+  position: absolute;
+  top:360px;
+  right:450px;
+  font-family: "Comic Sans MS";
+  color: green;
+  font-size: 50px;
+  margin-right: 500px;
+}
+#result2{
+  position: absolute;
+  top:350px;
+  left:1000px;
+  font-family: "Comic Sans MS";
+  color: green;
+  font-size: 50px;
 
+}