diff --git a/src/templates/index b/src/templates/index
index 1d8ba87..ed10ece 100644
--- a/src/templates/index
+++ b/src/templates/index
@@ -45,7 +45,10 @@
         ul {
             list-style-type: none;
             padding: 0;
-            margin-bottom: 10px; 
+            margin-bottom: 10px;
+            background-color: #2d2d2d;
+            border: 1px solid #444;
+            border-radius: 4px;
         }
         li {
             background-color: #2d2d2d;
@@ -145,6 +148,53 @@
         .speed-limit-form button:hover {
             background-color: #45a049;
         }
+        .speed-limit-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            background-color: #2d2d2d;
+            padding: 8px 12px;
+            border-radius: 4px;
+            border: 1px solid #444;
+        }
+        .speed-limit-container .form-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            width: 100%;
+        }
+        .speed-limit-container input[type="number"],
+        .speed-limit-container select,
+        .speed-limit-container button {
+            background-color: #2d2d2d;
+            color: #d4d4d4;
+            border: 1px solid #444;
+            padding: 8px 12px;
+            border-radius: 4px;
+            height: 40px;
+            box-sizing: border-box;
+        }
+        .speed-limit-container button {
+            cursor: pointer;
+            background-color: #4CAF50;
+            color: white;
+        }
+        .speed-limit-container button:hover {
+            background-color: #45a049;
+        }
+        .speed-limit-container .speed-limit {
+            color: #d4d4d4;
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+        }
+        .speed-limit-container .speed-limit span {
+            margin-left: 5px;
+        }
+        .current-speed-limit {
+            color: #d4d4d4;
+            margin-top: 10px;
+        }
     </style>
 </head>
 <body>
@@ -176,7 +226,7 @@
     
     <div class="settings-section">
         <h2>Settings</h2>
-        <form id="speed-limit-form" class="speed-limit-form" onsubmit="updateSpeedLimit(event)">
+        <div class="speed-limit-container">
             <div class="form-group">
                 <label for="speedLimitValue">Global Speed Limit:</label>
                 <input type="number" id="speedLimitValue" name="speedLimitValue" min="0" step="0.01" required>
@@ -187,8 +237,7 @@
                 </select>
                 <button type="button" onclick="updateSpeedLimit(event)">Set Speed Limit</button>
             </div>
-            <p class="speed-limit">Current Speed Limit: <span id="currentSpeedLimit">{{if .GlobalSpeedLimit}}{{.GlobalSpeedLimit}}{{else}}unlimited{{end}}</span></p>
-        </form>
+        </div>
     </div>
 
     <script>
@@ -225,6 +274,17 @@
                 }
             });
         }
+        document.addEventListener('DOMContentLoaded', function() {
+            const currentSpeedLimit = "{{if .GlobalSpeedLimit}}{{.GlobalSpeedLimit}}{{else}}0{{end}}";
+            const speedLimitValueInput = document.getElementById('speedLimitValue');
+            
+            // Extract numeric value and unit
+            const match = currentSpeedLimit.match(/(\d+(\.\d+)?)([A-Za-z]+)/);
+            if (match) {
+                speedLimitValueInput.value = match[1]; // Set the numeric value
+                document.getElementById('speedLimitUnit').value = match[3]; // Set the unit
+            }
+        });
     </script>
 </body>
 </html>
