diff --git a/src/static/main.css b/src/static/main.css
index 0c56bb7..d321d13 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -1,75 +1,100 @@
 body {
-            font-family: Arial, sans-serif;
-            max-width: 600px;
-            margin: 0 auto;
-            padding: 20px;
-            line-height: 1.6;
-        }
-        h1 {
-            text-align: center;
-        }
-        
-        form {
-            margin-bottom: 20px;
-        }
-        label {
-            display: block;
-            margin-bottom: 5px;
-        }
-        input[type="text"], input[type="submit"], input[type="range"], input[type="color"] {
-            width: 100%;
-            
-            margin-bottom: 10px;
-            box-sizing: border-box;
-        }
-        input[type="range"] {
-            -webkit-appearance: none;
-            appearance: none;
-            height: 25px;
-            background: #d3d3d3;
-            outline: none;
-            opacity: 0.7;
-            transition: opacity .2s;
-        }
-        input[type="range"]:hover {
-            opacity: 1;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 25px;
-            height: 25px;
-            background: #4CAF50;
-            cursor: pointer;
-            border-radius: 50%;
-        }
-        input[type="range"]::-moz-range-thumb {
-            width: 25px;
-            height: 25px;
-            background: #4CAF50;
-            cursor: pointer;
-            border-radius: 50%;
-        }
-        #pattern_buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-        #pattern_buttons button {
-            flex: 1 0 calc(33.333% - 10px);
-            padding: 10px;
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s;
-        }
-        #pattern_buttons button:hover {
-            background-color: #45a049;
-        }
-        @media (max-width: 480px) {
-            #pattern_buttons button {
-                flex: 1 0 calc(50% - 10px);
-            }
-        }
\ No newline at end of file
+    font-family: Arial, sans-serif;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    line-height: 1.6;
+}
+h1 {
+    text-align: center;
+}
+
+form {
+    margin-bottom: 20px;
+}
+label {
+    display: block;
+    margin-bottom: 5px;
+}
+input[type="text"],
+input[type="submit"],
+input[type="range"],
+input[type="color"] {
+    width: 100%;
+
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 25px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+input[type="range"]:hover {
+    opacity: 1;
+}
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    background: #4caf50;
+    cursor: pointer;
+    border-radius: 50%;
+}
+input[type="range"]::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    background: #4caf50;
+    cursor: pointer;
+    border-radius: 50%;
+}
+#pattern_buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+#pattern_buttons button {
+    flex: 1 0 calc(33.333% - 10px);
+    padding: 10px;
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+#pattern_buttons button:hover {
+    background-color: #45a049;
+}
+@media (max-width: 480px) {
+    #pattern_buttons button {
+        flex: 1 0 calc(50% - 10px);
+    }
+}
+#connection-status {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    display: inline-block; /* Or block, depending on where you put it */
+    margin-left: 10px; /* Adjust spacing as needed */
+    vertical-align: middle; /* Align with nearby text */
+    background-color: grey; /* Default: Unknown */
+}
+
+#connection-status.connecting {
+    background-color: yellow;
+}
+
+#connection-status.open {
+    background-color: green;
+}
+
+#connection-status.closing,
+#connection-status.closed {
+    background-color: red;
+}