diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.css b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
index 8df59f72f16..b977a368af1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
@@ -22,6 +22,7 @@
   flex: 1 1 35%;
   overflow-x: hidden;
   overflow-y: auto;
+  border-left: 1px solid var(--color-border);
 }
 
 .ResizeBarWrapper {
@@ -55,6 +56,7 @@
 
   .InspectedElementWrapper {
     flex: 1 1 50%;
+    border-left: none;
   }
 
   .ResizeBar {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
index 1f0927de98a..80b6d450331 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -159,7 +159,11 @@ function Components(_: {}) {
             <div className={styles.InspectedElementWrapper}>
               <NativeStyleContextController>
                 <InspectedElementErrorBoundary>
-                  <InspectedElement />
+                  <InspectedElement
+                    fallbackEmpty={
+                      'No React element selected. Select an element in the tree to inspect.'
+                    }
+                  />
                 </InspectedElementErrorBoundary>
               </NativeStyleContextController>
             </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
index 7b00c0c0b39..f9e60f0f15a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
@@ -3,7 +3,6 @@
   flex-direction: column;
   height: 100%;
   width: 100%;
-  border-left: 1px solid var(--color-border);
   border-top: 1px solid var(--color-border);
 }
 
@@ -69,7 +68,11 @@
   padding: 0.25rem;
   color: var(--color-dimmer);
   font-style: italic;
-  border-left: 1px solid var(--color-border);
+}
+
+.NoInspectionFallback {
+  padding: 0.25rem;
+  font-style: italic;
 }
 
 .StrictModeNonCompliant {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 7ba70678af0..af5c8d4b4b1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -36,6 +36,8 @@ import Tooltip from './reach-ui/tooltip';
 
 export type Props = {
   actionButtons?: React.Node,
+  /** fallback to show when no element is inspected */
+  fallbackEmpty: React.Node,
 };
 
 // TODO Make edits and deletes also use transition API!
@@ -44,6 +46,7 @@ const noSourcePromise = Promise.resolve(null);
 
 export default function InspectedElementWrapper({
   actionButtons,
+  fallbackEmpty,
 }: Props): React.Node {
   const {inspectedElementID} = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
@@ -193,6 +196,7 @@ export default function InspectedElementWrapper({
     return (
       <div className={styles.InspectedElement}>
         <div className={styles.TitleRow} />
+        <div className={styles.NoInspectionFallback}>{fallbackEmpty}</div>
       </div>
     );
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js b/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
index 0d5b523e1ad..a47bffda8d7 100644
--- a/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
+++ b/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
@@ -25,6 +25,7 @@ function InspectedElementPane() {
       <div className={styles.InspectedElementPane}>
         <InspectedElement
           actionButtons={!hideSettings && <SettingsModalContextToggle />}
+          fallbackEmpty={"Selected element wasn't rendered with React."}
         />
         <SettingsModal />
       </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
index 0b1d85b1f48..a7915d0d910 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
@@ -35,6 +35,7 @@
   flex: 0 0 calc(100% - var(--horizontal-resize-tree-percentage));
   overflow-x: hidden;
   overflow-y: auto;
+  border-left: 1px solid var(--color-border);
 }
 
 .ResizeBarWrapper {
@@ -70,6 +71,7 @@
 
   .InspectedElementWrapper {
     flex: 0 0 calc(100% - var(--vertical-resize-tree-percentage));
+    border-left: none;
   }
 
   .TreeWrapper + .ResizeBarWrapper .ResizeBar {
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
index 36351f82bb8..bd5de7d13e4 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
@@ -543,7 +543,11 @@ function SuspenseTab(_: {}) {
           className={styles.InspectedElementWrapper}
           hidden={inspectedElementHidden}>
           <InspectedElementErrorBoundary>
-            <InspectedElement />
+            <InspectedElement
+              fallbackEmpty={
+                'No React element selected. Select a Suspense boundary in the minimap to inspect.'
+              }
+            />
           </InspectedElementErrorBoundary>
         </div>
         <SettingsModal />