diff --git a/src/index.html b/src/index.html
index bd9f62c..8246dca 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,9 +10,9 @@
 <body class="theme-twitch">
     <div class="update-banner" id="updateBanner">
         <span id="updateText">Neue Version verfügbar!</span>
-        <div id="updateProgress" style="display: none; flex: 1; margin: 0 15px;">
-            <div style="background: rgba(0,0,0,0.3); border-radius: 4px; height: 8px; overflow: hidden;">
-                <div id="updateProgressBar" style="background: white; height: 100%; width: 0%; transition: width 0.3s;"></div>
+        <div id="updateProgress" class="update-banner-progress-wrap" style="display: none;">
+            <div class="update-banner-progress-track">
+                <div id="updateProgressBar" class="update-banner-progress-bar"></div>
             </div>
         </div>
         <button id="updateButton" onclick="downloadUpdate()">Jetzt herunterladen</button>
diff --git a/src/styles.css b/src/styles.css
index d1deb07..0d4e20c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2037,6 +2037,27 @@ select option {
     cursor: not-allowed;
 }
 
+/* Update-banner download progress — sits between the message and
+   the button, fills as the update download runs. */
+.update-banner-progress-wrap {
+    flex: 1;
+    margin: 0 15px;
+}
+
+.update-banner-progress-track {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    height: 8px;
+    overflow: hidden;
+}
+
+.update-banner-progress-bar {
+    background: #fff;
+    height: 100%;
+    width: 0%;
+    transition: width 0.3s ease-out;
+}
+
 .update-modal {
     max-width: 680px;
     border: 1px solid rgba(255, 255, 255, 0.08);
