diff --git a/desktop/flipper-server-client/src/FlipperServerClient.tsx b/desktop/flipper-server-client/src/FlipperServerClient.tsx
index 698245198..29985f65e 100644
--- a/desktop/flipper-server-client/src/FlipperServerClient.tsx
+++ b/desktop/flipper-server-client/src/FlipperServerClient.tsx
@@ -30,11 +30,11 @@ export type {FlipperServer, FlipperServerCommands, FlipperServerExecOptions};
 export function createFlipperServer(
   host: string,
   port: number,
-  tokenProvider: () => Promise<string | null | undefined>,
+  tokenProvider: () => string | null | undefined,
   onStateChange: (state: FlipperServerState) => void,
 ): Promise<FlipperServer> {
-  const URLProvider = async () => {
-    const token = await tokenProvider();
+  const URLProvider = () => {
+    const token = tokenProvider();
     return `ws://${host}:${port}?token=${token}`;
   };
 
diff --git a/desktop/flipper-ui-browser/src/HMRClient.tsx b/desktop/flipper-ui-browser/src/HMRClient.tsx
index ad76b730e..be6888346 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.flipperShowMessage?.(message);
+  window.flipperShowMessage?.({detail: message});
   throw error;
 }
 
diff --git a/desktop/flipper-ui-browser/src/global.tsx b/desktop/flipper-ui-browser/src/global.tsx
index 606a72df0..566fd8657 100644
--- a/desktop/flipper-ui-browser/src/global.tsx
+++ b/desktop/flipper-ui-browser/src/global.tsx
@@ -24,7 +24,7 @@ declare global {
     FLIPPER_UNIXNAME: string;
     FLIPPER_AUTH_TOKEN: string;
 
-    flipperShowMessage?(message: string): void;
+    flipperShowMessage?(message: {title?: string; detail?: string}): void;
     flipperHideMessage?(): void;
   }
 }
diff --git a/desktop/flipper-ui-browser/src/index.tsx b/desktop/flipper-ui-browser/src/index.tsx
index f0d1fc63f..c07298a8f 100644
--- a/desktop/flipper-ui-browser/src/index.tsx
+++ b/desktop/flipper-ui-browser/src/index.tsx
@@ -51,7 +51,7 @@ async function start() {
 
   const params = new URL(location.href).searchParams;
 
-  const tokenProvider = async () => {
+  const tokenProvider = () => {
     const providerParams = new URL(location.href).searchParams;
     let token = providerParams.get('token');
     if (!token) {
@@ -62,6 +62,11 @@ async function start() {
           '[flipper-client][ui-browser] Failed to get token from HTML',
           token,
         );
+        window.flipperShowMessage?.({
+          detail:
+            '[flipper-client][ui-browser] Failed to get token from HTML: ' +
+            token,
+        });
       }
     }
 
@@ -108,7 +113,7 @@ async function start() {
       switch (state) {
         case FlipperServerState.CONNECTING:
           getLogger().info('[flipper-client] Connecting to server');
-          window.flipperShowMessage?.('Connecting to server...');
+          window.flipperShowMessage?.({title: 'Connecting to server...'});
           break;
         case FlipperServerState.CONNECTED:
           getLogger().info(
@@ -118,7 +123,7 @@ async function start() {
           break;
         case FlipperServerState.DISCONNECTED:
           getLogger().info('[flipper-client] Disconnected from server');
-          window.flipperShowMessage?.('Waiting for server...');
+          window.flipperShowMessage?.({title: 'Waiting for server...'});
           break;
       }
     },
@@ -172,7 +177,7 @@ start().catch((e) => {
     error: getStringFromErrorLike(e),
     pwa: window.matchMedia('(display-mode: standalone)').matches,
   });
-  window.flipperShowMessage?.('Failed to start UI with error: ' + e);
+  window.flipperShowMessage?.({detail: 'Failed to start UI with error: ' + e});
 });
 
 async function initializePWA() {
diff --git a/desktop/static/index.web.dev.html b/desktop/static/index.web.dev.html
index 59d1b1c2d..e79cd0932 100644
--- a/desktop/static/index.web.dev.html
+++ b/desktop/static/index.web.dev.html
@@ -32,6 +32,7 @@
       padding: 50px;
       overflow: auto;
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
       font-size: 20px;
@@ -39,6 +40,10 @@
       text-align: center;
     }
 
+    .message p {
+      font-size: 12px;
+    }
+
     .console {
       font-family: 'Fira Mono';
       width: 600px;
@@ -98,6 +103,8 @@
 
 <body>
   <div id="troubleshoot" class="message">
+    <h1 id="tourbleshoot_title"></h1>
+    <p id="tourbleshoot_details"></p>
   </div>
 
   <div id="root">
@@ -121,9 +128,18 @@
 
         const root = document.getElementById('root');
         const troubleshootBox = document.getElementById('troubleshoot');
+        const troubleshootBoxTitle = document.getElementById('tourbleshoot_title');
+        const troubleshootBoxDetails = document.getElementById('tourbleshoot_details');
 
-        function showMessage(text, centered) {
-          troubleshootBox.innerText = text;
+        function showMessage({ title, detail }) {
+          if (title) {
+            troubleshootBoxTitle.innerText = title
+          }
+          if (detail) {
+            const newMessage = document.createElement('p')
+            newMessage.innerText = detail;
+            troubleshootBoxDetails.appendChild(newMessage)
+          }
 
           root.style.display = 'none';
           troubleshootBox.style.display = 'flex';
@@ -132,6 +148,8 @@
         function hideMessage() {
           root.style.display = 'block';
           troubleshootBox.style.display = 'none';
+          troubleshootBoxTitle.innerHTML = ''
+          troubleshootBoxDetails.innerHTML = ''
         }
 
         window.flipperShowMessage = showMessage;
diff --git a/desktop/static/index.web.html b/desktop/static/index.web.html
index dae259b93..ec7fda6e4 100644
--- a/desktop/static/index.web.html
+++ b/desktop/static/index.web.html
@@ -32,12 +32,16 @@
       padding: 50px;
       overflow: auto;
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       color: #525252;
       text-align: center;
     }
+    .message p {
+      font-size: 12px;
+    }
 
     #troubleshoot {
       display: none;
@@ -48,6 +52,8 @@
 
 <body>
   <div id="troubleshoot" class="message">
+    <h1 id="tourbleshoot_title"></h1>
+    <p id="tourbleshoot_details"></p>
   </div>
 
   <div id="root">
@@ -70,9 +76,18 @@
 
         const root = document.getElementById('root');
         const troubleshootBox = document.getElementById('troubleshoot');
+        const troubleshootBoxTitle = document.getElementById('tourbleshoot_title');
+        const troubleshootBoxDetails = document.getElementById('tourbleshoot_details');
 
-        function showMessage(text) {
-          troubleshootBox.innerText = text;
+        function showMessage({ title, detail }) {
+          if (title) {
+            troubleshootBoxTitle.innerText = title
+          }
+          if (detail) {
+            const newMessage = document.createElement('p')
+            newMessage.innerText = detail;
+            troubleshootBoxDetails.appendChild(newMessage)
+          }
 
           root.style.display = 'none';
           troubleshootBox.style.display = 'flex';
@@ -81,6 +96,8 @@
         function hideMessage() {
           root.style.display = 'block';
           troubleshootBox.style.display = 'none';
+          troubleshootBoxTitle.innerHTML = ''
+          troubleshootBoxDetails.innerHTML = ''
         }
 
         window.flipperShowMessage = showMessage;