diff --git a/data/index.css b/data/index.css
index bb1197d..1269fa9 100644
--- a/data/index.css
+++ b/data/index.css
@@ -11,8 +11,8 @@ html {
 }
 
 body {
-  font-family: "Arial", sans-serif;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-family: "Segoe UI", Arial, sans-serif;
+  background: linear-gradient(135deg, #49bae4 0%, #223c83 100%);
   height: 100vh;
   width: 100vw;
   display: flex;
@@ -97,7 +97,7 @@ body {
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: #e74c3c;
+  background: #f50f0f;
   transition: all 0.3s ease;
   position: relative;
 }
@@ -115,8 +115,8 @@ body {
 }
 
 .heartbeat-indicator.active {
-  background: #2ecc71;
-  box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
+  background: #00ff15;
+  box-shadow: 0 0 10px rgba(73, 186, 228, 0.5);
 }
 
 /* Batterie-Banner Styling */
@@ -125,7 +125,7 @@ body {
   top: -100px;
   left: 0;
   width: 100%;
-  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+  background: linear-gradient(135deg, #f59d0f 0%, #e67e22 100%);
   color: white;
   padding: 15px 20px;
   text-align: center;
@@ -261,6 +261,9 @@ body {
   font-size: clamp(1.8rem, 4vw, 2.5rem);
   margin-bottom: 0.5vh;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+  font-weight: bold;
+  text-transform: uppercase;
+  font-family: "Segoe UI", Arial, sans-serif;
 }
 
 .header p {
@@ -306,6 +309,9 @@ body {
   font-size: clamp(1.2rem, 2.5vw, 1.8rem);
   margin-bottom: clamp(10px, 1vh, 15px);
   color: #fff;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-family: "Segoe UI", Arial, sans-serif;
 }
 
 .swimmer-name {
@@ -356,25 +362,25 @@ body {
 }
 
 .status.finished {
-  background-color: rgba(52, 152, 219, 0.3);
-  border: 2px solid #3498db;
+  background-color: rgba(73, 186, 228, 0.3);
+  border: 2px solid #49bae4;
 }
 
 .status.ready {
-  background-color: rgba(46, 204, 113, 0.3);
-  border: 2px solid #2ecc71;
+  background-color: rgba(34, 60, 131, 0.3);
+  border: 2px solid #223c83;
   animation: pulse 1s infinite;
 }
 
 .status.armed {
-  background-color: rgb(197, 194, 0);
-  border: 2px solid #fbff00;
+  background-color: rgba(245, 157, 15, 0.3);
+  border: 2px solid #f59d0f;
   animation: pulse 1s infinite;
 }
 
 .status.running {
-  background-color: rgba(231, 76, 60, 0.3);
-  border: 2px solid #e74c3c;
+  background-color: rgba(245, 157, 15, 0.3);
+  border: 2px solid #f59d0f;
 }
 
 @keyframes pulse {
@@ -390,8 +396,8 @@ body {
 }
 
 .status.standby {
-  background-color: rgba(255, 193, 7, 0.3);
-  border: 2px solid #ffc107;
+  background-color: rgba(220, 242, 250, 0.3);
+  border: 2px solid #DCF2FA;
   animation: standbyBlink 2s infinite;
 }
 
@@ -433,6 +439,9 @@ body {
 .best-times h3 {
   font-size: clamp(0.9rem, 1.8vw, 1.1rem);
   margin-bottom: clamp(5px, 0.5vh, 8px);
+  font-weight: bold;
+  text-transform: uppercase;
+  font-family: "Segoe UI", Arial, sans-serif;
 }
 
 .best-time-row {
@@ -447,8 +456,8 @@ body {
 }
 
 .learning-mode {
-  background: rgba(255, 193, 7, 0.2);
-  border: 2px solid #ffc107;
+  background: rgba(245, 157, 15, 0.2);
+  border: 2px solid #f59d0f;
   border-radius: 15px;
   padding: clamp(15px, 2vh, 20px);
   margin: 2vh 0;
@@ -463,9 +472,12 @@ body {
 }
 
 .learning-mode h3 {
-  color: #ffc107;
+  color: #f59d0f;
   margin-bottom: 10px;
   font-size: clamp(1rem, 2vw, 1.3rem);
+  font-weight: bold;
+  text-transform: uppercase;
+  font-family: "Segoe UI", Arial, sans-serif;
 }
 
 .learning-mode p {
diff --git a/data/index.html b/data/index.html
index c3e5607..a480592 100644
--- a/data/index.html
+++ b/data/index.html
@@ -15,7 +15,7 @@
         <div>
           <div class="banner-text">⚠️ Niedrige Batterie erkannt!</div>
           <div class="banner-devices" id="battery-devices">
-            Geräte mit niedriger Batterie: <span id="low-battery-list"></span>
+            Deine Geräte mit niedriger Batterie: <span id="low-battery-list"></span>
           </div>
         </div>
       </div>
@@ -42,13 +42,13 @@
 
     <div class="header">
       <h1>🏊‍♀️ NinjaCross Timer</h1>
-      <p>Professioneller Zeitmesser für Ninjacross Wettkämpfe</p>
+      <p>Dein professioneller Zeitmesser für Ninjacross Wettkämpfe</p>
     </div>
 
     <div id="learning-display" class="learning-mode" style="display: none">
       <h3>📚 Lernmodus aktiv</h3>
       <p>
-        Bitte drücken Sie den Button für: <span id="learning-button"></span>
+        Drücke jetzt den Button für: <span id="learning-button"></span>
       </p>
     </div>
 
@@ -58,7 +58,7 @@
         <h2>🏊‍♀️ Bahn 1</h2>
         <div id="time1" class="time-display">00.00</div>
         <div id="status1" class="status standby">
-          Standby: Bitte beide 1x betätigen
+          Standby: Drücke beide Buttons einmal
         </div>
       </div>
 
@@ -67,13 +67,13 @@
         <h2>🏊‍♂️ Bahn 2</h2>
         <div id="time2" class="time-display">00.00</div>
         <div id="status2" class="status standby">
-          Standby: Bitte beide 1x betätigen
+          Standby: Drücke beide Buttons einmal
         </div>
       </div>
     </div>
 
     <div class="best-times">
-      <h3>🏆 Beste Zeiten des Tages</h3>
+      <h3>🏆 Deine Bestzeiten heute</h3>
       <div class="best-time-row">
         <span>Bahn 1:</span>
         <span id="best1">--.-</span>
@@ -324,13 +324,13 @@
       function getButtonDisplayName(button) {
         switch (button) {
           case "start1":
-            return "Start Bahn 1";
+            return "Start Button Bahn 1";
           case "stop1":
-            return "Stop Bahn 1";
+            return "Stop Button Bahn 1";
           case "start2":
-            return "Start Bahn 2";
+            return "Start Button Bahn 2";
           case "stop2":
-            return "Stop Bahn 2";
+            return "Stop Button Bahn 2";
           default:
             return button;
         }
@@ -365,25 +365,25 @@
 
         if (!lane1Connected) {
           s1.className = "status standby";
-          s1.textContent = "Standby: Bitte beide Buttons 1x betätigen";
+          s1.textContent = "Standby: Drücke beide Buttons einmal";
         } else {
           s1.className = `status ${status1}`;
 
           switch (status1) {
             case "ready":
-              s1.textContent = "Bereit";
+              s1.textContent = "Bereit für den Start!";
               break;
             case "running":
-              s1.textContent = "Läuft...";
+              s1.textContent = "Läuft - Du schaffst das!";
               break;
             case "finished":
-              s1.textContent = "Beendet";
+              s1.textContent = "Geschafft!";
               break;
             case "armed":
-              s1.textContent = "Armiert";
+              s1.textContent = "Bereit zum Start!";
               break;
             default:
-              s1.textContent = "Unbekannter Status";
+              s1.textContent = "Status unbekannt";
           }
         }
 
@@ -391,25 +391,25 @@
 
         if (!lane2Connected) {
           s2.className = "status standby";
-          s2.textContent = "Standby: Bitte beide Buttons 1x betätigen";
+          s2.textContent = "Standby: Drücke beide Buttons einmal";
         } else {
           s2.className = `status ${status2}`;
 
           switch (status2) {
             case "ready":
-              s2.textContent = "Bereit";
+              s2.textContent = "Bereit für den Start!";
               break;
             case "running":
-              s2.textContent = "Läuft...";
+              s2.textContent = "Läuft - Du schaffst das!";
               break;
             case "finished":
-              s2.textContent = "Beendet";
+              s2.textContent = "Geschafft!";
               break;
             case "armed":
-              s2.textContent = "Armiert"; // Neuer Status für armiert
+              s2.textContent = "Bereit zum Start!";
               break;
             default:
-              s2.textContent = "Unbekannter Status";
+              s2.textContent = "Status unbekannt";
           }
         }
 
@@ -463,7 +463,7 @@
             updateDisplay();
           })
           .catch((error) =>
-            console.error("Fehler beim Laden der Daten:", error)
+            console.error("Fehler beim Laden deiner Daten:", error)
           );
       }