diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/HiddenOptions.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/HiddenOptions.jsx
index c2055f4b8e..a2a4cebf80 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/HiddenOptions.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/HiddenOptions.jsx
@@ -74,7 +74,7 @@ export const HiddenOptions = (props) => {
       {renderOptions()}
       <OverlayTrigger
         trigger={'click'}
-        placement={'bottom-start'}
+        placement={'bottom-end'}
         rootClose={false}
         show={showMenu}
         overlay={
@@ -114,12 +114,13 @@ export const HiddenOptions = (props) => {
             setShowMenu((prev) => !prev);
             setActionClicked((prev) => !prev);
           }}
-          className="copy-menu-options-icon"
+          className="node-action-icon"
           style={{
             outline: 'none',
+            ...(showMenu && { backgroundColor: 'var(--button-outline-pressed, rgba(136, 144, 153, 0.18)' }),
           }}
         >
-          <SolidIcon width="12" height="12" name="copy" />
+          <SolidIcon fill="#6A727C" width="12" height="12" name="copy" />
         </div>
       </OverlayTrigger>
     </div>
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/JSONTreeViewerV2.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/JSONTreeViewerV2.jsx
index 43d29ed12c..a47d9fa060 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/JSONTreeViewerV2.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/JSONTreeViewerV2.jsx
@@ -7,6 +7,7 @@ import JSONViewer from './JSONViewer';
 import { SearchBox } from '@/_components';
 import { Node } from './Node';
 import { v4 as uuidv4 } from 'uuid';
+import InputComponent from '@/components/ui/Input/Index';
 import { isEmpty } from 'lodash';
 
 const JSONTreeViewerV2 = ({ data = {}, iconsList = [], darkMode, searchablePaths = new Set() }) => {
@@ -128,8 +129,8 @@ const JSONTreeViewerV2 = ({ data = {}, iconsList = [], darkMode, searchablePaths
     <>
       {!selectedNodePath || (typeof selectedData == 'object' && isEmpty(selectedData)) ? (
         <div>
-          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '12px' }}>
-            <SearchBox
+          <div style={{ margin: '8px 16px 12px 16px' }}>
+            {/* <SearchBox
               dataCy={`inspector-search`}
               initialValue={searchValue}
               callBack={(e) => setSearchValue(e.target.value)}
@@ -138,6 +139,16 @@ const JSONTreeViewerV2 = ({ data = {}, iconsList = [], darkMode, searchablePaths
               customClass={`tj-inspector-search-input  tj-text-xsm`}
               showClearButton={false}
               width={300}
+            /> */}
+
+            <InputComponent
+              leadingIcon="search01"
+              onChange={(e) => setSearchValue(e.target.value)}
+              onClear={() => setSearchValue('')}
+              size="medium"
+              placeholder="Search"
+              value={searchValue}
+              {...(searchValue && { trailingAction: 'clear' })}
             />
           </div>
           <div className="json-tree-view">
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx
index 1b01f48daf..86dffbf180 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx
@@ -19,20 +19,21 @@ const renderNodeIcons = (node, iconsList, darkMode) => {
       <WidgetIcon
         name={extractComponentName(icon?.iconPath)}
         fill={darkMode ? '#3A3F42' : '#D7DBDF'}
-        width="16"
-        height="16"
+        width="14"
+        height="14"
       />
     );
   }
+
   if (icon && icon.jsx) {
     if (icon?.tooltipMessage) {
       return (
         <ToolTip message={icon?.tooltipMessage}>
-          <div>{icon.jsx()}</div>
+          <div>{icon.jsx({ height: 14, width: 14 })}</div>
         </ToolTip>
       );
     }
-    return icon.jsx();
+    return icon.jsx({ height: 14, width: 14 });
   }
 };
 
@@ -91,30 +92,31 @@ export const Node = (props) => {
     // <div {...getNodeProps({ onClick: handleExpand })}>
     <div
       style={{
-        marginLeft: level > 1 ? 12 : 0,
+        // marginLeft: level > 1 ? 12 : 0,
         // paddingLeft: '16px',
         opacity: isDisabled ? 0.5 : 1,
-        height: level === 1 ? '28px' : '32px',
+        height: '20px',
         display: 'flex',
         alignItems: 'center',
         color: level === 1 ? 'var(--text-placeholder, #6A727C)' : 'var(--text-default, #1B1F24)',
+        fontWeight: level === 1 ? 500 : 400,
         // borderLeft: level > 1 ? '1px solid var(--slate6, #D7DBDF)' : 'none',
       }}
     >
-      {!['queries', 'globals', 'variables'].includes(type) && (
-        <div className="node-expansion-icon">
-          {(isBranch || level === 1 || path === 'page.variables') && (
-            <ButtonComponent
-              iconOnly
-              leadingIcon={isExpanded ? 'TriangleDownCenter' : 'rightarrrow'}
-              onClick={() => onExpand(props)}
-              variant="ghost"
-              fill="var(--icon-default,#ACB2B9)"
-              size="small"
-            />
-          )}
-        </div>
-      )}
+      {/* {!['queries', 'globals', 'variables'].includes(type) && ( */}
+      <div className="node-expansion-icon">
+        {(isBranch || level === 1 || path === 'page.variables') && (
+          <ButtonComponent
+            iconOnly
+            leadingIcon={isExpanded ? 'TriangleDownCenter' : 'rightarrrow'}
+            onClick={() => onExpand(props)}
+            variant="ghost"
+            fill="var(--icon-default,#ACB2B9)"
+            size="small"
+          />
+        )}
+      </div>
+      {/* )} */}
 
       <div
         onClick={() => onSelect(props)}
@@ -134,7 +136,7 @@ export const Node = (props) => {
             />
           </OverflowTooltip>
         </div>
-        <div className="node-actions">
+        <div className="node-actions" style={{ marginRight: 12 + nodeSpecificFilteredActions.length * 12 }}>
           <HiddenOptions
             nodeSpecificFilteredActions={nodeSpecificFilteredActions}
             generalActionsFiltered={generalActionsFiltered}
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/TreeViewHeader.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/TreeViewHeader.jsx
index c701a0fc48..6d6951279e 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/TreeViewHeader.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/TreeViewHeader.jsx
@@ -98,24 +98,23 @@ export const TreeViewHeader = (props) => {
 
   return (
     <div className="json-viewer-header">
-      <div className="json-viewer-back-btn" onClick={backFn}>
+      {/* <div className="json-viewer-back-btn" onClick={backFn}>
         <ArrowLeft tailOpacity="1" fill={'var(--slate12)'} width={'18'} />
+      </div> */}
+      <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={backFn}>
+        <span style={{ color: 'var(--slate11)' }}>{parentNode.charAt(0).toUpperCase() + parentNode.slice(1)}</span>
+
+        {pathArray.length > 1 &&
+          pathArray.slice(1).map((item, index) => (
+            <>
+              <CheveronRight fill={'var(--slate12)'} width={'18'} />
+              <span key={index} style={{ color: 'var(--slate12)' }}>
+                {item.charAt(0).toUpperCase() + item.slice(1)}
+              </span>
+            </>
+          ))}
       </div>
 
-      <span style={{ color: 'var(--slate11)', marginLeft: '8px' }}>
-        {parentNode.charAt(0).toUpperCase() + parentNode.slice(1)}
-      </span>
-
-      {pathArray.length > 1 &&
-        pathArray.slice(1).map((item, index) => (
-          <>
-            <CheveronRight fill={'var(--slate12)'} width={'18'} />
-            <span key={index} style={{ color: 'var(--slate12)' }}>
-              {item.charAt(0).toUpperCase() + item.slice(1)}
-            </span>
-          </>
-        ))}
-
       <OverlayTrigger
         trigger={'click'}
         placement={'bottom-start'}
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useIconList.js b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useIconList.js
index e93c18d959..90c85eb469 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useIconList.js
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useIconList.js
@@ -10,7 +10,10 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
   const queryIcons = Object.keys(exposedQueries).map((queryId) => {
     const query = dataQueries.find((dataQuery) => dataQuery.id === queryId);
     if (!isEmpty(query)) {
-      return { iconName: query?.name, jsx: () => <DataSourceIcon source={query} height={16} /> };
+      return {
+        iconName: query?.name,
+        jsx: ({ height = 16, width = 16 }) => <DataSourceIcon source={query} height={height} width={width} />,
+      };
     }
   });
 
@@ -37,7 +40,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
         if (componentExposedVariables.disable) {
           icons.push({
             iconName: 'disable',
-            jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
+            jsx: ({ height = 16, width = 16 }) => (
+              <Icon name={'warning'} height={height} width={width} fill="#DB4324" />
+            ),
             className: 'component-icon',
             tooltipMessage: 'This function will be deprecated soon, You can use setDisable as an alternative',
             isInfoIcon: true,
@@ -47,7 +52,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
         if (componentExposedVariables.visibility) {
           icons.push({
             iconName: 'visibility',
-            jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
+            jsx: ({ height = 16, width = 16 }) => (
+              <Icon name={'warning'} height={height} width={width} fill="#DB4324" />
+            ),
             className: 'component-icon',
             tooltipMessage: 'This function will be deprecated soon, You can use setVisibility as an alternative',
             isInfoIcon: true,
@@ -62,7 +69,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
         if (componentExposedVariables.setChecked) {
           icons.push({
             iconName: 'setChecked',
-            jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
+            jsx: ({ height = 16, width = 16 }) => (
+              <Icon name={'warning'} height={height} width={width} fill="#DB4324" />
+            ),
             className: 'component-icon',
             tooltipMessage: 'This function will be deprecated soon, You can use setValue as an alternative',
             isInfoIcon: true,
@@ -78,7 +87,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
         if (componentExposedVariables.disable) {
           icons.push({
             iconName: 'disable',
-            jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
+            jsx: ({ height = 16, width = 16 }) => (
+              <Icon name={'warning'} height={height} width={width} fill="#DB4324" />
+            ),
             className: 'component-icon',
             tooltipMessage: 'This function will be deprecated soon, You can use setDisable as an alternative',
             isInfoIcon: true,
@@ -88,7 +99,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
         if (componentExposedVariables.visibility) {
           icons.push({
             iconName: 'visibility',
-            jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
+            jsx: ({ height = 16, width = 16 }) => (
+              <Icon name={'warning'} height={height} width={width} fill="#DB4324" />
+            ),
             className: 'component-icon',
             tooltipMessage: 'This function will be deprecated soon, You can use setVisibility as an alternative',
             isInfoIcon: true,
@@ -98,7 +111,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
         if (componentExposedVariables.loading) {
           icons.push({
             iconName: 'loading',
-            jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
+            jsx: ({ height = 16, width = 16 }) => (
+              <Icon name={'warning'} height={height} width={width} fill="#DB4324" />
+            ),
             className: 'component-icon',
             tooltipMessage: 'This function will be deprecated soon, You can use setLoading as an alternative',
             isInfoIcon: true,
@@ -112,7 +127,9 @@ const useIconList = ({ exposedComponentsVariables, componentIdNameMapping, expos
         return [
           {
             iconName: 'visibility',
-            jsx: () => <Icon name={'warning'} height={16} width={16} fill="#DB4324" />,
+            jsx: ({ height = 16, width = 16 }) => (
+              <Icon name={'warning'} height={height} width={width} fill="#DB4324" />
+            ),
             className: 'component-icon',
             tooltipMessage: 'This function will be deprecated soon, You can use setVisibility as an alternative',
             isInfoIcon: true,
diff --git a/frontend/src/_styles/components.scss b/frontend/src/_styles/components.scss
index 9fbe2f33f4..27736f0a6e 100644
--- a/frontend/src/_styles/components.scss
+++ b/frontend/src/_styles/components.scss
@@ -95,10 +95,7 @@ $btn-dark-color: #FFFFFF;
 }
 
 .leftsidebar-panel-header {
-  // background-color: var(--slate3);
-  padding: 12px 16px 8px 16px;
-  min-height: 52px;
-  // border-bottom: 1px solid var(--slate5);
+  padding: 12px 16px 0px 16px;
 
 
   .panel-header-container {
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 993dd6bdf3..03d5f363a9 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -18878,13 +18878,24 @@ section.ai-message-prompt-input-wrapper {
 }
 
 .json-tree-view {
-  ul {
-    margin-left:16px !important;
-    border-left: 1px solid var(--slate6, #D7DBDF);
-  }
+  // ul {
+  //   margin-left:16px !important;
+  //   border-left: 1px solid var(--slate6, #D7DBDF);
+  // }
 
   ul[role="tree"] {
+    margin-left:16px !important;
     border-left: none !important;
+    ul {
+      margin-left:16px !important;
+      border-left: none !important;
+      ul {
+        margin-left:10px !important;
+        padding-left:16px !important;
+        border-left: 1px solid var(--slate6, #D7DBDF) !important;
+      }
+    }
+
   }
 }
 
@@ -18936,9 +18947,11 @@ section.ai-message-prompt-input-wrapper {
 
 .node-icon {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
   margin-right: 6px;
+  height: 14px;
+  width: 14px;
 }
 
 .node-label {
@@ -18964,10 +18977,10 @@ section.ai-message-prompt-input-wrapper {
 .node-content {
   display: flex;
   align-items: center;
-  padding: 0px 8px;
+  padding: 0px 0px 0px 8px;
   height: 100%;
   width: 100%;
-  border-radius: 6px;
+
 }
 
 .node-content-active {
@@ -18978,6 +18991,7 @@ section.ai-message-prompt-input-wrapper {
 
 .node-content-hoverable:hover, .node-content-active {
   background-color: var(--interactive-overlays-fill-hover);
+  cursor: pointer;
   .node-actions {
     display: flex;
   }
@@ -19014,9 +19028,13 @@ section.ai-message-prompt-input-wrapper {
   font-weight: 500;
   display: flex;
   flex-direction: row;
-  margin-left:20px;
-  margin-bottom:18px;
+  margin-left:16px;
+  margin-bottom:12px;
   margin-right: 18px;
+  margin-top: 8px;
+  height:28px;
+  align-items: center;
+
 }
 
 .json-viewer-back-btn {
@@ -19058,11 +19076,9 @@ section.ai-message-prompt-input-wrapper {
 }
 
 .node-actions {
-
   justify-content: center;
   align-items: center;
   margin-left:auto;
-  margin-right: 24px;
   display: none;
   gap: 4px;
 }
@@ -19104,6 +19120,7 @@ section.ai-message-prompt-input-wrapper {
     border: none;
     background: transparent;
     border-radius: 10px;
+    top: -5px !important;
     &.dark-theme {
         .popover-body {
             box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.9), 0px 8px 16px 0px #000000;
diff --git a/frontend/src/components/ui/Input/CommonInput/TextInput.jsx b/frontend/src/components/ui/Input/CommonInput/TextInput.jsx
index 1834d4799d..1dc3ce8d67 100644
--- a/frontend/src/components/ui/Input/CommonInput/TextInput.jsx
+++ b/frontend/src/components/ui/Input/CommonInput/TextInput.jsx
@@ -46,6 +46,7 @@ const TextInput = ({
         <TrailingBtn
           size={size}
           type={trailingAction}
+          {...(trailingAction === 'clear' && { onClick: restProps.onClear })}
           disabled={trailingActionDisabled || disabled}
           className={`tw-absolute tw-right-[5px] ${size === 'small' ? 'tw-top-[5px]' : 'tw-top-[4px]'}`}
         />
diff --git a/frontend/src/components/ui/Input/Index.jsx b/frontend/src/components/ui/Input/Index.jsx
index 139019a198..dbb6806d6b 100644
--- a/frontend/src/components/ui/Input/Index.jsx
+++ b/frontend/src/components/ui/Input/Index.jsx
@@ -13,6 +13,7 @@ InputComponent.propTypes = {
   type: PropTypes.oneOf(['text', 'number', 'editable title', 'password', 'email']),
   value: PropTypes.string,
   onChange: PropTypes.func,
+  onClear: PropTypes.func,
   placeholder: PropTypes.string,
   name: PropTypes.string,
   id: PropTypes.string,
@@ -32,6 +33,7 @@ InputComponent.propTypes = {
 InputComponent.defaultProps = {
   type: 'text',
   onChange: (e, validateObj) => {},
+  onClear: () => {},
   placeholder: '',
   name: '',
   id: '',
diff --git a/frontend/src/components/ui/Input/Input.jsx b/frontend/src/components/ui/Input/Input.jsx
index 33c3194f0b..610232eadf 100644
--- a/frontend/src/components/ui/Input/Input.jsx
+++ b/frontend/src/components/ui/Input/Input.jsx
@@ -19,7 +19,7 @@ const Input = React.forwardRef(({ className, size, type, ...props }, ref) => {
         type={isPasswordField && isPasswordVisible ? 'text' : type}
         className={cn(
           inputVariants({ size }),
-          `tw-relative tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
+          `tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
           className
         )}
         ref={ref}