diff --git a/.gitignore b/.gitignore
index db0ff2e..cefaee9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -104,3 +104,7 @@ typings/
 
 # NightwatchJS tests output
 tests_output/
+
+# build output
+dist/
+.DS_Store
diff --git a/src/panel/css/panel.css b/src/panel/css/panel.css
index 34559be..83986a1 100644
--- a/src/panel/css/panel.css
+++ b/src/panel/css/panel.css
@@ -11,8 +11,9 @@ body {
     margin: 0px;
 }
 
-.explore-container {
-    align-items: center;
+#socket-status {
+    display: flex;
+    flex-direction: row;
 }
 
 header {
@@ -33,6 +34,12 @@ header {
     padding-right: 10px;
 }
 
+.explore-container {
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+}
+
 .container1 {
     display: flex;
     flex-direction: row;
@@ -215,4 +222,20 @@ footer .heading2 {
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
-}
\ No newline at end of file
+}
+
+#socket-status .socket {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    border-radius: 81px;
+    border: 1px solid hsl(23,35%,55%);
+    background: hsla(0,55%,94%,0.5);
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+#socket-disconnected {
+    display: none;
+}
diff --git a/src/panel/icons/check.svg b/src/panel/icons/check.svg
new file mode 100644
index 0000000..e9b880a
--- /dev/null
+++ b/src/panel/icons/check.svg
@@ -0,0 +1,11 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_2)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C16.7689 0 19.4757 0.821086 21.778 2.35943C24.0803 3.89777 25.8747 6.08427 26.9343 8.64243C27.9939 11.2006 28.2712 14.0155 27.731 16.7313C27.1908 19.447 25.8574 21.9416 23.8995 23.8995C21.9416 25.8574 19.447 27.1908 16.7313 27.731C14.0155 28.2712 11.2006 27.9939 8.64243 26.9343C6.08427 25.8747 3.89777 24.0803 2.35943 21.778C0.821086 19.4757 0 16.7689 0 14C0 10.287 1.475 6.72601 4.10051 4.10051C6.72601 1.475 10.287 0 14 0Z" fill="#00A912"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.65462 11.7762L12.1361 14.1277L18.0013 8.17363C18.4867 7.68145 18.792 7.28496 19.3913 7.90248L21.335 9.89401C21.973 10.5252 21.9411 10.8966 21.335 11.4891L13.248 19.4461C11.9766 20.6902 12.1976 20.7654 10.9102 19.4894L6.38021 14.9868C6.11133 14.6951 6.14095 14.4012 6.4349 14.1118L8.69076 11.7716C9.03255 11.4116 9.30599 11.4435 9.65235 11.7716L9.65462 11.7762Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1_2">
+<rect width="28" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/panel/icons/not-check.svg b/src/panel/icons/not-check.svg
new file mode 100644
index 0000000..0fc5cff
--- /dev/null
+++ b/src/panel/icons/not-check.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C16.7689 0 19.4757 0.821086 21.778 2.35943C24.0803 3.89776 25.8747 6.08426 26.9343 8.64243C27.9939 11.2006 28.2712 14.0155 27.731 16.7313C27.1908 19.447 25.8574 21.9416 23.8995 23.8995C21.9416 25.8574 19.447 27.1908 16.7313 27.731C14.0155 28.2712 11.2006 27.9939 8.64243 26.9343C6.08426 25.8747 3.89776 24.0803 2.35943 21.778C0.821086 19.4757 0 16.7689 0 14C0 10.287 1.475 6.72601 4.1005 4.1005C6.72601 1.475 10.287 0 14 0ZM16.9941 8.38541C17.3906 7.98209 17.639 7.66081 18.1335 8.15755L19.7285 9.78222C20.2503 10.2972 20.223 10.598 19.7285 11.0788L16.7093 14.0889L19.6146 16.9941C20.0179 17.3906 20.3392 17.639 19.8424 18.1335L18.2178 19.7285C17.7028 20.2503 17.402 20.223 16.9235 19.7285L14 16.7982L11.0811 19.7171C10.6025 20.207 10.3018 20.2344 9.78678 19.7171L8.16211 18.1221C7.66081 17.6322 7.98209 17.3838 8.38997 16.9827L11.2907 14.0889L8.28288 11.0833C7.79297 10.6025 7.76562 10.3018 8.28288 9.78678L9.87793 8.16211C10.3678 7.66081 10.6162 7.98209 11.0172 8.38997L14 11.3796L16.9941 8.38541Z" fill="#F44336"/>
+</svg>
diff --git a/src/panel/index.html b/src/panel/index.html
index 702a10c..9c64578 100644
--- a/src/panel/index.html
+++ b/src/panel/index.html
@@ -17,6 +17,16 @@
               <input type="checkbox" id="exploreMode">
               <div class="heading2">Explore Mode</div>
           </div>
+          <div id="socket-status">
+            <div class="socket" id="socket-connected">
+                <img src="./icons/check.svg"></img>
+                <div class="heading2">Connected</div>
+            </div>
+            <div class="socket" id="socket-disconnected">
+                <img src="./icons/not-check.svg"></img>
+                <div class="heading2">Disconnected</div>
+            </div>
+          </div>
         </div>
 
         <div class="container">
diff --git a/src/panel/js/websocket.js b/src/panel/js/websocket.js
index e7ea1f7..2455783 100644
--- a/src/panel/js/websocket.js
+++ b/src/panel/js/websocket.js
@@ -11,7 +11,8 @@ function connectWebSocket(port) {
     const socket = new WebSocket(`ws://localhost:${port}`);
     socket.onopen = () => {
       resolve(socket);
-      
+      document.getElementById('socket-connected').style.display = 'flex';
+      document.getElementById('socket-disconnected').style.display = 'none';
       // eslint-disable-next-line no-console
       console.log(`Hurray, Connected to Nightwatch Server localhost:${port}`);
       socket.send('commandlist');
@@ -19,6 +20,8 @@ function connectWebSocket(port) {
     };
   
     socket.onclose = () => {
+      document.getElementById('socket-connected').style.display = 'none';
+      document.getElementById('socket-disconnected').style.display = 'flex';
       // eslint-disable-next-line no-console
       console.log(`Disconnected from Nightwatch Server localhost:${port}`);
     };
@@ -46,8 +49,14 @@ function connectWebSocket(port) {
 
     socket.onerror = (err) => {
       console.error(`WebSocket error: ${err}`);
+      document.getElementById('socket-connected').style.display = 'none';
+      document.getElementById('socket-disconnected').style.display = 'flex';
       socket.close();
 
+      if (port > portNumber + 15) {
+        return;
+      }
+
       connectWebSocket(port + 1)
         .then(resolve)
         .catch(reject);
diff --git a/tests/basic.js b/tests/basic.js
index 2bb8779..d560e42 100644
--- a/tests/basic.js
+++ b/tests/basic.js
@@ -46,6 +46,11 @@ describe('Nightwatch Inspector Tests', function() {
     browser.expect.element('#exploreMode').to.not.be.selected;
   });
 
+  it('should display socket connected', function(browser) {
+    browser.expect.element('#socket-disconnected').to.be.visible;
+    browser.expect.element('#socket-connected').to.not.be.visible;
+  });
+
   after(browser => {
     server.close();
     browser.end();