diff --git a/app/client/cypress/e2e/Regression/ClientSide/IDE/IDE_Add_Pane_Interactions_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/IDE/IDE_Add_Pane_Interactions_spec.ts
index 93a644fbe31..0a1126ee299 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/IDE/IDE_Add_Pane_Interactions_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/IDE/IDE_Add_Pane_Interactions_spec.ts
@@ -5,6 +5,7 @@ import EditorNavigation, {
 } from "../../../../support/Pages/EditorNavigation";
 import { ObjectsRegistry } from "../../../../support/Objects/Registry";
 import FileTabs from "../../../../support/Pages/IDE/FileTabs";
+import AddView from "../../../../support/Pages/IDE/AddView";
 
 const agHelper = ObjectsRegistry.AggregateHelper;
 const commonLocators = ObjectsRegistry.CommonLocators;
@@ -66,8 +67,8 @@ describe("IDE add pane interactions", { tags: ["@tag.IDE"] }, () => {
     PageLeftPane.switchToAddNew();
     // check add pane
     PageLeftPane.assertInAddView();
-    // close add pane
-    PageLeftPane.closeAddView();
+    // close add tab
+    FileTabs.closeTab("new");
     // open add pane to add item
     PageLeftPane.switchToAddNew();
     // add item
diff --git a/app/client/cypress/support/Pages/AggregateHelper.ts b/app/client/cypress/support/Pages/AggregateHelper.ts
index ac156b1c21a..aeba30a4acc 100644
--- a/app/client/cypress/support/Pages/AggregateHelper.ts
+++ b/app/client/cypress/support/Pages/AggregateHelper.ts
@@ -1806,4 +1806,18 @@ export class AggregateHelper {
   //     }
   //     return items;
   //   }, { timeout: 5000 });
+
+  public GetChildrenNClick(
+    selector: string,
+    childSelector: string,
+    index = 0,
+    force = false,
+    waitTimeInterval = 500,
+    ctrlKey = false,
+  ) {
+    return this.ScrollIntoView(selector, index)
+      .children(childSelector)
+      .click({ force: force, ctrlKey: ctrlKey })
+      .wait(waitTimeInterval);
+  }
 }
diff --git a/app/client/cypress/support/Pages/EntityExplorer.ts b/app/client/cypress/support/Pages/EntityExplorer.ts
index e48751444ba..7a8386f8b59 100644
--- a/app/client/cypress/support/Pages/EntityExplorer.ts
+++ b/app/client/cypress/support/Pages/EntityExplorer.ts
@@ -8,6 +8,7 @@ import EditorNavigation, {
   PageLeftPane,
   PagePaneSegment,
 } from "./EditorNavigation";
+import AddView from "./IDE/AddView";
 import PageList from "./PageList";
 
 type templateActions =
@@ -247,8 +248,7 @@ export class EntityExplorer {
     this.agHelper.ClickOutside(); //to close the evaluated pop-up
     PageLeftPane.switchSegment(PagePaneSegment.Queries);
     PageLeftPane.switchToAddNew();
-    let overlayItem = this._visibleTextSpan(dsName);
-    this.agHelper.GetNClick(overlayItem);
+    AddView.clickCreateOption(dsName);
   }
 
   public CopyPasteWidget(widgetName: string) {
diff --git a/app/client/cypress/support/Pages/IDE/AddView.ts b/app/client/cypress/support/Pages/IDE/AddView.ts
index cedba70bec3..cc6cde95db1 100644
--- a/app/client/cypress/support/Pages/IDE/AddView.ts
+++ b/app/client/cypress/support/Pages/IDE/AddView.ts
@@ -2,8 +2,10 @@ import { ObjectsRegistry } from "../../Objects/Registry";
 
 class AddView {
   public locators = {
+    addPane: "[data-testid='t--ide-add-pane']",
     closePaneButton: "[data-testid='t--add-pane-close-icon']",
-    createOption: "[data-testid='t--create-option']",
+    createOption: (name: string) =>
+      ".t--datasoucre-create-option-" + name.toLowerCase().replace(/ /g, "_"),
   };
 
   constructor() {
@@ -12,7 +14,7 @@ class AddView {
 
   public assertInAddView() {
     ObjectsRegistry.AggregateHelper.AssertElementVisibility(
-      this.locators.closePaneButton,
+      this.locators.addPane,
     );
   }
 
@@ -20,9 +22,9 @@ class AddView {
     ObjectsRegistry.AggregateHelper.GetNClick(this.locators.closePaneButton);
   }
 
-  public getCreateOptions(): Cypress.Chainable {
-    return cy.get(this.locators.createOption);
+  public clickCreateOption(name: string) {
+    ObjectsRegistry.AggregateHelper.GetNClick(this.locators.createOption(name));
   }
 }
 
-export default AddView;
+export default new AddView();
diff --git a/app/client/cypress/support/Pages/IDE/FileTabs.ts b/app/client/cypress/support/Pages/IDE/FileTabs.ts
index 7eb95702114..24bfa7bb53e 100644
--- a/app/client/cypress/support/Pages/IDE/FileTabs.ts
+++ b/app/client/cypress/support/Pages/IDE/FileTabs.ts
@@ -4,7 +4,8 @@ class FileTabs {
     container: "[data-testid='t--editor-tabs']",
     tabName: (name: string) => `[data-testid='t--ide-tab-${name}']`,
     tabs: ".editor-tab",
-    addItem: "[data-testid='t--ide-split-screen-add-button']",
+    addItem: "[data-testid='t--ide-tabs-add-button']",
+    closeTab: "[data-testid='t--tab-close-btn']",
   };
 
   assertVisibility() {
@@ -32,6 +33,17 @@ class FileTabs {
       }
     });
   }
+
+  closeTab(name: string) {
+    const tab = this.locators.tabName(name);
+    ObjectsRegistry.AggregateHelper.HoverElement(tab);
+    ObjectsRegistry.AggregateHelper.GetChildrenNClick(
+      tab,
+      this.locators.closeTab,
+      0,
+      true,
+    );
+  }
 }
 
 export default new FileTabs();
diff --git a/app/client/cypress/support/Pages/IDE/LeftPane.ts b/app/client/cypress/support/Pages/IDE/LeftPane.ts
index 09c52297204..d0d0903f620 100644
--- a/app/client/cypress/support/Pages/IDE/LeftPane.ts
+++ b/app/client/cypress/support/Pages/IDE/LeftPane.ts
@@ -1,5 +1,7 @@
 import { ObjectsRegistry } from "../../Objects/Registry";
+import { PagePaneSegment } from "../EditorNavigation";
 import AddView from "./AddView";
+import FileTabs from "./FileTabs";
 import ListView from "./ListView";
 
 export class LeftPane {
@@ -15,8 +17,6 @@ export class LeftPane {
     activeItemSelector: "",
     selector: "",
   };
-
-  private addView: AddView;
   private listView: ListView;
 
   constructor(
@@ -29,7 +29,6 @@ export class LeftPane {
     this.segments = segments;
     this.locators.selector = selector;
     this.locators.activeItemSelector = activeItemSelector;
-    this.addView = new AddView();
     this.listView = new ListView();
   }
 
@@ -109,15 +108,15 @@ export class LeftPane {
   }
 
   public assertInAddView() {
-    this.addView.assertInAddView();
+    AddView.assertInAddView();
   }
 
   public closeAddView() {
-    this.addView.closeAddView();
+    AddView.closeAddView();
   }
 
-  public getCreateOptions() {
-    return this.addView.getCreateOptions();
+  public clickCreateOption(name: string) {
+    return AddView.clickCreateOption(name);
   }
 
   public assertInListView() {
diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index e7e310e2dde..ed1269c6291 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@@ -2326,9 +2326,9 @@ export const EDITOR_PANE_TEXTS = {
   js_add_button: () => "New JS object",
   js_blank_object_item: () => "Blank JS object",
   widget_add_button: () => "New UI element",
-  query_create_tab_title: () => "Create new query / API",
+  query_create_tab_title: () => "Create new query from",
   widgets_create_tab_title: () => "Drag & drop UI elements",
-  js_create_tab_title: () => "Create JS object",
+  js_create_tab_title: () => "Create JS object from",
   queries_create_from_existing: () => "From existing datasource",
   queries_create_new: () => "New API",
   loading_building_blocks: () => "Loading building blocks",
diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
index 04992169650..71130f46e1c 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
+++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
@@ -7,16 +7,12 @@ import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import { JsFileIconV2 } from "pages/Editor/Explorer/ExplorerIcons";
 import { SEARCH_ITEM_TYPES } from "components/editorComponents/GlobalSearch/utils";
 import type { UseRoutes } from "@appsmith/entities/IDE/constants";
-import {
-  EditorEntityTabState,
-  EditorViewMode,
-} from "@appsmith/entities/IDE/constants";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
 import JSEditor from "pages/Editor/JSEditor";
 import AddJS from "pages/Editor/IDE/EditorPane/JS/Add";
 import { ADD_PATH } from "@appsmith/constants/routes/appRoutes";
 import ListJS from "pages/Editor/IDE/EditorPane/JS/List";
-import { useCurrentEditorState } from "pages/Editor/IDE/hooks";
 import history from "utils/history";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
 import { useModuleOptions } from "@appsmith/utils/moduleInstanceHelpers";
@@ -26,34 +22,29 @@ export const useJSAdd = () => {
   const pageId = useSelector(getCurrentPageId);
   const dispatch = useDispatch();
   const currentEntityInfo = identifyEntityFromPath(location.pathname);
-  const { segmentMode } = useCurrentEditorState();
   const moduleCreationOptions = useModuleOptions();
   const jsModuleCreationOptions = moduleCreationOptions.filter(
     (opt) => opt.focusEntityType === FocusEntity.JS_MODULE_INSTANCE,
   );
 
-  return useCallback(() => {
+  const openAddJS = useCallback(() => {
     if (jsModuleCreationOptions.length === 0) {
-      if (segmentMode === EditorEntityTabState.Add) {
-        const url = getJSUrl(currentEntityInfo, false);
-        history.push(url);
-      } else {
-        dispatch(createNewJSCollection(pageId, "ENTITY_EXPLORER"));
-      }
+      dispatch(createNewJSCollection(pageId, "ENTITY_EXPLORER"));
     } else {
-      const url = getJSUrl(
-        currentEntityInfo,
-        !(segmentMode === EditorEntityTabState.Add),
-      );
+      if (currentEntityInfo.entity === FocusEntity.JS_OBJECT_ADD) {
+        return;
+      }
+      const url = getJSUrl(currentEntityInfo, true);
       history.push(url);
     }
-  }, [
-    dispatch,
-    pageId,
-    segmentMode,
-    currentEntityInfo,
-    jsModuleCreationOptions,
-  ]);
+  }, [jsModuleCreationOptions, pageId, dispatch, currentEntityInfo]);
+
+  const closeAddJS = useCallback(() => {
+    const url = getJSUrl(currentEntityInfo, false);
+    history.push(url);
+  }, [pageId, currentEntityInfo]);
+
+  return { openAddJS, closeAddJS };
 };
 
 export const useIsJSAddLoading = () => {
@@ -111,17 +102,11 @@ export const useJSSegmentRoutes = (path: string): UseRoutes => {
     ];
   }
   return [
-    {
-      exact: true,
-      key: "AddJS",
-      component: AddJS,
-      path: [`${path}${ADD_PATH}`, `${path}/:collectionId${ADD_PATH}`],
-    },
     {
       exact: false,
       key: "ListJS",
       component: ListJS,
-      path: [path],
+      path: [path, `${path}${ADD_PATH}`, `${path}/:collectionId${ADD_PATH}`],
     },
   ];
 };
diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.ts b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
similarity index 85%
rename from app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.ts
rename to app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
index 450ddfd7de8..90b37aee232 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.ts
+++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import history from "utils/history";
 import { useLocation } from "react-router";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
@@ -27,37 +27,39 @@ import {
 import { SAAS_EDITOR_API_ID_PATH } from "pages/Editor/SaaSEditor/constants";
 import ApiEditor from "pages/Editor/APIEditor";
 import type { UseRoutes } from "@appsmith/entities/IDE/constants";
-import {
-  EditorEntityTabState,
-  EditorViewMode,
-} from "@appsmith/entities/IDE/constants";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 import QueryEditor from "pages/Editor/QueryEditor";
 import AddQuery from "pages/Editor/IDE/EditorPane/Query/Add";
 import ListQuery from "pages/Editor/IDE/EditorPane/Query/List";
 import type { AppState } from "@appsmith/reducers";
 import keyBy from "lodash/keyBy";
 import { getPluginEntityIcon } from "pages/Editor/Explorer/ExplorerIcons";
-import type { ListItemProps } from "design-system";
+import { Tag, type ListItemProps } from "design-system";
 import { useCurrentEditorState } from "pages/Editor/IDE/hooks";
 import CurlImportEditor from "pages/Editor/APIEditor/CurlImportEditor";
+import { createAddClassName } from "pages/Editor/IDE/EditorPane/utils";
 
 export const useQueryAdd = () => {
   const location = useLocation();
   const currentEntityInfo = identifyEntityFromPath(location.pathname);
   const { segmentMode } = useCurrentEditorState();
 
-  const addButtonClickHandler = useCallback(() => {
-    let url = "";
-    if (segmentMode === EditorEntityTabState.Add) {
-      // Already in add mode, back to the previous active item
-      url = getQueryUrl(currentEntityInfo, false);
-    } else {
-      url = getQueryUrl(currentEntityInfo);
+  const openAddQuery = useCallback(() => {
+    if (currentEntityInfo.entity === FocusEntity.QUERY_ADD) {
+      return;
     }
+    let url = "";
+    url = getQueryUrl(currentEntityInfo);
+    history.push(url);
+  }, [currentEntityInfo, segmentMode, location]);
+
+  const closeAddQuery = useCallback(() => {
+    let url = "";
+    url = getQueryUrl(currentEntityInfo, false);
     history.push(url);
-  }, [currentEntityInfo, segmentMode]);
+  }, [currentEntityInfo, segmentMode, location]);
 
-  return addButtonClickHandler;
+  return { openAddQuery, closeAddQuery };
 };
 
 export type GroupedAddOperations = Array<{
@@ -166,17 +168,11 @@ export const useQuerySegmentRoutes = (path: string): UseRoutes => {
     ];
   }
   return [
-    {
-      key: "AddQuery",
-      exact: true,
-      component: AddQuery,
-      path: [`${path}${ADD_PATH}`, `${path}/:queryId${ADD_PATH}`],
-    },
     {
       key: "ListQuery",
       exact: false,
       component: ListQuery,
-      path: [path],
+      path: [path, `${path}${ADD_PATH}`, `${path}/:queryId${ADD_PATH}`],
     },
   ];
 };
@@ -202,17 +198,24 @@ export const useAddQueryListItems = () => {
 
   const getListItems = (data: any[]) => {
     return data.map((fileOperation) => {
+      const title =
+        fileOperation.entityExplorerTitle ||
+        fileOperation.dsName ||
+        fileOperation.title;
+      const className = createAddClassName(title);
       const icon =
         fileOperation.icon ||
         (fileOperation.pluginId &&
           getPluginEntityIcon(pluginGroups[fileOperation.pluginId]));
       return {
         startIcon: icon,
-        title:
-          fileOperation.entityExplorerTitle ||
-          fileOperation.dsName ||
-          fileOperation.title,
-        description: !!fileOperation.isBeta ? "Beta" : "",
+        wrapperClassName: className,
+        title,
+        description: !!fileOperation.isBeta ? (
+          <Tag isClosable={false}>Beta</Tag>
+        ) : (
+          ""
+        ),
         descriptionType: "inline",
         onClick: onCreateItemClick.bind(null, fileOperation),
       } as ListItemProps;
diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/__tests__/JS/JSSegment.test.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/__tests__/JS/JSSegment.test.tsx
index f3e1e2875d6..a7cfa06dc47 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/__tests__/JS/JSSegment.test.tsx
+++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/__tests__/JS/JSSegment.test.tsx
@@ -43,7 +43,7 @@ describe("JS Segment", () => {
     expect(result.current).toBeDefined();
 
     act(() => {
-      result.current();
+      result.current.openAddJS();
     });
 
     expect(mockDispatchFn).toBeCalledWith({
@@ -66,7 +66,7 @@ describe("JS Segment", () => {
 
     // Call the function now from a different page
     act(() => {
-      result.current();
+      result.current.openAddJS();
     });
 
     // Now the creation action should have the new page id
diff --git a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts b/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
index 279e216572a..449bb799404 100644
--- a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
+++ b/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
@@ -46,6 +46,8 @@ import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
 import { useSelector } from "react-redux";
 import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
 import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+import { JSAddState } from "pages/Editor/JSEditor/JSAddState";
+import { QueriesAddState } from "pages/Editor/QueryEditor/QueriesAddState";
 
 export interface RouteReturnType extends RouteProps {
   key: string;
@@ -170,58 +172,61 @@ function useRoutes(path: string): RouteReturnType[] {
       path: `${path}${BUILDER_CHECKLIST_PATH}`,
     },
     {
-      key: "ApiEditor",
-      component: ApiEditor,
+      key: "QueryEditorAdd",
+      component: QueriesAddState,
       exact: true,
       path: [
-        `${path}${API_EDITOR_ID_PATH}`,
+        `${path}${QUERIES_EDITOR_BASE_PATH}${ADD_PATH}`,
+        `${path}${QUERIES_EDITOR_ID_ADD_PATH}`,
         `${path}${API_EDITOR_ID_ADD_PATH}`,
+        `${path}${CURL_IMPORT_PAGE_PATH}${ADD_PATH}`,
+        `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
       ],
     },
+    {
+      key: "ApiEditor",
+      component: ApiEditor,
+      exact: true,
+      path: [`${path}${API_EDITOR_ID_PATH}`],
+    },
     {
       key: "QueryEditorList",
       component: QueriesBlankState,
       exact: true,
-      path: [
-        `${path}${QUERIES_EDITOR_BASE_PATH}`,
-        `${path}${QUERIES_EDITOR_BASE_PATH}${ADD_PATH}`,
-      ],
+      path: [`${path}${QUERIES_EDITOR_BASE_PATH}`],
     },
     {
       key: "QueryEditor",
       component: QueryEditor,
       exact: true,
+      path: [`${path}${QUERIES_EDITOR_ID_PATH}`],
+    },
+    {
+      key: "JSEditorAdd",
+      component: JSAddState,
+      exact: true,
       path: [
-        `${path}${QUERIES_EDITOR_ID_PATH}`,
-        `${path}${QUERIES_EDITOR_ID_ADD_PATH}`,
+        `${path}${JS_COLLECTION_EDITOR_PATH}${ADD_PATH}`,
+        `${path}${JS_COLLECTION_ID_PATH}${ADD_PATH}`,
       ],
     },
     {
       key: "JSEditorList",
       component: JSBlankState,
       exact: true,
-      path: [
-        `${path}${JS_COLLECTION_EDITOR_PATH}`,
-        `${path}${JS_COLLECTION_EDITOR_PATH}${ADD_PATH}`,
-      ],
+      path: [`${path}${JS_COLLECTION_EDITOR_PATH}`],
     },
     {
       key: "JSEditor File",
       component: JSEditor,
       exact: true,
-      path: [
-        `${path}${JS_COLLECTION_ID_PATH}`,
-        `${path}${JS_COLLECTION_ID_PATH}${ADD_PATH}`,
-      ],
+      path: [`${path}${JS_COLLECTION_ID_PATH}`],
     },
     {
       key: "CurlImportEditor",
       component: CurlImportEditor,
       exact: true,
-      path: [
-        `${path}${CURL_IMPORT_PAGE_PATH}`,
-        `${path}${CURL_IMPORT_PAGE_PATH}${ADD_PATH}`,
-      ],
+      path: [`${path}${CURL_IMPORT_PAGE_PATH}`],
     },
     {
       key: "SAASList",
@@ -239,10 +244,7 @@ function useRoutes(path: string): RouteReturnType[] {
       key: "SAASEditor",
       component: QueryEditor,
       exact: true,
-      path: [
-        `${path}${SAAS_EDITOR_API_ID_PATH}`,
-        `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
-      ],
+      path: [`${path}${SAAS_EDITOR_API_ID_PATH}`],
     },
     {
       key: "DatasourceEditor",
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
index 9d188bd1687..eb704e8eb3c 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
@@ -2,20 +2,18 @@ import React, { useCallback } from "react";
 import SegmentAddHeader from "../components/SegmentAddHeader";
 import { EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import type { ListItemProps } from "design-system";
-import { Flex } from "design-system";
+import { Flex, Tag } from "design-system";
 import { useDispatch, useSelector } from "react-redux";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import GroupedList from "../components/GroupedList";
-import {
-  useGroupedAddJsOperations,
-  useJSAdd,
-} from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
+import { useGroupedAddJsOperations } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
 import type { ActionOperation } from "components/editorComponents/GlobalSearch/utils";
+import type { AddProps } from "../types/AddProps";
+import { createAddClassName } from "../utils";
 
-const AddJS = () => {
+const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
   const dispatch = useDispatch();
   const pageId = useSelector(getCurrentPageId);
-  const closeButtonClickHandler = useJSAdd();
 
   const groupedJsOperations = useGroupedAddJsOperations();
 
@@ -29,32 +27,47 @@ const AddJS = () => {
   );
 
   const getListItems = (data: ActionOperation) => {
+    const title = data.entityExplorerTitle || data.title;
     return {
       startIcon: data.icon,
-      title: data.entityExplorerTitle || data.title,
-      description: !!data.isBeta ? "Beta" : "",
+      title,
+      description: !!data.isBeta ? <Tag isClosable={false}>Beta</Tag> : "",
       descriptionType: "inline",
       onClick: onCreateItemClick.bind(null, data),
+      wrapperClassName: createAddClassName(title),
     } as ListItemProps;
   };
 
   return (
-    <Flex flexDirection="column" gap={"spaces-4"} overflow="hidden">
-      <SegmentAddHeader
-        onCloseClick={closeButtonClickHandler}
-        titleMessage={EDITOR_PANE_TEXTS.js_create_tab_title}
-      />
-      <GroupedList
-        flexProps={{
-          pr: "spaces-2",
-          px: "spaces-3",
-        }}
-        groups={groupedJsOperations.map((op) => ({
-          groupTitle: op.title,
-          className: op.className,
-          items: op.operations.map(getListItems),
-        }))}
-      />
+    <Flex
+      data-testid="t--ide-add-pane"
+      justifyContent="center"
+      p="spaces-3"
+      {...containerProps}
+    >
+      <Flex
+        flexDirection="column"
+        gap={"spaces-4"}
+        overflow="hidden"
+        width="100%"
+        {...innerContainerProps}
+      >
+        <SegmentAddHeader
+          titleMessage={EDITOR_PANE_TEXTS.js_create_tab_title}
+        />
+
+        <GroupedList
+          flexProps={{
+            pr: "spaces-2",
+            px: "spaces-3",
+          }}
+          groups={groupedJsOperations.map((op) => ({
+            groupTitle: op.title,
+            className: op.className,
+            items: op.operations.map(getListItems),
+          }))}
+        />
+      </Flex>
     </Flex>
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/BlankState.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/BlankState.tsx
index 4ed17367a69..411fcc2ebfb 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/BlankState.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/BlankState.tsx
@@ -16,7 +16,7 @@ const BlankState: React.FC = () => {
     isFeatureEnabled,
     pagePermissions,
   );
-  const addButtonClickHandler = useJSAdd();
+  const { openAddJS } = useJSAdd();
 
   return (
     <EmptyState
@@ -24,7 +24,7 @@ const BlankState: React.FC = () => {
       buttonText={createMessage(EDITOR_PANE_TEXTS.js_add_button)}
       description={createMessage(EDITOR_PANE_TEXTS.js_blank_state_description)}
       icon={"js-square-v3"}
-      onClick={canCreateActions ? addButtonClickHandler : undefined}
+      onClick={canCreateActions ? openAddJS : undefined}
     />
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx
index 8485c729ac7..2ac2ba18063 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx
@@ -69,7 +69,7 @@ describe("IDE Render: JS", () => {
     });
 
     it("Renders Fullscreen Add in Blank State", () => {
-      const { getByRole, getByText } = render(
+      const { getByTestId, getByText } = render(
         <Route path={BUILDER_PATH}>
           <IDE />
         </Route>,
@@ -80,20 +80,20 @@ describe("IDE Render: JS", () => {
       );
 
       // Main pane text
-      getByText(createMessage(EDITOR_PANE_TEXTS.js_blank_state));
-
-      // Left pane header
       getByText(createMessage(EDITOR_PANE_TEXTS.js_create_tab_title));
 
+      // Left pane description
+      getByText(createMessage(EDITOR_PANE_TEXTS.js_blank_state_description));
+
       // Create options are rendered
       getByText(createMessage(EDITOR_PANE_TEXTS.js_blank_object_item));
-      // Close button is rendered
-      getByRole("button", { name: "Close pane" });
+      // Tab close button is rendered
+      getByTestId("t--tab-close-btn");
     });
 
     it("Renders Split Screen Add in Blank State", () => {
       const state = getIDETestState({ ideView: EditorViewMode.SplitScreen });
-      const { getByRole, getByTestId, getByText } = render(
+      const { getByTestId, getByText } = render(
         <Route path={BUILDER_PATH}>
           <IDE />
         </Route>,
@@ -113,8 +113,6 @@ describe("IDE Render: JS", () => {
 
       // Create options are rendered
       getByText(createMessage(EDITOR_PANE_TEXTS.js_blank_object_item));
-      // Close button is rendered
-      getByRole("button", { name: "Close pane" });
     });
   });
 
@@ -212,7 +210,7 @@ describe("IDE Render: JS", () => {
       // Check if run button is visible
       getByRole("button", { name: /run/i });
       // Check if the Add new button is shown
-      getByTestId("t--ide-split-screen-add-button");
+      getByTestId("t--ide-tabs-add-button");
     });
 
     it("Renders JS add routes in Full Screen", () => {
@@ -230,17 +228,16 @@ describe("IDE Render: JS", () => {
         },
       });
 
-      const { container, getAllByText, getByRole, getByTestId, getByText } =
-        render(
-          <Route path={BUILDER_PATH}>
-            <IDE />
-          </Route>,
-          {
-            url: "/app/applicationSlug/pageSlug-page_id/edit/jsObjects/js_id3/add",
-            initialState: state,
-            featureFlags: FeatureFlags,
-          },
-        );
+      const { container, getAllByText, getByTestId, getByText } = render(
+        <Route path={BUILDER_PATH}>
+          <IDE />
+        </Route>,
+        {
+          url: "/app/applicationSlug/pageSlug-page_id/edit/jsObjects/js_id3/add",
+          initialState: state,
+          featureFlags: FeatureFlags,
+        },
+      );
 
       // There will be 2 JSObject3 text (editor tab and Editor form)
       expect(getAllByText("JSObject3").length).toEqual(2);
@@ -248,17 +245,12 @@ describe("IDE Render: JS", () => {
       expect(
         getByTestId("t--ide-tab-JSObject3").classList.contains("active"),
       ).toBe(false);
-      // Check if the form is rendered
-      expect(container.querySelector(".js-editor-tab")).not.toBeNull();
-      // Check if the code and settings tabs is visible
-      getByRole("tab", { name: /code/i });
-      getByRole("tab", { name: /settings/i });
-      // Check if run button is visible
-      getByRole("button", { name: /run/i });
+      // Check js object is not rendered. Instead new tab should render
+      expect(container.querySelector(".js-editor-tab")).toBeNull();
+      // Check is new tab is visible
+      getByText("New JS");
       // Create options are rendered
       getByText(createMessage(EDITOR_PANE_TEXTS.js_blank_object_item));
-      // Close button is rendered
-      getByRole("button", { name: "Close pane" });
     });
 
     it("Renders JS add routes in Split Screen", () => {
@@ -274,17 +266,16 @@ describe("IDE Render: JS", () => {
         ideView: EditorViewMode.SplitScreen,
       });
 
-      const { container, getAllByText, getByRole, getByTestId, getByText } =
-        render(
-          <Route path={BUILDER_PATH}>
-            <IDE />
-          </Route>,
-          {
-            url: "/app/applicationSlug/pageSlug-page_id/edit/jsObjects/js_id4/add",
-            initialState: state,
-            featureFlags: FeatureFlags,
-          },
-        );
+      const { container, getAllByText, getByTestId, getByText } = render(
+        <Route path={BUILDER_PATH}>
+          <IDE />
+        </Route>,
+        {
+          url: "/app/applicationSlug/pageSlug-page_id/edit/jsObjects/js_id4/add",
+          initialState: state,
+          featureFlags: FeatureFlags,
+        },
+      );
 
       // There will be 1 JSObject3 text ( The tab )
       expect(getAllByText("JSObject4").length).toEqual(1);
@@ -292,19 +283,11 @@ describe("IDE Render: JS", () => {
       expect(
         getByTestId("t--ide-tab-JSObject4").classList.contains("active"),
       ).toBe(false);
-      // Add button active state
-      expect(
-        getByTestId("t--ide-split-screen-add-button").getAttribute(
-          "data-selected",
-        ),
-      ).toBe("true");
 
       // Check if the form is not rendered
       expect(container.querySelector(".js-editor-tab")).toBeNull();
       // Create options are rendered
       getByText(createMessage(EDITOR_PANE_TEXTS.js_blank_object_item));
-      // Close button is rendered
-      getByRole("button", { name: "Close pane" });
     });
 
     it("Prevents edit of main JS object", () => {
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
index 2956d611e34..ccf56595ff1 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
@@ -46,7 +46,7 @@ const ListJSObjects = () => {
     pagePermissions,
   );
 
-  const addButtonClickHandler = useJSAdd();
+  const { openAddJS } = useJSAdd();
 
   return (
     <JSContainer
@@ -61,7 +61,7 @@ const ListJSObjects = () => {
           <Button
             className="t--add-item"
             kind={"secondary"}
-            onClick={addButtonClickHandler}
+            onClick={openAddJS}
             size={"sm"}
             startIcon={"add-line"}
           >
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
index ecd2649c75c..c2bafa5d731 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
@@ -7,32 +7,42 @@ import GroupedList from "../components/GroupedList";
 import {
   useAddQueryListItems,
   useGroupedAddQueryOperations,
-  useQueryAdd,
 } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
+import type { AddProps } from "../types/AddProps";
 
-const AddQuery = () => {
+const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
   const { getListItems } = useAddQueryListItems();
   const groupedActionOperations = useGroupedAddQueryOperations();
 
-  const closeButtonClickHandler = useQueryAdd();
-
   return (
-    <Flex flexDirection="column" gap={"spaces-4"} overflow="hidden">
-      <SegmentAddHeader
-        onCloseClick={closeButtonClickHandler}
-        titleMessage={EDITOR_PANE_TEXTS.query_create_tab_title}
-      />
-      <GroupedList
-        flexProps={{
-          pr: "spaces-2",
-          px: "spaces-3",
-        }}
-        groups={groupedActionOperations.map((group) => ({
-          groupTitle: group.title,
-          className: group.className,
-          items: getListItems(group.operations),
-        }))}
-      />
+    <Flex
+      data-testid="t--ide-add-pane"
+      justifyContent="center"
+      p="spaces-3"
+      {...containerProps}
+    >
+      <Flex
+        flexDirection="column"
+        gap={"spaces-4"}
+        overflow="hidden"
+        width="100%"
+        {...innerContainerProps}
+      >
+        <SegmentAddHeader
+          titleMessage={EDITOR_PANE_TEXTS.query_create_tab_title}
+        />
+        <GroupedList
+          flexProps={{
+            pr: "spaces-2",
+            px: "spaces-3",
+          }}
+          groups={groupedActionOperations.map((group) => ({
+            groupTitle: group.title,
+            className: group.className,
+            items: getListItems(group.operations),
+          }))}
+        />
+      </Flex>
     </Flex>
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/BlankState.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/BlankState.tsx
index 7865e88d056..000096008bf 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/BlankState.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/BlankState.tsx
@@ -16,7 +16,7 @@ const BlankState: React.FC = () => {
     isFeatureEnabled,
     pagePermissions,
   );
-  const addButtonClickHandler = useQueryAdd();
+  const { openAddQuery } = useQueryAdd();
 
   return (
     <EmptyState
@@ -26,7 +26,7 @@ const BlankState: React.FC = () => {
         EDITOR_PANE_TEXTS.query_blank_state_description,
       )}
       icon={"queries-v3"}
-      onClick={canCreateActions ? addButtonClickHandler : undefined}
+      onClick={canCreateActions ? openAddQuery : undefined}
     />
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx
index bb205b956c8..ea5584606de 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx
@@ -33,7 +33,7 @@ const ListQuery = () => {
   );
   const applicationId = useSelector(getCurrentApplicationId);
 
-  const addButtonClickHandler = useQueryAdd();
+  const { openAddQuery } = useQueryAdd();
   const showWorkflows = useSelector(getShowWorkflowFeature);
 
   return (
@@ -49,7 +49,7 @@ const ListQuery = () => {
           <Button
             className="t--add-item"
             kind={"secondary"}
-            onClick={addButtonClickHandler}
+            onClick={openAddQuery}
             size={"sm"}
             startIcon={"add-line"}
           >
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx
index 7828b739a6b..264586fd9a5 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx
@@ -71,7 +71,7 @@ describe("IDE URL rendering of Queries", () => {
     });
 
     it("Renders Fullscreen Add in Blank State", () => {
-      const { getByRole, getByText } = render(
+      const { getByTestId, getByText } = render(
         <Route path={BUILDER_PATH}>
           <IDE />
         </Route>,
@@ -81,23 +81,22 @@ describe("IDE URL rendering of Queries", () => {
         },
       );
 
-      // Main pane text
-      getByText(createMessage(EDITOR_PANE_TEXTS.query_blank_state));
-
-      // Left pane header
-      getByText(createMessage(EDITOR_PANE_TEXTS.query_create_tab_title));
-
       // Create options are rendered
       getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
       getByText("New datasource");
       getByText("REST API");
+      // Check new tab presence
+      const newTab = getByTestId("t--ide-tab-new");
+      expect(newTab).not.toBeNull();
       // Close button is rendered
-      getByRole("button", { name: "Close pane" });
+      expect(
+        newTab.querySelector("[data-testid='t--tab-close-btn']"),
+      ).not.toBeNull();
     });
 
     it("Renders Split Screen Add in Blank State", () => {
       const state = getIDETestState({ ideView: EditorViewMode.SplitScreen });
-      const { getByRole, getByTestId, getByText } = render(
+      const { getByTestId, getByText } = render(
         <Route path={BUILDER_PATH}>
           <IDE />
         </Route>,
@@ -119,8 +118,13 @@ describe("IDE URL rendering of Queries", () => {
       getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
       getByText("New datasource");
       getByText("REST API");
+      // Check new tab presence
+      const newTab = getByTestId("t--ide-tab-new");
+      expect(newTab).not.toBeNull();
       // Close button is rendered
-      getByRole("button", { name: "Close pane" });
+      expect(
+        newTab.querySelector("[data-testid='t--tab-close-btn']"),
+      ).not.toBeNull();
     });
   });
 
@@ -207,7 +211,7 @@ describe("IDE URL rendering of Queries", () => {
       // Check if run button is visible
       getByRole("button", { name: /run/i });
       // Check if the Add new button is shown
-      getByTestId("t--ide-split-screen-add-button");
+      getByTestId("t--ide-tabs-add-button");
     });
 
     it("Renders Api add routes in Full Screen", () => {
@@ -222,7 +226,7 @@ describe("IDE URL rendering of Queries", () => {
         },
       });
 
-      const { getAllByText, getByRole, getByTestId, getByText } = render(
+      const { getByTestId, getByText } = render(
         <Route path={BUILDER_PATH}>
           <IDE />
         </Route>,
@@ -233,24 +237,17 @@ describe("IDE URL rendering of Queries", () => {
         },
       );
 
-      // There will be 2 Api1 text (editor tab and Editor form)
-      expect(getAllByText("Api3").length).toEqual(2);
-      // Tabs active state
-      expect(getByTestId("t--ide-tab-Api3").classList.contains("active")).toBe(
-        false,
-      );
-      // Check if the form is rendered
-      getByTestId("t--action-form-API");
-      // Check if the params tabs is visible
-      getByRole("tab", { name: /params/i });
-      // Check if run button is visible
-      getByRole("button", { name: /run/i });
       // Create options are rendered
       getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
       getByText("New datasource");
       getByText("REST API");
+      // Check new tab presence
+      const newTab = getByTestId("t--ide-tab-new");
+      expect(newTab).not.toBeNull();
       // Close button is rendered
-      getByRole("button", { name: "Close pane" });
+      expect(
+        newTab.querySelector("[data-testid='t--tab-close-btn']"),
+      ).not.toBeNull();
     });
     it("Renders Api add routes in Split Screen", () => {
       const page = PageFactory.build();
@@ -265,17 +262,16 @@ describe("IDE URL rendering of Queries", () => {
         ideView: EditorViewMode.SplitScreen,
       });
 
-      const { getAllByText, getByRole, getByTestId, getByText, queryByTestId } =
-        render(
-          <Route path={BUILDER_PATH}>
-            <IDE />
-          </Route>,
-          {
-            url: "/app/applicationSlug/pageSlug-page_id/edit/api/api_id/add",
-            initialState: state,
-            featureFlags: FeatureFlags,
-          },
-        );
+      const { getAllByText, getByTestId, getByText, queryByTestId } = render(
+        <Route path={BUILDER_PATH}>
+          <IDE />
+        </Route>,
+        {
+          url: "/app/applicationSlug/pageSlug-page_id/edit/api/api_id/add",
+          initialState: state,
+          featureFlags: FeatureFlags,
+        },
+      );
 
       // There will be 1 Api4 text ( The tab )
       expect(getAllByText("Api4").length).toEqual(1);
@@ -283,12 +279,8 @@ describe("IDE URL rendering of Queries", () => {
       expect(getByTestId("t--ide-tab-Api4").classList.contains("active")).toBe(
         false,
       );
-      // Add button active state
-      expect(
-        getByTestId("t--ide-split-screen-add-button").getAttribute(
-          "data-selected",
-        ),
-      ).toBe("true");
+      // Add button should not present
+      expect(queryByTestId("t--ide-tabs-add-button")).toBeNull();
 
       // Check if the form is not rendered
       expect(queryByTestId("t--action-form-API")).toBeNull();
@@ -296,8 +288,13 @@ describe("IDE URL rendering of Queries", () => {
       getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
       getByText("New datasource");
       getByText("REST API");
+      // Check new tab presence
+      const newTab = getByTestId("t--ide-tab-new");
+      expect(newTab).not.toBeNull();
       // Close button is rendered
-      getByRole("button", { name: "Close pane" });
+      expect(
+        newTab.querySelector("[data-testid='t--tab-close-btn']"),
+      ).not.toBeNull();
     });
   });
 
@@ -395,7 +392,7 @@ describe("IDE URL rendering of Queries", () => {
       // Check if run button is visible
       getByRole("button", { name: /run/i });
       // Check if the Add new button is shown
-      getByTestId("t--ide-split-screen-add-button");
+      getByTestId("t--ide-tabs-add-button");
     });
     it("Renders Postgres add routes in Full Screen", async () => {
       const page = PageFactory.build();
@@ -412,40 +409,31 @@ describe("IDE URL rendering of Queries", () => {
         },
       });
 
-      const { container, getAllByText, getByRole, getByTestId, getByText } =
-        render(
-          <Route path={BUILDER_PATH}>
-            <IDE />
-          </Route>,
-          {
-            url: `/app/applicationSlug/${page.slug}-${page.pageId}/edit/queries/query_id/add`,
-            initialState: state,
-            featureFlags: FeatureFlags,
-            sagasToRun: sagasToRunForTests,
-          },
-        );
+      const { container, getByTestId, getByText } = render(
+        <Route path={BUILDER_PATH}>
+          <IDE />
+        </Route>,
+        {
+          url: `/app/applicationSlug/${page.slug}-${page.pageId}/edit/queries/query_id/add`,
+          initialState: state,
+          featureFlags: FeatureFlags,
+          sagasToRun: sagasToRunForTests,
+        },
+      );
 
       screen.logTestingPlaygroundURL(container);
 
-      await userEvent.click(getByRole("tab", { name: "Query" }));
-
-      // There will be 2 Query3 text (editor tab and Editor form)
-      expect(getAllByText("Query3").length).toEqual(2);
-      // Tabs active state
-      expect(
-        getByTestId("t--ide-tab-Query3").classList.contains("active"),
-      ).toBe(false);
-      // Check if the form is rendered
-      getByTestId("t--action-form-DB");
-
-      // Check if run button is visible
-      getByRole("button", { name: /run/i });
       // Create options are rendered
       getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
       getByText("New datasource");
       getByText("REST API");
+      // Check new tab presence
+      const newTab = getByTestId("t--ide-tab-new");
+      expect(newTab).not.toBeNull();
       // Close button is rendered
-      getByRole("button", { name: "Close pane" });
+      expect(
+        newTab.querySelector("[data-testid='t--tab-close-btn']"),
+      ).not.toBeNull();
     });
     it("Renders Postgres add routes in Split Screen", () => {
       const page = PageFactory.build();
@@ -463,18 +451,17 @@ describe("IDE URL rendering of Queries", () => {
         ideView: EditorViewMode.SplitScreen,
       });
 
-      const { getAllByText, getByRole, getByTestId, getByText, queryByTestId } =
-        render(
-          <Route path={BUILDER_PATH}>
-            <IDE />
-          </Route>,
-          {
-            url: "/app/applicationSlug/pageSlug-page_id/edit/queries/query_id/add",
-            sagasToRun: sagasToRunForTests,
-            initialState: state,
-            featureFlags: FeatureFlags,
-          },
-        );
+      const { getAllByText, getByTestId, getByText, queryByTestId } = render(
+        <Route path={BUILDER_PATH}>
+          <IDE />
+        </Route>,
+        {
+          url: "/app/applicationSlug/pageSlug-page_id/edit/queries/query_id/add",
+          sagasToRun: sagasToRunForTests,
+          initialState: state,
+          featureFlags: FeatureFlags,
+        },
+      );
 
       // There will be 1 Api4 text ( The tab )
       expect(getAllByText("Query4").length).toEqual(1);
@@ -482,12 +469,8 @@ describe("IDE URL rendering of Queries", () => {
       expect(
         getByTestId("t--ide-tab-Query4").classList.contains("active"),
       ).toBe(false);
-      // Add button active state
-      expect(
-        getByTestId("t--ide-split-screen-add-button").getAttribute(
-          "data-selected",
-        ),
-      ).toBe("true");
+      // Add button should not present
+      expect(queryByTestId("t--ide-tabs-add-button")).toBeNull();
 
       // Check if the form is not rendered
       expect(queryByTestId("t--action-form-DB")).toBeNull();
@@ -495,8 +478,13 @@ describe("IDE URL rendering of Queries", () => {
       getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
       getByText("New datasource");
       getByText("REST API");
+      // Check new tab presence
+      const newTab = getByTestId("t--ide-tab-new");
+      expect(newTab).not.toBeNull();
       // Close button is rendered
-      getByRole("button", { name: "Close pane" });
+      expect(
+        newTab.querySelector("[data-testid='t--tab-close-btn']"),
+      ).not.toBeNull();
     });
   });
 
@@ -598,7 +586,7 @@ describe("IDE URL rendering of Queries", () => {
       // Check if run button is visible
       getByRole("button", { name: /run/i });
       // Check if the Add new button is shown
-      getByTestId("t--ide-split-screen-add-button");
+      getByTestId("t--ide-tabs-add-button");
     });
     it("Renders Google Sheets add routes in Full Screen", async () => {
       const page = PageFactory.build();
@@ -616,40 +604,31 @@ describe("IDE URL rendering of Queries", () => {
         },
       });
 
-      const { container, getAllByText, getByRole, getByTestId, getByText } =
-        render(
-          <Route path={BUILDER_PATH}>
-            <IDE />
-          </Route>,
-          {
-            url: "/app/applicationSlug/pageSlug-page_id/edit/saas/google-sheets-plugin/api/saas_api_id/add",
-            initialState: state,
-            featureFlags: FeatureFlags,
-            sagasToRun: sagasToRunForTests,
-          },
-        );
+      const { container, getByTestId, getByText } = render(
+        <Route path={BUILDER_PATH}>
+          <IDE />
+        </Route>,
+        {
+          url: "/app/applicationSlug/pageSlug-page_id/edit/saas/google-sheets-plugin/api/saas_api_id/add",
+          initialState: state,
+          featureFlags: FeatureFlags,
+          sagasToRun: sagasToRunForTests,
+        },
+      );
 
       screen.logTestingPlaygroundURL(container);
 
-      await userEvent.click(getByRole("tab", { name: "Query" }));
-
-      // There will be 2 Query3 text (editor tab and Editor form)
-      expect(getAllByText("Sheets3").length).toEqual(2);
-      // Tabs active state
-      expect(
-        getByTestId("t--ide-tab-Sheets3").classList.contains("active"),
-      ).toBe(false);
-      // Check if the form is rendered
-      getByTestId("t--action-form-SAAS");
-
-      // Check if run button is visible
-      getByRole("button", { name: /run/i });
       // Create options are rendered
       getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
       getByText("New datasource");
       getByText("REST API");
+      // Check new tab presence
+      const newTab = getByTestId("t--ide-tab-new");
+      expect(newTab).not.toBeNull();
       // Close button is rendered
-      getByRole("button", { name: "Close pane" });
+      expect(
+        newTab.querySelector("[data-testid='t--tab-close-btn']"),
+      ).not.toBeNull();
     });
     it("Renders Google Sheets add routes in Split Screen", async () => {
       const page = PageFactory.build();
@@ -668,18 +647,17 @@ describe("IDE URL rendering of Queries", () => {
         ideView: EditorViewMode.SplitScreen,
       });
 
-      const { getAllByText, getByRole, getByTestId, getByText, queryByTestId } =
-        render(
-          <Route path={BUILDER_PATH}>
-            <IDE />
-          </Route>,
-          {
-            url: "/app/applicationSlug/pageSlug-page_id/edit/saas/google-sheets-plugin/api/saas_api_id/add",
-            sagasToRun: sagasToRunForTests,
-            initialState: state,
-            featureFlags: FeatureFlags,
-          },
-        );
+      const { getAllByText, getByTestId, getByText, queryByTestId } = render(
+        <Route path={BUILDER_PATH}>
+          <IDE />
+        </Route>,
+        {
+          url: "/app/applicationSlug/pageSlug-page_id/edit/saas/google-sheets-plugin/api/saas_api_id/add",
+          sagasToRun: sagasToRunForTests,
+          initialState: state,
+          featureFlags: FeatureFlags,
+        },
+      );
 
       // There will be 1 Api4 text ( The tab )
       expect(getAllByText("Sheets4").length).toEqual(1);
@@ -688,11 +666,7 @@ describe("IDE URL rendering of Queries", () => {
         getByTestId("t--ide-tab-Sheets4").classList.contains("active"),
       ).toBe(false);
       // Add button active state
-      expect(
-        getByTestId("t--ide-split-screen-add-button").getAttribute(
-          "data-selected",
-        ),
-      ).toBe("true");
+      expect(queryByTestId("t--ide-tabs-add-button")).toBeNull();
 
       // Check if the form is not rendered
       expect(queryByTestId("t--action-form-SAAS")).toBeNull();
@@ -700,8 +674,13 @@ describe("IDE URL rendering of Queries", () => {
       getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
       getByText("New datasource");
       getByText("REST API");
+      // Check new tab presence
+      const newTab = getByTestId("t--ide-tab-new");
+      expect(newTab).not.toBeNull();
       // Close button is rendered
-      getByRole("button", { name: "Close pane" });
+      expect(
+        newTab.querySelector("[data-testid='t--tab-close-btn']"),
+      ).not.toBeNull();
     });
   });
 });
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
index dda055665ae..239492601b9 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
@@ -1,13 +1,18 @@
 import React, { useCallback } from "react";
-import { Flex } from "design-system";
+import { Button, Flex, Text } from "design-system";
 import { useSelector } from "react-redux";
+import styled from "styled-components";
 
 import history from "utils/history";
 import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector";
 import UIEntitySidebar from "pages/Editor/widgetSidebar/UIEntitySidebar";
 import { widgetListURL } from "@appsmith/RouteBuilder";
-import { EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
-import SegmentAddHeader from "../components/SegmentAddHeader";
+import { EDITOR_PANE_TEXTS, createMessage } from "@appsmith/constants/messages";
+
+const Container = styled(Flex)`
+  padding-right: var(--ads-v2-spaces-2);
+  background-color: var(--ads-v2-color-gray-50);
+`;
 
 const AddWidgets = (props: { focusSearchInput?: boolean }) => {
   const pageId = useSelector(getCurrentPageId) as string;
@@ -18,10 +23,27 @@ const AddWidgets = (props: { focusSearchInput?: boolean }) => {
 
   return (
     <>
-      <SegmentAddHeader
-        onCloseClick={closeButtonClickHandler}
-        titleMessage={EDITOR_PANE_TEXTS.widgets_create_tab_title}
-      />
+      <Container
+        alignItems="center"
+        borderBottom={"1px solid var(--ads-v2-color-border)"}
+        data-testid="t--ide-add-pane"
+        justifyContent="space-between"
+        px="spaces-4"
+        py="spaces-2"
+      >
+        <Text color="var(--ads-v2-color-fg)" kind="heading-xs">
+          {createMessage(EDITOR_PANE_TEXTS.widgets_create_tab_title)}
+        </Text>
+        <Button
+          aria-label="Close pane"
+          data-testid="t--add-pane-close-icon"
+          isIconButton
+          kind={"tertiary"}
+          onClick={closeButtonClickHandler}
+          size={"sm"}
+          startIcon={"close-line"}
+        />
+      </Container>
       <Flex flexDirection="column" gap="spaces-3" overflowX="auto">
         <UIEntitySidebar focusSearchInput={props.focusSearchInput} isActive />
       </Flex>
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx
index ca8897e4330..1327d92a466 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx
@@ -1,40 +1,24 @@
 import React from "react";
-import { Button, Flex, Text } from "design-system";
+import { Flex, Text } from "design-system";
 import { createMessage } from "@appsmith/constants/messages";
-import styled from "styled-components";
 
 interface Props {
   titleMessage: () => string;
-  onCloseClick: () => void;
 }
 
-const Container = styled(Flex)`
-  padding-right: var(--ads-v2-spaces-2);
-  background-color: var(--ads-v2-color-gray-50);
-`;
-
 const SegmentAddHeader = (props: Props) => {
   return (
-    <Container
+    <Flex
       alignItems="center"
-      borderBottom={"1px solid var(--ads-v2-color-border)"}
       justifyContent="space-between"
-      px="spaces-4"
+      pl="spaces-4"
+      pr="spaces-2"
       py="spaces-2"
     >
       <Text color="var(--ads-v2-color-fg)" kind="heading-xs">
         {createMessage(props.titleMessage)}
       </Text>
-      <Button
-        aria-label="Close pane"
-        data-testid="t--add-pane-close-icon"
-        isIconButton
-        kind={"tertiary"}
-        onClick={props.onCloseClick}
-        size={"sm"}
-        startIcon={"close-line"}
-      />
-    </Container>
+    </Flex>
   );
 };
 
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx
index 2a0eda156ae..d4784c4aefc 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx
@@ -1,25 +1,15 @@
-import React, { useCallback } from "react";
-import { Button, Flex, SegmentedControl, Tooltip } from "design-system";
-import {
-  createMessage,
-  EDITOR_PANE_TEXTS,
-  MAXIMIZE_BUTTON_TOOLTIP,
-} from "@appsmith/constants/messages";
-import {
-  EditorEntityTab,
-  EditorViewMode,
-} from "@appsmith/entities/IDE/constants";
+import React from "react";
+import { Button, Flex, SegmentedControl } from "design-system";
+import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
+import { EditorEntityTab } from "@appsmith/entities/IDE/constants";
 import history from "utils/history";
 import { globalAddURL } from "@appsmith/RouteBuilder";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector";
 import { useCurrentEditorState, useSegmentNavigation } from "../../hooks";
 import styled from "styled-components";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
-import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
-import AnalyticsUtil from "@appsmith/utils/AnalyticsUtil";
-import { setIdeEditorViewMode } from "actions/ideActions";
 
 const Container = styled(Flex)`
   #editor-pane-segment-control {
@@ -33,12 +23,9 @@ const Container = styled(Flex)`
 `;
 
 const SegmentedHeader = () => {
-  const dispatch = useDispatch();
   const isGlobalAddPaneEnabled = useFeatureFlag(
     FEATURE_FLAG.release_global_add_pane_enabled,
   );
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
-  const editorMode = useSelector(getIDEViewMode);
   const pageId = useSelector(getCurrentPageId);
   const onAddButtonClick = () => {
     history.push(globalAddURL({ pageId }));
@@ -46,13 +33,6 @@ const SegmentedHeader = () => {
   const { segment } = useCurrentEditorState();
   const { onSegmentChange } = useSegmentNavigation();
 
-  const handleMaximizeButtonClick = useCallback(() => {
-    AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
-      to: EditorViewMode.FullScreen,
-    });
-    dispatch(setIdeEditorViewMode(EditorViewMode.FullScreen));
-  }, []);
-
   return (
     <Container
       alignItems="center"
@@ -91,20 +71,6 @@ const SegmentedHeader = () => {
           startIcon="add-line"
         />
       ) : null}
-      {isSideBySideEnabled &&
-      editorMode === EditorViewMode.SplitScreen &&
-      segment !== EditorEntityTab.UI ? (
-        <Tooltip content={createMessage(MAXIMIZE_BUTTON_TOOLTIP)}>
-          <Button
-            data-testid="t--ide-maximize"
-            id="editor-mode-maximize"
-            isIconButton
-            kind="tertiary"
-            onClick={handleMaximizeButtonClick}
-            startIcon="maximize-v3"
-          />
-        </Tooltip>
-      ) : null}
     </Container>
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/types/AddProps.ts b/app/client/src/pages/Editor/IDE/EditorPane/types/AddProps.ts
new file mode 100644
index 00000000000..bb8034901bb
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/types/AddProps.ts
@@ -0,0 +1,6 @@
+import type { FlexProps } from "design-system";
+
+export interface AddProps {
+  containerProps?: FlexProps;
+  innerContainerProps?: FlexProps;
+}
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/utils.ts b/app/client/src/pages/Editor/IDE/EditorPane/utils.ts
new file mode 100644
index 00000000000..cb43762c7af
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/utils.ts
@@ -0,0 +1,3 @@
+export const createAddClassName = (name: string) => {
+  return "t--datasoucre-create-option-" + name.toLowerCase().replace(/ /g, "_");
+};
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/AddButton.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/AddButton.tsx
new file mode 100644
index 00000000000..b79340e5d6d
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/AddButton.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Flex, Spinner, Button } from "design-system";
+import { useCurrentEditorState, useIDETabClickHandlers } from "../hooks";
+import { useIsJSAddLoading } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
+import { EditorEntityTabState } from "@appsmith/entities/IDE/constants";
+
+const AddButton = () => {
+  const { addClickHandler } = useIDETabClickHandlers();
+  const isJSLoading = useIsJSAddLoading();
+  const { segmentMode } = useCurrentEditorState();
+
+  if (segmentMode === EditorEntityTabState.Add) {
+    return null;
+  }
+  if (isJSLoading) {
+    return (
+      <Flex px="spaces-2">
+        <Spinner size="md" />
+      </Flex>
+    );
+  }
+  return (
+    <Button
+      className="!min-w-[24px]"
+      data-testid="t--ide-tabs-add-button"
+      id="tabs-add-toggle"
+      isIconButton
+      kind="tertiary"
+      onClick={addClickHandler}
+      size="sm"
+      startIcon="add-line"
+    />
+  );
+};
+
+export { AddButton };
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
index faa91e80faa..c15352100af 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
@@ -3,22 +3,28 @@ import { useLocation } from "react-router";
 import clsx from "classnames";
 import { Flex, Icon, ScrollArea } from "design-system";
 
-import type { EntityItem } from "@appsmith/entities/IDE/constants";
+import {
+  EditorEntityTab,
+  EditorEntityTabState,
+  type EntityItem,
+} from "@appsmith/entities/IDE/constants";
 import {
   StyledTab,
   TabIconContainer,
   TabTextContainer,
 } from "./StyledComponents";
 import { identifyEntityFromPath } from "navigation/FocusEntity";
+import { useCurrentEditorState } from "../hooks";
 
 interface Props {
   tabs: EntityItem[];
   navigateToTab: (tab: EntityItem) => void;
-  onClose: (actionId: string) => void;
+  onClose: (actionId?: string) => void;
 }
 
 const FileTabs = (props: Props) => {
   const { navigateToTab, onClose, tabs } = props;
+  const { segment, segmentMode } = useCurrentEditorState();
 
   const location = useLocation();
 
@@ -31,9 +37,9 @@ const FileTabs = (props: Props) => {
         inline: "nearest",
       });
     }
-  }, [tabs]);
+  }, [tabs, segmentMode]);
 
-  const onCloseClick = (e: React.MouseEvent, id: string) => {
+  const onCloseClick = (e: React.MouseEvent, id?: string) => {
     e.stopPropagation();
     onClose(id);
   };
@@ -72,6 +78,24 @@ const FileTabs = (props: Props) => {
             />
           </StyledTab>
         ))}
+        {/* New Tab */}
+        {segmentMode === EditorEntityTabState.Add ? (
+          <StyledTab
+            className={clsx("editor-tab", "active")}
+            data-testid={`t--ide-tab-new`}
+          >
+            <TabTextContainer>
+              New {segment === EditorEntityTab.JS ? "JS" : "Query"}
+            </TabTextContainer>
+            {/* not using button component because of the size not matching design */}
+            <Icon
+              className="tab-close rounded-[4px] hover:bg-[var(--ads-v2-colors-action-tertiary-surface-hover-bg)] cursor-pointer p-[2px]"
+              data-testid="t--tab-close-btn"
+              name="close-line"
+              onClick={(e) => onCloseClick(e)}
+            />
+          </StyledTab>
+        ) : null}
       </Flex>
     </ScrollArea>
   );
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/FullScreenTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/FullScreenTabs.tsx
index fc5f292fd96..f9a3f14c5f0 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/FullScreenTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/FullScreenTabs.tsx
@@ -16,6 +16,7 @@ import {
   createMessage,
 } from "@appsmith/constants/messages";
 import AnalyticsUtil from "@appsmith/utils/AnalyticsUtil";
+import { AddButton } from "./AddButton";
 
 const FullScreenTabs = () => {
   const dispatch = useDispatch();
@@ -44,12 +45,13 @@ const FullScreenTabs = () => {
         onClose={closeClickHandler}
         tabs={files}
       />
+      {files.length > 0 ? <AddButton /> : null}
       <Tooltip
         content={createMessage(MINIMIZE_BUTTON_TOOLTIP)}
         placement="bottomRight"
       >
         <Button
-          className="ml-auto"
+          className="ml-auto !min-w-[24px]"
           data-testid="t--ide-minimize"
           id="editor-mode-minimize"
           isIconButton
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/SearchableFilesList.test.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/SearchableFilesList.test.tsx
index 0b946d6d652..fe495b5ede2 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/SearchableFilesList.test.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/SearchableFilesList.test.tsx
@@ -33,7 +33,6 @@ describe("SearchableFilesList", () => {
       <SearchableFilesList
         allItems={allItems}
         navigateToTab={navigateToTabMock}
-        openTabs={openTabs}
       />,
     );
   });
@@ -43,7 +42,6 @@ describe("SearchableFilesList", () => {
       <SearchableFilesList
         allItems={allItems}
         navigateToTab={navigateToTabMock}
-        openTabs={[]}
       />,
     );
 
@@ -62,7 +60,6 @@ describe("SearchableFilesList", () => {
       <SearchableFilesList
         allItems={allItems}
         navigateToTab={navigateToTabMock}
-        openTabs={openTabs}
       />,
     );
 
@@ -82,7 +79,6 @@ describe("SearchableFilesList", () => {
       <SearchableFilesList
         allItems={allItems}
         navigateToTab={navigateToTabMock}
-        openTabs={openTabs}
       />,
     );
 
@@ -102,7 +98,6 @@ describe("SearchableFilesList", () => {
       <SearchableFilesList
         allItems={allItems}
         navigateToTab={navigateToTabMock}
-        openTabs={openTabs}
       />,
     );
 
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/SearchableFilesList.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/SearchableFilesList.tsx
index 340e66d6424..8b058b55ebd 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/SearchableFilesList.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/SearchableFilesList.tsx
@@ -17,7 +17,6 @@ import { ListIconContainer, TabTextContainer } from "./StyledComponents";
 
 interface Props {
   allItems: EntityItem[];
-  openTabs: EntityItem[];
   navigateToTab: (item: EntityItem) => void;
 }
 
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
index 889e6fe89ac..dd4f490b1bc 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
@@ -1,75 +1,76 @@
-import React from "react";
-import { Flex, Spinner, ToggleButton } from "design-system";
+import React, { useCallback } from "react";
 
 import FileTabs from "./FileTabs";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
 import Container from "./Container";
 import { useCurrentEditorState, useIDETabClickHandlers } from "../hooks";
 import {
   EditorEntityTab,
-  EditorEntityTabState,
   EditorViewMode,
 } from "@appsmith/entities/IDE/constants";
-import { useIsJSAddLoading } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
 import { TabSelectors } from "./constants";
 import { Announcement } from "../EditorPane/components/Announcement";
 import { SearchableFilesList } from "./SearchableFilesList";
+import { AddButton } from "./AddButton";
+import { Button, Tooltip } from "design-system";
+import {
+  MAXIMIZE_BUTTON_TOOLTIP,
+  createMessage,
+} from "@appsmith/constants/messages";
+import AnalyticsUtil from "@appsmith/utils/AnalyticsUtil";
+import { setIdeEditorViewMode } from "actions/ideActions";
 
 const SplitScreenTabs = () => {
+  const dispatch = useDispatch();
   const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
   const ideViewMode = useSelector(getIDEViewMode);
-  const { segment, segmentMode } = useCurrentEditorState();
-  const { addClickHandler, closeClickHandler, tabClickHandler } =
-    useIDETabClickHandlers();
-  const isJSLoading = useIsJSAddLoading();
+  const { segment } = useCurrentEditorState();
+  const { closeClickHandler, tabClickHandler } = useIDETabClickHandlers();
 
   const tabsConfig = TabSelectors[segment];
 
   const files = useSelector(tabsConfig.tabsSelector);
   const allFilesList = useSelector(tabsConfig.listSelector);
 
+  const handleMaximizeButtonClick = useCallback(() => {
+    AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
+      to: EditorViewMode.FullScreen,
+    });
+    dispatch(setIdeEditorViewMode(EditorViewMode.FullScreen));
+  }, []);
+
   if (!isSideBySideEnabled) return null;
   if (ideViewMode === EditorViewMode.FullScreen) return null;
   if (segment === EditorEntityTab.UI) return null;
 
-  const AddButton = () => {
-    if (isJSLoading) {
-      return (
-        <Flex px="spaces-2">
-          <Spinner size="md" />
-        </Flex>
-      );
-    }
-    return (
-      <ToggleButton
-        data-testid="t--ide-split-screen-add-button"
-        icon="add-line"
-        id="tabs-add-toggle"
-        isSelected={segmentMode === EditorEntityTabState.Add}
-        onClick={addClickHandler}
-        size="md"
-      />
-    );
-  };
-
   return (
     <>
-      {files.length > 0 ? (
-        <Container>
-          <SearchableFilesList
-            allItems={allFilesList}
-            navigateToTab={tabClickHandler}
-            openTabs={files}
-          />
-          <FileTabs
-            navigateToTab={tabClickHandler}
-            onClose={closeClickHandler}
-            tabs={files}
+      {/* {files.length > 0 ? ( */}
+      <Container>
+        <SearchableFilesList
+          allItems={allFilesList}
+          navigateToTab={tabClickHandler}
+        />
+        <FileTabs
+          navigateToTab={tabClickHandler}
+          onClose={closeClickHandler}
+          tabs={files}
+        />
+        {files.length > 0 ? <AddButton /> : null}
+
+        <Tooltip content={createMessage(MAXIMIZE_BUTTON_TOOLTIP)}>
+          <Button
+            className="ml-auto !min-w-[24px]"
+            data-testid="t--ide-maximize"
+            id="editor-mode-maximize"
+            isIconButton
+            kind="tertiary"
+            onClick={handleMaximizeButtonClick}
+            startIcon="maximize-v3"
           />
-          <AddButton />
-        </Container>
-      ) : null}
+        </Tooltip>
+      </Container>
       <Announcement />
     </>
   );
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx
index 51cbf22ce2e..d281a6bfbdb 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx
@@ -56,6 +56,10 @@ export const StyledTab = styled(Flex)`
   &:hover > .tab-close {
     visibility: visible;
   }
+
+  &.active > .tab-close {
+    visibility: visible;
+  }
 `;
 
 export const TabTextContainer = styled.span`
diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts
index 9ef34a30803..cd2b4e9a2db 100644
--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@@ -233,16 +233,16 @@ export function useWidgetSelectionBlockListener() {
 
 export const useIDETabClickHandlers = () => {
   const dispatch = useDispatch();
-  const onJSAddClick = useJSAdd();
-  const onQueryAddClick = useQueryAdd();
+  const { closeAddJS, openAddJS } = useJSAdd();
+  const { closeAddQuery, openAddQuery } = useQueryAdd();
   const { segment, segmentMode } = useCurrentEditorState();
   const tabsConfig = TabSelectors[segment];
   const pageId = useSelector(getCurrentPageId);
 
   const addClickHandler = useCallback(() => {
-    if (segment === EditorEntityTab.JS) onJSAddClick();
-    if (segment === EditorEntityTab.QUERIES) onQueryAddClick();
-  }, [segment, segmentMode, onQueryAddClick, onJSAddClick]);
+    if (segment === EditorEntityTab.JS) openAddJS();
+    if (segment === EditorEntityTab.QUERIES) openAddQuery();
+  }, [segment, segmentMode, openAddQuery, openAddJS]);
 
   const tabClickHandler = useCallback(
     (item: EntityItem) => {
@@ -255,7 +255,11 @@ export const useIDETabClickHandlers = () => {
   );
 
   const closeClickHandler = useCallback(
-    (actionId: string) => {
+    (actionId: string | undefined) => {
+      if (!actionId) {
+        // handle JS
+        return segment === EditorEntityTab.JS ? closeAddJS() : closeAddQuery();
+      }
       if (segment === EditorEntityTab.JS)
         dispatch(closeJSActionTab({ id: actionId, parentId: pageId }));
       if (segment === EditorEntityTab.QUERIES)
diff --git a/app/client/src/pages/Editor/JSEditor/JSAddState.tsx b/app/client/src/pages/Editor/JSEditor/JSAddState.tsx
new file mode 100644
index 00000000000..6f10d21951f
--- /dev/null
+++ b/app/client/src/pages/Editor/JSEditor/JSAddState.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Flex } from "design-system";
+import AddJS from "pages/Editor/IDE/EditorPane/JS/Add";
+
+const JSAddState = () => {
+  return (
+    <Flex justifyContent="center">
+      <AddJS
+        containerProps={{
+          px: "spaces-4",
+          py: "spaces-7",
+        }}
+        innerContainerProps={{
+          minWidth: "30vw",
+        }}
+      />
+    </Flex>
+  );
+};
+
+export { JSAddState };
diff --git a/app/client/src/pages/Editor/QueryEditor/QueriesAddState.tsx b/app/client/src/pages/Editor/QueryEditor/QueriesAddState.tsx
new file mode 100644
index 00000000000..97d7dfa99ac
--- /dev/null
+++ b/app/client/src/pages/Editor/QueryEditor/QueriesAddState.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Flex } from "design-system";
+import AddQuery from "pages/Editor/IDE/EditorPane/Query/Add";
+
+const QueriesAddState = () => {
+  return (
+    <Flex justifyContent="center">
+      <AddQuery
+        containerProps={{
+          px: "spaces-4",
+          py: "spaces-7",
+        }}
+        innerContainerProps={{
+          minWidth: "30vw",
+        }}
+      />
+    </Flex>
+  );
+};
+
+export { QueriesAddState };