diff --git a/app/templates/index.html b/app/templates/index.html
index 5abd2b0..c9c32d6 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -2,10 +2,12 @@
 <html>
 <head>
   <title>Powerbar Control</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>
     /* Add your custom CSS styles here */
     body {
-      font-family: Arial, sans-serif;
+      font-family: 'Roboto', sans-serif;
       margin: 0;
       padding: 0;
     }
@@ -41,6 +43,8 @@
 
     .outlet {
       margin-bottom: 10px;
+      border-bottom: 1px solid #ccc; /* Add separator */
+      padding-bottom: 10px; /* Add separator */
     }
 
     .outlet h3 {
@@ -59,13 +63,64 @@
 
     .outlet-buttons button {
       margin-right: 5px;
+      padding: 5px 10px;
+      border-radius: 3px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+
+    .outlet-buttons button.on {
+      background-color: #4CAF50;
+      color: white;
+    }
+
+    .outlet-buttons button.off {
+      background-color: #f44336;
+      color: white;
+    }
+
+    .search-container {
+      margin-top: 20px;
+      text-align: center;
+    }
+
+    .search-container input {
+      padding: 5px;
+      width: 200px;
+      border-radius: 3px;
+      font-size: 14px;
+    }
+
+    .filter-container {
+      margin-top: 10px;
+      text-align: center;
+    }
+
+    .filter-container select {
+      padding: 5px;
+      border-radius: 3px;
+      font-size: 14px;
     }
   </style>
 </head>
 <body>
   <h1>Powerbar Control</h1>
+  <div class="search-container">
+    <div class="container">
+      <input type="text" id="searchInput" placeholder="Search outlet...">
+    </div>
+  </div>
+  <div class="filter-container">
+    <select id="stateFilter">
+      <option value="">All</option>
+      <option value="on">On</option>
+      <option value="off">Off</option>
+    </select>
+  </div>
   <div id="powerbars"></div>
 
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <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')
@@ -87,16 +142,17 @@
 
         // Create powerbar container
         const powerbarContainer = document.createElement('div');
-        powerbarContainer.classList.add('powerbar');
+        powerbarContainer.classList.add('powerbar', 'card');
 
         // Create powerbar title
         const powerbarTitle = document.createElement('h2');
+        powerbarTitle.classList.add('card-title');
         powerbarTitle.textContent = powerbar.name;
         powerbarContainer.appendChild(powerbarTitle);
 
         // Create outlets container
         const outletsContainer = document.createElement('div');
-        outletsContainer.classList.add('outlets');
+        outletsContainer.classList.add('outlets', 'card-content');
 
         // Loop through each outlet
         for (const outletKey in powerbar.outlets) {
@@ -108,11 +164,13 @@
 
           // Create outlet name
           const outletName = document.createElement('h3');
+          outletName.classList.add('outlet-name');
           outletName.textContent = outlet.name;
           outletContainer.appendChild(outletName);
 
           // Create outlet state
           const outletState = document.createElement('p');
+          outletState.classList.add('outlet-state');
           outletState.textContent = `State: ${outlet.state}`;
           outletContainer.appendChild(outletState);
 
@@ -123,6 +181,7 @@
           // Create on button
           const onButton = document.createElement('button');
           onButton.textContent = 'On';
+          onButton.classList.add('btn', 'btn-small', 'waves-effect', 'waves-light', 'on');
           onButton.addEventListener('click', () => {
             fetch(outlet.on_url, { method: 'GET' })
               .then(response => response.json())
@@ -139,6 +198,7 @@
           // Create off button
           const offButton = document.createElement('button');
           offButton.textContent = 'Off';
+          offButton.classList.add('btn', 'btn-small', 'waves-effect', 'waves-light', 'off');
           offButton.addEventListener('click', () => {
             fetch(outlet.off_url, { method: 'GET' })
               .then(response => response.json())
@@ -166,6 +226,42 @@
         powerbarsContainer.appendChild(powerbarContainer);
       }
     }
+
+    // Search outlet
+    const searchInput = document.getElementById('searchInput');
+    searchInput.addEventListener('input', () => {
+      const searchValue = searchInput.value.toLowerCase();
+      const outlets = document.getElementsByClassName('outlet');
+
+      for (let i = 0; i < outlets.length; i++) {
+        const outlet = outlets[i];
+        const outletName = outlet.getElementsByClassName('outlet-name')[0].textContent.toLowerCase();
+
+        if (outletName.includes(searchValue)) {
+          outlet.style.display = 'block';
+        } else {
+          outlet.style.display = 'none';
+        }
+      }
+    });
+
+    // Filter outlets by state
+    const stateFilter = document.getElementById('stateFilter');
+    stateFilter.addEventListener('change', () => {
+      const filterValue = stateFilter.value;
+      const outlets = document.getElementsByClassName('outlet');
+
+      for (let i = 0; i < outlets.length; i++) {
+        const outlet = outlets[i];
+        const outletState = outlet.getElementsByClassName('outlet-state')[0].textContent.toLowerCase();
+
+        if (filterValue === '' || outletState.includes(filterValue)) {
+          outlet.style.display = 'block';
+        } else {
+          outlet.style.display = 'none';
+        }
+      }
+    });
   </script>
 </body>
 </html>
