diff --git a/run.py b/run.py
index 1d56231..7229243 100755
--- a/run.py
+++ b/run.py
@@ -89,6 +89,9 @@ def start_server_socket():
 
     while True:
         #print("HI")
+
+        # Handeling Server Requests Loop, will run forever
+
         if not from_server_queue.empty():
             client_id, message = from_server_queue.get()
             fprint(f"Message from client {client_id}: {message}")
@@ -124,6 +127,10 @@ def start_server_socket():
                         elif call == "request":
                             fprint("")
 
+
+                    case "ping":
+                        fprint("Pong!!!")
+
                     # Lucas' notes
                     # Add a ping pong :) response/handler
                     # Add a get cable response/handler
diff --git a/websocket_test.html b/websocket_test.html
index 0d2f319..c6489bc 100644
--- a/websocket_test.html
+++ b/websocket_test.html
@@ -3,7 +3,51 @@
 
 <head>
     <title>WebSocket Test</title>
+
+    <style>
+        footer {
+            background-color: #333;
+            color: #fff;
+            text-align: center;
+            padding: 10px 0;
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        .service-box {
+            width: 150px;
+            padding: 10px;
+            border-radius: 5px;
+        }
+
+        .service-up {
+            background-color: green;
+        }
+
+        .service-down {
+            background-color: red;
+        }
+    </style>
+
+
     <script>
+
+        // class Service {
+        //     constructor(name, status) {
+        //         this.name = name
+        //         this.status = status
+        //     }
+        // }
+
+        var updatedTime = new Date();
+        // Initial status of services
+        // var serviceA = new Service("234234", 'down');
+        // var serviceBStatus = 'down';
+        // var serviceCStatus = 'down';
+
         document.addEventListener("DOMContentLoaded", function () {
             // Create WebSocket connection.
             const socket = new WebSocket('ws://localhost:9000');
@@ -11,6 +55,7 @@
             // Connection opened
             socket.addEventListener('open', function (event) {
                 console.log("Connected to WebSocket server");
+                updatedTime = new Date();
             });
 
             // Listen for messages
@@ -20,6 +65,7 @@
                 let message = document.createElement('li');
                 message.textContent = "Received: " + event.data;
                 messages.appendChild(message);
+                updatedTime = new Date();
             });
 
             // Send a message to the server
@@ -29,6 +75,19 @@
                 console.log('Message sent', message);
             }
 
+            // This function just sends a ping to make sure the server is there and it is able to responds
+            function ping() {
+                let message = `{ "call": "send", "type": "log", "data": "This is a ping!!" }`;
+                socket.send(message);
+                console.log('Message sent', message);
+            }
+            setInterval(ping, 1500);
+
+            // setInterval(() => {
+            //     updateServiceStatus('serviceA', 'down');
+            // }, 2000);
+
+
             // Bind send message function to button click
             document.getElementById('sendMessage').addEventListener('click', sendMessage);
         });
@@ -41,8 +100,57 @@
     <button id="sendMessage">Send Message</button>
     <p>Example JSON</p>
     <p>{ "type": "cable_map", "call": "request", "data": { } }</p>
+    <p>{ "type": "log", "call": "send", "data": "123123" }</p>
+
     <p>Messages/Logs</p>
     <ul id="messages"></ul>
+
+    <footer>
+        <!-- <div id="serviceA" class="service-box"></div>
+        <div id="serviceB" class="service-box"></div>
+        <div id="serviceC" class="service-box"></div> -->
+        <div id="clock"></div>
+
+    </footer>
+
+    <script>
+        // // Function to update service status
+        // function updateServiceStatus(service) {
+        //     // serviceId, status
+        //     var serviceElement = document.getElementById(service.serviceId);
+        //     // updateClock();
+
+        //     if (service.status === 'up') {
+        //         serviceElement.innerHTML = '<h3>' + service.serviceId + '</h3><p>Running</p>';
+        //         serviceElement.classList.remove('service-down');
+        //         serviceElement.classList.add('service-up');
+        //     } else {
+        //         serviceElement.innerHTML = '<h3>' + service.serviceId + '</h3><p>Down</p>';
+        //         serviceElement.classList.remove('service-up');
+        //         serviceElement.classList.add('service-down');
+        //     }
+        // }
+
+
+
+        // // Update service statuses
+        // updateServiceStatus('node.js (for this page)', serviceAStatus);
+        // updateServiceStatus('Python WebSocket', serviceBStatus);
+        // updateServiceStatus('serviceC', serviceCStatus);
+
+        // Function to update clock
+        function updateClock() {
+            var now = new Date();
+            now = now.getTime() - updatedTime.getTime();
+            // console.log(now)
+            document.getElementById('clock').textContent = 'Milliseconds Since Update: ' + now.toString().padStart(6, '0');
+        }
+
+        // Update clock every second
+        setInterval(updateClock, 100);
+
+    </script>
+
 </body>
 
 </html>
\ No newline at end of file
