diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx
index dc4b2cf7af..3adca4be98 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx
@@ -88,9 +88,19 @@ const LeftSidebarInspector = ({ darkMode, pinned, setPinned }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sortedComponents, sortedQueries, sortedVariables, sortedConstants, sortedPageVariables, sortedGlobalVariables]);
 
-  const handleNodeExpansion = (path) => {
+  const handleNodeExpansion = (path, data, currentNode) => {
     if (pathToBeInspected && path?.length > 0) {
-      return pathToBeInspected.includes(path[path.length - 1]);
+      const shouldExpand = pathToBeInspected.includes(path[path.length - 1]);
+
+      // Scroll to the component in the inspector
+      if (path?.length === 2 && path?.[0] === 'components' && shouldExpand) {
+        const target = document.getElementById(`inspector-node-${String(currentNode).toLowerCase()}`);
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }
+
+      return shouldExpand;
     } else return false;
   };
 
diff --git a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
index d1ce9518d5..b13e88d767 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
@@ -53,7 +53,7 @@ export const JSONNode = ({ data, ...restProps }) => {
 
   React.useEffect(() => {
     if (typeof shouldExpandNode === 'function') {
-      set(shouldExpandNode(path, data));
+      set(shouldExpandNode(path, data, currentNode));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathToBeInspected]);
@@ -345,6 +345,7 @@ export const JSONNode = ({ data, ...restProps }) => {
             'group-object-container': shouldDisplayIntendedBlock,
             'mx-2': typeofCurrentNode !== 'Object' && typeofCurrentNode !== 'Array',
           })}
+          id={`inspector-node-${String(currentNode).toLowerCase()}`}
           data-cy={`inspector-node-${String(currentNode).toLowerCase()}`}
         >
           {$NODEIcon && <div className="json-tree-icon-container">{$NODEIcon}</div>}