diff --git a/desktop/flipper-ui-browser/src/HMRClient.tsx b/desktop/flipper-ui-browser/src/HMRClient.tsx
index f4de7d9b1..ad76b730e 100644
--- a/desktop/flipper-ui-browser/src/HMRClient.tsx
+++ b/desktop/flipper-ui-browser/src/HMRClient.tsx
@@ -270,7 +270,7 @@ function showCompileError() {
   // Symbolicating compile errors is wasted effort
   // because the stack trace is meaningless:
   (error as any).preventSymbolication = true;
-  window.flipperShowError?.(message);
+  window.flipperShowMessage?.(message);
   throw error;
 }
 
diff --git a/desktop/flipper-ui-browser/src/global.tsx b/desktop/flipper-ui-browser/src/global.tsx
index f927c0c4b..21158a317 100644
--- a/desktop/flipper-ui-browser/src/global.tsx
+++ b/desktop/flipper-ui-browser/src/global.tsx
@@ -17,7 +17,8 @@ declare global {
       debug: boolean;
     };
 
-    flipperShowError?(error: string): void;
-    flipperHideError?(): void;
+    flipperShowMessage?(message: string): void;
+    flipperHideMessage?(): void;
+    flipperShowNoConnection?(): void;
   }
 }
diff --git a/desktop/flipper-ui-browser/src/index.tsx b/desktop/flipper-ui-browser/src/index.tsx
index f836700b5..164e1bf39 100644
--- a/desktop/flipper-ui-browser/src/index.tsx
+++ b/desktop/flipper-ui-browser/src/index.tsx
@@ -47,13 +47,13 @@ async function start() {
     (state: FlipperServerState) => {
       switch (state) {
         case FlipperServerState.CONNECTING:
-          window.flipperShowError?.('Connecting to server...');
+          window.flipperShowMessage?.('Connecting to server...');
           break;
         case FlipperServerState.CONNECTED:
-          window?.flipperHideError?.();
+          window?.flipperHideMessage?.();
           break;
         case FlipperServerState.DISCONNECTED:
-          window?.flipperShowError?.('Lost connection to server');
+          window?.flipperShowNoConnection?.();
           break;
       }
     },
@@ -78,17 +78,17 @@ async function start() {
   // This prevent issues where the render host is referred at module initialisation level,
   // but not set yet, which might happen when using normal imports.
   // TODO: remove
-  window.flipperShowError?.('Connected to Flipper Server successfully');
+  window.flipperShowMessage?.('Connected to Flipper Server successfully');
 
   // @ts-ignore
   // eslint-disable-next-line import/no-commonjs
   require('flipper-ui-core').startFlipperDesktop(flipperServer);
-  window.flipperHideError?.();
+  window.flipperHideMessage?.();
 }
 
 start().catch((e) => {
   console.error('Failed to start flipper-ui-browser', e);
-  window.flipperShowError?.('Failed to start flipper-ui-browser: ' + e);
+  window.flipperShowMessage?.('Failed to start flipper-ui-browser: ' + e);
 });
 
 async function initializePWA() {
diff --git a/desktop/flipper-ui-browser/src/initializeRenderHost.tsx b/desktop/flipper-ui-browser/src/initializeRenderHost.tsx
index 4decaff5f..3e82cc1ce 100644
--- a/desktop/flipper-ui-browser/src/initializeRenderHost.tsx
+++ b/desktop/flipper-ui-browser/src/initializeRenderHost.tsx
@@ -169,7 +169,7 @@ export function initializeRenderHost(
       );
     },
     restartFlipper() {
-      window.flipperShowError?.(
+      window.flipperShowMessage?.(
         'Flipper settings have changed, please restart flipper server for the changes to take effect',
       );
     },
diff --git a/desktop/static/index.web.dev.html b/desktop/static/index.web.dev.html
index 8d27031d5..b90fee0e4 100644
--- a/desktop/static/index.web.dev.html
+++ b/desktop/static/index.web.dev.html
@@ -21,7 +21,7 @@
     }
   </script>
   <style>
-    #loading {
+    .message {
       -webkit-app-region: drag;
       z-index: 999999;
       position: absolute;
@@ -39,12 +39,92 @@
       text-align: center;
     }
 
+    .console {
+      font-family: 'Fira Mono';
+      width: 600px;
+      height: 250px;
+      box-sizing: border-box;
+      margin: auto;
+    }
+
+    .console header {
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+      background-color: #9254de;
+      height: 45px;
+      line-height: 45px;
+      text-align: center;
+      color: white;
+    }
+
+    .console .consolebody {
+      border-bottom-left-radius: 15px;
+      border-bottom-right-radius: 15px;
+      box-sizing: border-box;
+      padding: 0px 10px;
+      height: calc(100% - 40px);
+      overflow: scroll;
+      background-color: #000;
+      color: white;
+      text-align: left;
+    }
+
+    input[type="submit"] {
+      background-color: #9254de;
+      color: white;
+      font-family: system-ui;
+      font-size: 15px;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    input[type="submit"]:hover {
+      background-color: #722ed1;
+    }
+
+    input[type="submit"]:active {
+      background-color: #722ed1;
+    }
+
+    #troubleshoot {
+      display: none;
+      background-color: white;
+    }
+
   </style>
 </head>
 
 <body>
+  <div id="troubleshoot" class="message">
+    <div>
+      <b>Flipper is not running in the background</b>
+
+      <p>It can be started by clicking the button below.</p>
+      <form action="flipper-launcher://start-server">
+        <input type="submit" value="Start" />
+      </form>
+      <br />
+      <p>
+        Flipper will automatically reload once the connection is re-established.
+      </p>
+      <p>If is taking a bit longer than it should, you can manually start Flipper.</p>
+      <p>From the terminal, please run:</p>
+
+      <div class="console">
+        <header>
+          <p>shell</p>
+        </header>
+        <div class="consolebody">
+          <p>> open -a 'Flipper' --args '--server'</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div id="root">
-    <div id="loading">
+    <div id="loading" class="message">
       Connecting...
     </div>
   </div>
@@ -56,6 +136,39 @@
         let suppressErrors = false;
         let connected = false;
 
+        // Listen to changes in the network state, reload when online.
+        // This handles the case when the device is completely offline
+        // i.e. no network connection.
+        window.addEventListener('online', () => {
+          window.location.reload();
+        });
+
+        // Check if the server is responding & reload the page if it is.
+        // This handles the case when the device is online, but the server
+        // is offline or misbehaving.
+        async function checkNetworkAndReload() {
+          try {
+            const response = await fetch('.');
+            if (response.status >= 200 && response.status < 500) {
+              window.location.reload();
+              return;
+            }
+          } catch {
+            // Unable to connect to the server, ignore.
+          }
+          window.setTimeout(checkNetworkAndReload, 2500);
+        }
+
+        function showNoConnection() {
+          const root = document.getElementById('root');
+          root.remove();
+
+          const troubleshoot = document.getElementById('troubleshoot');
+          troubleshoot.style.display = 'flex';
+
+          checkNetworkAndReload();
+        }
+
         const params = new URL(location.href).searchParams;
         let token = params.get('token');
         if (!token) {
@@ -73,7 +186,7 @@
           if (typeof message.event === 'string') {
             switch (message.event) {
               case 'hasErrors': {
-                openError(message.payload);
+                showMessage(message.payload);
                 suppressErrors = true;
                 break;
               }
@@ -90,10 +203,10 @@
 
         socket.addEventListener('error', (e) => {
           if (!connected) {
-            openError('Socket failed to connect. Is the server running? Have you provided a valid authentication token?');
+            showMessage('Socket failed to connect. Is the server running? Have you provided a valid authentication token?');
           }
           else {
-            openError('Socket failed with error.');
+            showMessage('Socket failed with error.');
           }
 
           suppressErrors = true;
@@ -103,7 +216,7 @@
           connected = true;
         })
 
-        function openError(text) {
+        function showMessage(text) {
           if (suppressErrors) {
             return;
           }
@@ -113,7 +226,8 @@
             box.textContent = text;
           }
         }
-        window.flipperShowError = openError;
+        window.flipperShowMessage = showMessage;
+        window.flipperShowNoConnection = showNoConnection;
 
         // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
         try {
@@ -132,7 +246,7 @@
           script.src = window.flipperConfig.entryPoint;
 
           script.onerror = (e) => {
-            openError('Failed to load entry point. Check Chrome console for more info.');
+            showMessage('Failed to load entry point. Check Chrome console for more info.');
           };
 
           document.body.appendChild(script);
diff --git a/desktop/static/index.web.html b/desktop/static/index.web.html
index 3a1e68d9f..5aa5ed20b 100644
--- a/desktop/static/index.web.html
+++ b/desktop/static/index.web.html
@@ -21,7 +21,7 @@
     }
   </script>
   <style>
-    #loading {
+    .message {
       -webkit-app-region: drag;
       z-index: 999999;
       position: absolute;
@@ -39,6 +39,60 @@
       text-align: center;
     }
 
+    .console {
+      font-family: 'Fira Mono';
+      width: 600px;
+      height: 250px;
+      box-sizing: border-box;
+      margin: auto;
+    }
+
+    .console header {
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+      background-color: #9254de;
+      height: 45px;
+      line-height: 45px;
+      text-align: center;
+      color: white;
+    }
+
+    .console .consolebody {
+      border-bottom-left-radius: 15px;
+      border-bottom-right-radius: 15px;
+      box-sizing: border-box;
+      padding: 0px 10px;
+      height: calc(100% - 40px);
+      overflow: scroll;
+      background-color: #000;
+      color: white;
+      text-align: left;
+    }
+
+    input[type="submit"] {
+      background-color: #9254de;
+      color: white;
+      font-family: system-ui;
+      font-size: 15px;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    input[type="submit"]:hover {
+      background-color: #722ed1;
+    }
+
+    input[type="submit"]:active {
+      background-color: #722ed1;
+    }
+
+    #troubleshoot {
+      display: none;
+      background-color: white;
+    }
+
     .__infinity-dev-box-error {
       background-color: red;
       font-family: monospace;
@@ -53,8 +107,34 @@
 </head>
 
 <body>
+  <div id="troubleshoot" class="message">
+    <div>
+      <b>Flipper is not running in the background</b>
+
+      <p>It can be started by clicking the button below.</p>
+      <form action="flipper-launcher://start-server">
+        <input type="submit" value="Start" />
+      </form>
+      <br />
+      <p>
+        Flipper will automatically reload once the connection is re-established.
+      </p>
+      <p>If is taking a bit longer than it should, you can manually start Flipper.</p>
+      <p>From the terminal, please run:</p>
+
+      <div class="console">
+        <header>
+          <p>shell</p>
+        </header>
+        <div class="consolebody">
+          <p>> open -a 'Flipper' --args '--server'</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div id="root">
-    <div id="loading">
+    <div id="loading" class="message">
       Loading...
     </div>
   </div>
@@ -66,7 +146,40 @@
         window.global = window;
         let suppressErrors = false;
 
-        function openError(text) {
+        // Listen to changes in the network state, reload when online.
+        // This handles the case when the device is completely offline
+        // i.e. no network connection.
+        window.addEventListener('online', () => {
+          window.location.reload();
+        });
+
+        // Check if the server is responding & reload the page if it is.
+        // This handles the case when the device is online, but the server
+        // is offline or misbehaving.
+        async function checkNetworkAndReload() {
+          try {
+            const response = await fetch('.');
+            if (response.status >= 200 && response.status < 500) {
+              window.location.reload();
+              return;
+            }
+          } catch {
+            // Unable to connect to the server, ignore.
+          }
+          window.setTimeout(checkNetworkAndReload, 2500);
+        }
+
+        function showNoConnection() {
+          const root = document.getElementById('root');
+          root.remove();
+
+          const troubleshoot = document.getElementById('troubleshoot');
+          troubleshoot.style.display = 'flex';
+
+          checkNetworkAndReload();
+        }
+
+        function showMessage(text) {
           if (suppressErrors) {
             return;
           }
@@ -82,14 +195,15 @@
             box.appendChild(closeButton);
           }
         }
-        window.flipperShowError = openError;
-        window.flipperHideError = () => {
+        window.flipperShowMessage = showMessage;
+        window.flipperShowNoConnection = showNoConnection;
+        window.flipperHideMessage = () => {
           const box = document.querySelector('.__infinity-dev-box-error');
           box.setAttribute('hidden', true);
         }
 
         const closeButton = document.createElement('button');
-        closeButton.addEventListener('click', window.flipperHideError);
+        closeButton.addEventListener('click', window.flipperHideMessage);
         closeButton.textContent = 'X';
 
         // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
@@ -109,7 +223,7 @@
           script.src = window.flipperConfig.entryPoint;
 
           script.onerror = (e) => {
-            openError('Script failure. Check Chrome console for more info.');
+            showMessage('Script failure. Check Chrome console for more info.');
           };
 
           document.body.appendChild(script);
diff --git a/desktop/static/offline.html b/desktop/static/offline.html
index 281d63694..652817580 100644
--- a/desktop/static/offline.html
+++ b/desktop/static/offline.html
@@ -42,17 +42,16 @@
       height: 250px;
       box-sizing: border-box;
       margin: auto;
-
     }
 
     .console header {
       border-top-left-radius: 15px;
       border-top-right-radius: 15px;
-      background-color: #4267B2;
+      background-color: #9254de;
       height: 45px;
       line-height: 45px;
       text-align: center;
-      color: #DDD;
+      color: white;
     }
 
     .console .consolebody {
@@ -67,6 +66,25 @@
       text-align: left;
     }
 
+    input[type="submit"] {
+      background-color: #9254de;
+      color: white;
+      font-family: system-ui;
+      font-size: 15px;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    input[type="submit"]:hover {
+      background-color: #722ed1;
+    }
+
+    input[type="submit"]:active {
+      background-color: #722ed1;
+    }
+
   </style>
 </head>