diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx
index 7dfe5b8289e3..7fbcf68792ca 100644
--- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx
@@ -3,8 +3,6 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { EditableDismissibleTab } from ".";
-import styled from "styled-components";
-
 import { Icon } from "../..";
 
 const meta: Meta<typeof EditableDismissibleTab> = {
@@ -12,27 +10,8 @@ const meta: Meta<typeof EditableDismissibleTab> = {
   component: EditableDismissibleTab,
 };
 
-const EntityIcon = styled.div`
-  height: 18px;
-  width: 18px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  svg,
-  img {
-    height: 100%;
-    width: 100%;
-  }
-`;
-
 const JSIcon = () => {
-  return (
-    <EntityIcon>
-      <Icon name="js-yellow" size="md" />
-    </EntityIcon>
-  );
+  return <Icon name="js-yellow" size="sm" />;
 };
 
 export default meta;
@@ -45,9 +24,10 @@ export const Basic: Story = {
     dataTestId: "t--dismissible-tab",
     icon: JSIcon(),
     name: "Hello",
+    canEdit: true,
 
     onNameSave: console.log,
     validateName: (name: string) =>
-      name.length < 3 ? "Name must be at least 3 characters" : null,
+      name.length < 1 ? "Please enter a valid name" : null,
   },
 };
diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx
index 9ed6cc20e50e..6ba119f092b3 100644
--- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx
@@ -9,6 +9,7 @@ import type { EditableDismissibleTabProps } from "./EditableDismissibleTab.types
 
 export const EditableDismissibleTab = (props: EditableDismissibleTabProps) => {
   const {
+    canEdit,
     dataTestId,
     icon,
     isActive,
@@ -38,6 +39,7 @@ export const EditableDismissibleTab = (props: EditableDismissibleTabProps) => {
       onDoubleClick={handleDoubleClick}
     >
       <EditableEntityName
+        canEdit={canEdit}
         icon={icon}
         isEditing={isEditing}
         isLoading={isLoading}
diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts
index 2ee09e171053..37cd5a808119 100644
--- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts
+++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts
@@ -11,4 +11,5 @@ export interface EditableDismissibleTabProps {
   onClose: () => void;
   onNameSave: (name: string) => void;
   validateName: (name: string) => string | null;
+  canEdit: boolean;
 }
diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx
index 48c9a769c093..6f13128594ed 100644
--- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx
@@ -1,32 +1,12 @@
 /* eslint-disable no-console */
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import styled from "styled-components";
 
 import { Icon } from "../..";
 import { EditableEntityName } from ".";
 
-const EntityIcon = styled.div`
-  height: 18px;
-  width: 18px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  svg,
-  img {
-    height: 100%;
-    width: 100%;
-  }
-`;
-
 const JSIcon = () => {
-  return (
-    <EntityIcon>
-      <Icon name="js-yellow" size="md" />
-    </EntityIcon>
-  );
+  return <Icon name="js-yellow" size="sm" />;
 };
 
 const meta: Meta<typeof EditableEntityName> = {
@@ -44,10 +24,11 @@ export const Basic: Story = {
     onNameSave: console.log,
     onExitEditing: console.log,
     icon: JSIcon(),
+    canEdit: true,
     inputTestId: "t--editable-name",
     isEditing: true,
     isLoading: false,
     validateName: (name: string) =>
-      name.length < 3 ? "Name must be at least 3 characters" : null,
+      name.length < 1 ? "Please enter a valid name" : null,
   },
 };
diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts
index 171b508e6b8b..abf1fe8b4d18 100644
--- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts
+++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts
@@ -5,25 +5,33 @@ export const Root = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: start;
+  justify-content: center;
   align-items: center;
-  gap: var(--ads-v2-spaces-2);
+  flex: 1;
+  min-width: 0;
+
+  &[data-size="small"] {
+    gap: var(--ads-v2-spaces-2);
+  }
+
+  &[data-size="medium"] {
+    gap: var(--ads-v2-spaces-3);
+  }
 `;
 
 export const Text = styled(ADSText)`
   min-width: 3ch;
-  bottom: -0.5px;
-`;
+  line-height: normal;
 
-export const IconContainer = styled.div`
-  height: 12px;
-  width: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  &[data-isfixedwidth="true"] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
 
-  img {
-    width: 12px;
+    &[data-isediting="true"] {
+      text-overflow: unset;
+      overflow: visible;
+    }
   }
 `;
diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx
index fa26160d2a37..576503b71edb 100644
--- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx
@@ -7,23 +7,45 @@ import * as Styled from "./EditableEntityName.styles";
 
 import type { EditableEntityNameProps } from "./EditableEntityName.types";
 
-export const EditableEntityName = ({
-  icon,
-  inputTestId,
-  isEditing,
-  isLoading = false,
-  name,
-  onExitEditing,
-  onNameSave,
-  validateName,
-}: EditableEntityNameProps) => {
+export const EditableEntityName = (props: EditableEntityNameProps) => {
+  const {
+    canEdit,
+    icon,
+    inputTestId,
+    isEditing,
+    isFixedWidth,
+    isLoading,
+    name,
+    onExitEditing,
+    onNameSave,
+    size = "small",
+    validateName,
+  } = props;
+
+  const inEditMode = canEdit ? isEditing : false;
+
   const [
     inputRef,
     editableName,
     validationError,
     handleKeyUp,
     handleTitleChange,
-  ] = useEditableText(isEditing, name, onExitEditing, validateName, onNameSave);
+  ] = useEditableText(
+    inEditMode,
+    name,
+    onExitEditing,
+    validateName,
+    onNameSave,
+  );
+
+  // When in loading state, start icon becomes the loading icon
+  const startIcon = useMemo(() => {
+    if (isLoading) {
+      return <Spinner size={size === "small" ? "sm" : "md"} />;
+    }
+
+    return icon;
+  }, [isLoading, icon]);
 
   const inputProps = useMemo(
     () => ({
@@ -32,29 +54,31 @@ export const EditableEntityName = ({
       onChange: handleTitleChange,
       autoFocus: true,
       style: {
-        paddingTop: 4,
-        paddingBottom: 4,
-        left: -1,
-        top: -5,
+        backgroundColor: "var(--ads-v2-color-bg)",
+        paddingTop: "4px",
+        paddingBottom: "4px",
+        top: "-5px",
       },
     }),
     [handleKeyUp, handleTitleChange, inputTestId],
   );
 
   return (
-    <Styled.Root>
-      {isLoading ? (
-        <Spinner size="sm" />
-      ) : (
-        <Styled.IconContainer>{icon}</Styled.IconContainer>
-      )}
-      <Tooltip content={validationError} visible={Boolean(validationError)}>
+    <Styled.Root data-size={size}>
+      {startIcon}
+      <Tooltip
+        content={validationError}
+        placement="bottom"
+        visible={Boolean(validationError)}
+      >
         <Styled.Text
           aria-invalid={Boolean(validationError)}
+          data-isediting={inEditMode}
+          data-isfixedwidth={isFixedWidth}
           inputProps={inputProps}
           inputRef={inputRef}
-          isEditable={isEditing}
-          kind="body-s"
+          isEditable={inEditMode}
+          kind={size === "small" ? "body-s" : "body-m"}
         >
           {editableName}
         </Styled.Text>
diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts
index b092f01b41be..6f8ac33ab47a 100644
--- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts
+++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts
@@ -9,4 +9,7 @@ export interface EditableEntityNameProps {
   onExitEditing: () => void;
   onNameSave: (name: string) => void;
   validateName: (name: string) => string | null;
+  canEdit: boolean;
+  isFixedWidth?: boolean;
+  size?: "small" | "medium";
 }
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts
deleted file mode 100644
index 05cf52ead59e..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from "styled-components";
-import { Text } from "../../../Text";
-
-export const EntityEditableName = styled(Text)`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  flex: 1;
-
-  &[data-isediting="true"] {
-    height: 32px;
-    line-height: 32px;
-    min-width: 3ch;
-    text-overflow: unset;
-  }
-
-  & input {
-    background-color: var(--ads-v2-color-bg);
-    padding-top: 0;
-    padding-bottom: 0;
-    height: 32px;
-    top: 0;
-  }
-`;
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx
index 066ff8cf0599..36654cdd3664 100644
--- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx
@@ -1,12 +1,8 @@
 import React, { useMemo } from "react";
 import { ListItem } from "../../../List";
-import { Spinner } from "../../../Spinner";
-import { Tooltip } from "../../../Tooltip";
-
 import type { EntityItemProps } from "./EntityItem.types";
-import { EntityEditableName } from "./EntityItem.styles";
-import { useEditableText } from "../../../__hooks__/useEditableText";
 import clx from "classnames";
+import { EditableEntityName } from "../../EditableEntityName";
 
 export const EntityItem = (props: EntityItemProps) => {
   const {
@@ -18,60 +14,36 @@ export const EntityItem = (props: EntityItemProps) => {
     validateName,
   } = props.nameEditorConfig;
 
-  const inEditMode = canEdit ? isEditing : false;
-
-  const [
-    inputRef,
-    editableName,
-    validationError,
-    handleKeyUp,
-    handleTitleChange,
-  ] = useEditableText(
-    inEditMode,
-    props.title,
-    onEditComplete,
-    validateName,
-    onNameSave,
-  );
-
-  // When in loading state, start icon becomes the loading icon
-  const startIcon = useMemo(() => {
-    if (isLoading) {
-      return <Spinner size="md" />;
-    }
-
-    return props.startIcon;
-  }, [isLoading, props.startIcon]);
+  const { startIcon, ...rest } = props;
 
-  const inputProps = useMemo(
-    () => ({
-      onChange: handleTitleChange,
-      onKeyUp: handleKeyUp,
-    }),
-    [handleKeyUp, handleTitleChange],
-  );
+  const inEditMode = canEdit ? isEditing : false;
 
   // Use List Item custom title prop to show the editable name
   const customTitle = useMemo(() => {
     return (
-      <Tooltip
-        content={validationError}
-        placement="bottomLeft"
-        showArrow={false}
-        visible={Boolean(validationError)}
-      >
-        <EntityEditableName
-          data-isediting={inEditMode}
-          inputProps={inputProps}
-          inputRef={inputRef}
-          isEditable={inEditMode}
-          kind="body-m"
-        >
-          {editableName}
-        </EntityEditableName>
-      </Tooltip>
+      <EditableEntityName
+        canEdit={canEdit}
+        icon={startIcon}
+        isEditing={isEditing}
+        isFixedWidth
+        isLoading={isLoading}
+        name={props.title}
+        onExitEditing={onEditComplete}
+        onNameSave={onNameSave}
+        size="medium"
+        validateName={validateName}
+      />
     );
-  }, [editableName, inputProps, inputRef, inEditMode, validationError]);
+  }, [
+    canEdit,
+    isEditing,
+    isLoading,
+    onEditComplete,
+    onNameSave,
+    props.title,
+    startIcon,
+    validateName,
+  ]);
 
   // Do not show right control if the visibility is hover and the item is in edit mode
   const rightControl = useMemo(() => {
@@ -84,13 +56,12 @@ export const EntityItem = (props: EntityItemProps) => {
 
   return (
     <ListItem
-      {...props}
+      {...rest}
       className={clx("t--entity-item", props.className)}
       customTitleComponent={customTitle}
       data-testid={`t--entity-item-${props.title}`}
       id={"entity-" + props.id}
       rightControl={rightControl}
-      startIcon={startIcon}
     />
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
index d0a65be5da8a..fe1fd09a857f 100644
--- a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
+++ b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
@@ -35,7 +35,7 @@ import { getIDETypeByUrl } from "ee/entities/IDE/utils";
 const PaneBody = styled.div`
   padding: var(--ads-v2-spaces-3) 0;
   height: calc(100vh - 120px);
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const DatasourceIcon = styled.img`