diff --git a/desktop/flipper-ui/src/app-connection-updates.tsx b/desktop/flipper-ui/src/app-connection-updates.tsx
index 36000b07f78..786a30e5fde 100644
--- a/desktop/flipper-ui/src/app-connection-updates.tsx
+++ b/desktop/flipper-ui/src/app-connection-updates.tsx
@@ -8,13 +8,16 @@
  */
 
 import {css} from '@emotion/css';
-import {Button, message, notification, Typography} from 'antd';
+import {Button, message, Modal, notification, Typography} from 'antd';
 import React from 'react';
 import {Layout} from './ui';
+import {Dialog} from 'flipper-plugin';
+import {getFlipperServer} from './flipperServer';
 
 type ConnectionUpdate = {
   key: string;
   type: 'loading' | 'info' | 'success' | 'success-info' | 'error' | 'warning';
+  os: string;
   app: string;
   device: string;
   title: string;
@@ -97,7 +100,7 @@ export const connectionUpdate = (
       duration = 3;
     } else if (update.type === 'loading') {
       // seconds until show how to debug hanging connection
-      duration = 10;
+      duration = 30;
     }
     message.open({
       key: update.key,
@@ -111,29 +114,131 @@ export const connectionUpdate = (
               message.destroy(update.key);
             }
           : undefined,
+      // NOTE: `onClose` is only called when the message is closed by antd because of `duration`
+      // It is not closed when we call `message.destroy(key)`.
+      // Thus we can use it trigger a timeout modal for hanging "attempting to connect" messages
       onClose: () => {
-        // only called if closed by timeout
-        console.log('on close called for ', update.key);
         if (update.type === 'loading') {
-          // TODO show conect timeout modal NEXT DIFF
-          console.log('show a modal with step');
-
-          notification.error({
-            key: update.key,
-            message: 'App failed to connect',
-            description: (
-              <div>
-                <div>To fix try the following</div>
-                <div>uno</div>
-                <div>dos</div>
-                <div>tres</div>
-              </div>
-            ),
-            duration: 0,
-            onClose: () => notification.close(update.key),
-          });
+          Dialog.showModal((hide) => (
+            <DIYConnectivityFixModal
+              onHide={hide}
+              app={update.app}
+              os={update.os}
+            />
+          ));
         }
       },
     });
   }
 };
+
+const styles = {
+  numberedList: {
+    listStyle: 'auto',
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+  } satisfies React.CSSProperties,
+  title: {
+    marginBottom: 8,
+  } satisfies React.CSSProperties,
+};
+
+function DIYConnectivityFixModal({
+  app,
+  os,
+  onHide,
+}: {
+  app: string;
+  os: string;
+  onHide: () => void;
+}) {
+  return (
+    <Modal onCancel={onHide} open footer={null}>
+      <div>
+        <Typography.Title style={styles.title}>
+          Connecting to {app} has timed out.
+        </Typography.Title>
+        <Typography.Paragraph>
+          This is usually can be fixed in a few ways. Try the following in the
+          order presented.
+        </Typography.Paragraph>
+        <Typography.Title level={2} style={styles.title}>
+          Least involved
+        </Typography.Title>
+        <ol style={styles.numberedList}>
+          <li>
+            <Typography.Text>
+              Completly close the app on the device
+            </Typography.Text>
+          </li>
+          <li>
+            <Button
+              type="primary"
+              size="small"
+              onClick={() => {
+                getFlipperServer()
+                  .exec(os === 'iOS' ? 'ios-idb-kill' : 'android-adb-kill')
+                  .then(() => {
+                    notification.info({
+                      message: `Restarted ${os} connections`,
+                    });
+                  })
+                  .catch((e) => {
+                    notification.error({
+                      message: `Failed to restart ${os} connections`,
+                      description: e.message,
+                    });
+                  });
+              }}>
+              Click to restart{' '}
+              {os === 'iOS'
+                ? 'IDB (iOS connections)'
+                : 'ADB (Android connections)'}
+            </Button>
+          </li>
+          <li>
+            <Typography.Text>Launch the app on the device</Typography.Text>
+          </li>
+        </ol>
+        <Typography.Title level={2} style={styles.title}>
+          More involved
+        </Typography.Title>
+        <ol style={styles.numberedList}>
+          <li>
+            <Typography.Text>Restart device</Typography.Text>
+          </li>
+          <li>
+            <Button
+              type="primary"
+              size="small"
+              onClick={() => {
+                getFlipperServer()
+                  .exec('restart')
+                  .then(() => {
+                    notification.info({
+                      message: `Restarted ${os} connections`,
+                    });
+                  })
+                  .catch((e) => {
+                    notification.error({
+                      message: `Failed to restart ${os} connections`,
+                      description: e.message,
+                    });
+                  });
+              }}>
+              Click to restart Flipper
+            </Button>
+          </li>
+        </ol>
+        <Typography.Title level={2} style={styles.title}>
+          Most involved
+        </Typography.Title>
+        <Typography.Paragraph>
+          This can be frequently fixed by restarting your computer.
+        </Typography.Paragraph>
+      </div>
+    </Modal>
+  );
+}
diff --git a/desktop/flipper-ui/src/dispatcher/flipperServer.tsx b/desktop/flipper-ui/src/dispatcher/flipperServer.tsx
index 8118cd6d23a..bc31d325dc5 100644
--- a/desktop/flipper-ui/src/dispatcher/flipperServer.tsx
+++ b/desktop/flipper-ui/src/dispatcher/flipperServer.tsx
@@ -102,6 +102,7 @@ export function connectFlipperServerToStore(
         type: 'loading',
         app: client.appName,
         device: client.deviceName,
+        os: client.os,
         title: 'is attempting to connect...',
       },
       troubleshootConnection,
@@ -113,6 +114,7 @@ export function connectFlipperServerToStore(
       {
         key: buildGenericClientId(client),
         type,
+        os: client.os,
         app: client.appName,
         device: client.deviceName,
         title: 'failed to establish a connection',
@@ -161,6 +163,7 @@ export function connectFlipperServerToStore(
         key: buildGenericClientId(client),
         type: 'info',
         app: client.appName,
+        os: client.os,
         device: client.deviceName,
         title: step,
       },
@@ -182,6 +185,7 @@ export function connectFlipperServerToStore(
         type: 'success',
         app: payload.query.app,
         device: payload.query.device,
+        os: payload.query.os,
         title: 'successfully connected',
       },
       troubleshootConnection,
@@ -198,6 +202,7 @@ export function connectFlipperServerToStore(
           key: buildGenericClientIdFromQuery(existingClient.query),
           type: 'success-info',
           app: existingClient.query.app,
+          os: existingClient.query.os,
           device: existingClient.query.device,
           title: 'disconnected',
         },