diff --git a/app/templates/index.html b/app/templates/index.html
index c9c32d6..bc90a15 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Powerbar Control</title>
+  <title>Powerbar.ti</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <style>
@@ -123,18 +123,21 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   <script>
     // Fetch data from the /powerbars endpoint
-    fetch('/powerbars')
-      .then(response => response.json())
-      .then(data => {
-        // Render powerbars
-        renderPowerbars(data);
-      })
-      .catch(error => {
-        console.error('Error:', error);
-      });
+    function fetchPowerbars() {
+      fetch('/powerbars')
+        .then(response => response.json())
+        .then(data => {
+          // Render powerbars
+          renderPowerbars(data);
+        })
+        .catch(error => {
+          console.error('Error:', error);
+        });
+    }
 
     function renderPowerbars(data) {
       const powerbarsContainer = document.getElementById('powerbars');
+      powerbarsContainer.innerHTML = ''; // Clear existing powerbars
 
       // Loop through each powerbar
       for (const powerbarKey in data) {
@@ -262,6 +265,17 @@
         }
       }
     });
+
+    // Refresh powerbars and their states
+    function refreshPowerbars() {
+      fetchPowerbars();
+    }
+
+    // Initial fetch and render
+    fetchPowerbars();
+
+    // Refresh every 5 seconds
+    setInterval(refreshPowerbars, 5000);
   </script>
 </body>
 </html>
