diff --git a/app/client/cypress/e2e/Regression/ClientSide/AppNavigation/AppNavigationWithGit_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/AppNavigation/AppNavigationWithGit_spec.ts
index d89206619482..036ac24618ff 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/AppNavigation/AppNavigationWithGit_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/AppNavigation/AppNavigationWithGit_spec.ts
@@ -28,6 +28,7 @@ describe(
           appSettings.locators._navigationSettings._navStyle,
           "Inline",
         );
+        AppSidebar.navigate(AppSidebarButton.Editor);
         agHelper.GetNClick(locators._previewModeToggle("edit"));
         agHelper.GetNClick(appSettings.locators._topInlineMoreButton);
         agHelper.GetNClickByContains(
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts
index 849990ce76d5..641aa0de5b68 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts
@@ -225,6 +225,7 @@ describe(
       agHelper.GetNClick(propPane._checkbox, 1, true);
       PageList.VerifyIsCurrentPage("Page2");
       agHelper.GetNClick(locators._exitPreviewMode);
+      EditorNavigation.SelectEntityByName("Page1", EntityType.Page);
 
       // Deploy mode
       deployMode.DeployApp();
diff --git a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres2_Spec.ts b/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres2_Spec.ts
index c054d5f54947..1dfb8b5e19a2 100644
--- a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres2_Spec.ts
+++ b/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres2_Spec.ts
@@ -608,20 +608,11 @@ describe(
       table.ReadTableRowColumnData(0, 0, "v2", 2000).then(($cellData) => {
         expect($cellData).not.eq("159180"); //Deleted record Store_ID
       });
-    });
-
-    it("15. Validate Deletion of the Newly Created Page - Vessels", () => {
       deployMode.NavigateBacktoEditor();
       table.WaitUntilTableLoad(0, 0, "v2");
-      //Delete the test data
-      entityExplorer.ActionContextMenuByEntityName({
-        entityNameinLeftSidebar: "Public.vessels",
-        action: "Delete",
-        entityType: entityItems.Page,
-      });
     });
 
-    it("16. Validate Drop of the Newly Created - Vessels - Table from Postgres datasource", () => {
+    it("15. Validate Drop of the Newly Created - Vessels - Table from Postgres datasource", () => {
       const deleteTblQuery = "DROP TABLE Vessels;";
       dataSources.CreateQueryForDS(dsName, deleteTblQuery, "DropVessels");
       agHelper.FocusElement(locators._codeMirrorTextArea);
@@ -630,7 +621,7 @@ describe(
       dataSources.AssertTableInVirtuosoList(dsName, "public.vessels", false);
     });
 
-    it("17. Verify application does not break when user runs the query with wrong table name", function () {
+    it("16. Verify application does not break when user runs the query with wrong table name", function () {
       EditorNavigation.SelectEntityByName("DropVessels", EntityType.Query);
       dataSources.RunQuery({ toValidateResponse: false });
       cy.wait("@postExecute").then(({ response }) => {
@@ -645,7 +636,7 @@ describe(
       });
     });
 
-    it("18. Verify Deletion of the datasource when Pages/Actions associated are not removed yet", () => {
+    it("17. Verify Deletion of the datasource when Pages/Actions associated are not removed yet", () => {
       deployMode.DeployApp();
       deployMode.NavigateBacktoEditor();
       dataSources.DeleteDatasourceFromWithinDS(dsName, 409);
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 e678d5d3f38f..e2ae6fe61862 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,12 +7,9 @@ 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 { 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 history from "utils/history";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
 import { useModuleOptions } from "@appsmith/utils/moduleInstanceHelpers";
@@ -43,7 +40,7 @@ export const useJSAdd = () => {
   const closeAddJS = useCallback(() => {
     const url = getJSUrl(currentEntityInfo, false);
     history.push(url);
-  }, [pageId, currentEntityInfo]);
+  }, [currentEntityInfo]);
 
   return { openAddJS, closeAddJS };
 };
@@ -77,41 +74,25 @@ export const useGroupedAddJsOperations = (): GroupedAddOperations => {
   ];
 };
 
-export const useJSSegmentRoutes = (path: string): UseRoutes => {
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
-  const editorMode = useSelector(getIDEViewMode);
-  if (isSideBySideEnabled && editorMode === EditorViewMode.SplitScreen) {
-    return [
-      {
-        exact: true,
-        key: "AddJS",
-        component: AddJS,
-        path: [`${path}${ADD_PATH}`, `${path}/:baseCollectionId${ADD_PATH}`],
-      },
-      {
-        exact: true,
-        key: "JSEditor",
-        component: JSEditor,
-        path: [path + "/:baseCollectionId"],
-      },
-      {
-        key: "JSEmpty",
-        component: JSBlankState,
-        exact: true,
-        path: [path],
-      },
-    ];
-  }
+export const useJSEditorRoutes = (path: string): UseRoutes => {
   return [
     {
-      exact: false,
-      key: "ListJS",
-      component: ListJS,
-      path: [
-        path,
-        `${path}${ADD_PATH}`,
-        `${path}/:baseCollectionId${ADD_PATH}`,
-      ],
+      exact: true,
+      key: "AddJS",
+      component: AddJS,
+      path: [`${path}${ADD_PATH}`, `${path}/:baseCollectionId${ADD_PATH}`],
+    },
+    {
+      exact: true,
+      key: "JSEditor",
+      component: JSEditor,
+      path: [path + "/:baseCollectionId"],
+    },
+    {
+      key: "JSEmpty",
+      component: JSBlankState,
+      exact: true,
+      path: [path],
     },
   ];
 };
diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
index 3b6296854516..4a1905c3dd42 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
+++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
@@ -15,7 +15,6 @@ import type { ActionOperation } from "components/editorComponents/GlobalSearch/u
 import { SEARCH_ITEM_TYPES } from "components/editorComponents/GlobalSearch/utils";
 import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import { getQueryUrl } from "@appsmith/pages/Editor/IDE/EditorPane/Query/utils";
-import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
 import {
   ADD_PATH,
   API_EDITOR_ID_PATH,
@@ -26,22 +25,18 @@ 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 { 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 { useCurrentEditorState } from "pages/Editor/IDE/hooks";
 import { createAddClassName } from "pages/Editor/IDE/EditorPane/utils";
 import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
 
 export const useQueryAdd = () => {
   const location = useLocation();
   const currentEntityInfo = identifyEntityFromPath(location.pathname);
-  const { segmentMode } = useCurrentEditorState();
 
   const openAddQuery = useCallback(() => {
     if (currentEntityInfo.entity === FocusEntity.QUERY_ADD) {
@@ -50,13 +45,13 @@ export const useQueryAdd = () => {
     let url = "";
     url = getQueryUrl(currentEntityInfo);
     history.push(url);
-  }, [currentEntityInfo, segmentMode, location]);
+  }, [currentEntityInfo]);
 
   const closeAddQuery = useCallback(() => {
     let url = "";
     url = getQueryUrl(currentEntityInfo, false);
     history.push(url);
-  }, [currentEntityInfo, segmentMode, location]);
+  }, [currentEntityInfo]);
 
   return { openAddQuery, closeAddQuery };
 };
@@ -107,58 +102,45 @@ export const useGroupedAddQueryOperations = (): GroupedAddOperations => {
   return groups;
 };
 
-export const useQuerySegmentRoutes = (path: string): UseRoutes => {
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
-  const editorMode = useSelector(getIDEViewMode);
-
-  if (isSideBySideEnabled && editorMode === EditorViewMode.SplitScreen) {
-    return [
-      {
-        key: "ApiEditor",
-        component: ApiEditor,
-        exact: true,
-        path: [
-          BUILDER_PATH + API_EDITOR_ID_PATH,
-          BUILDER_CUSTOM_PATH + API_EDITOR_ID_PATH,
-          BUILDER_PATH_DEPRECATED + API_EDITOR_ID_PATH,
-        ],
-      },
-      {
-        key: "AddQuery",
-        exact: true,
-        component: AddQuery,
-        path: [`${path}${ADD_PATH}`, `${path}/:baseQueryId${ADD_PATH}`],
-      },
-      {
-        key: "SAASEditor",
-        component: QueryEditor,
-        exact: true,
-        path: [
-          BUILDER_PATH + SAAS_EDITOR_API_ID_PATH,
-          BUILDER_CUSTOM_PATH + SAAS_EDITOR_API_ID_PATH,
-          BUILDER_PATH_DEPRECATED + SAAS_EDITOR_API_ID_PATH,
-        ],
-      },
-      {
-        key: "QueryEditor",
-        component: QueryEditor,
-        exact: true,
-        path: [path + "/:baseQueryId"],
-      },
-      {
-        key: "QueryEmpty",
-        component: QueriesBlankState,
-        exact: true,
-        path: [path],
-      },
-    ];
-  }
+export const useQueryEditorRoutes = (path: string): UseRoutes => {
   return [
     {
-      key: "ListQuery",
-      exact: false,
-      component: ListQuery,
-      path: [path, `${path}${ADD_PATH}`, `${path}/:baseQueryId${ADD_PATH}`],
+      key: "ApiEditor",
+      component: ApiEditor,
+      exact: true,
+      path: [
+        BUILDER_PATH + API_EDITOR_ID_PATH,
+        BUILDER_CUSTOM_PATH + API_EDITOR_ID_PATH,
+        BUILDER_PATH_DEPRECATED + API_EDITOR_ID_PATH,
+      ],
+    },
+    {
+      key: "AddQuery",
+      exact: true,
+      component: AddQuery,
+      path: [`${path}${ADD_PATH}`, `${path}/:baseQueryId${ADD_PATH}`],
+    },
+    {
+      key: "SAASEditor",
+      component: QueryEditor,
+      exact: true,
+      path: [
+        BUILDER_PATH + SAAS_EDITOR_API_ID_PATH,
+        BUILDER_CUSTOM_PATH + SAAS_EDITOR_API_ID_PATH,
+        BUILDER_PATH_DEPRECATED + SAAS_EDITOR_API_ID_PATH,
+      ],
+    },
+    {
+      key: "QueryEditor",
+      component: QueryEditor,
+      exact: true,
+      path: [path + "/:baseQueryId"],
+    },
+    {
+      key: "QueryEmpty",
+      component: QueriesBlankState,
+      exact: true,
+      path: [path],
     },
   ];
 };
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 94ecc599a891..922209dc8c35 100644
--- a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
+++ b/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
@@ -24,10 +24,6 @@ import {
 } from "constants/routes";
 import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab";
 import OnboardingChecklist from "pages/Editor/FirstTimeUserOnboarding/Checklist";
-import ApiEditor from "pages/Editor/APIEditor";
-import QueryEditor from "pages/Editor/QueryEditor";
-import JSEditor from "pages/Editor/JSEditor";
-import ListView from "pages/Editor/SaaSEditor/ListView";
 import {
   SAAS_EDITOR_API_ID_ADD_PATH,
   SAAS_EDITOR_API_ID_PATH,
@@ -39,13 +35,8 @@ import DataSourceEditor from "pages/Editor/DataSourceEditor";
 import DatasourceBlankState from "pages/Editor/DataSourceEditor/DatasourceBlankState";
 import GeneratePage from "pages/Editor/GeneratePage";
 import type { RouteProps } from "react-router";
-import { JSBlankState } from "pages/Editor/JSEditor/JSBlankState";
-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";
+import { combinedPreviewModeSelector } from "selectors/editorSelectors";
 
 export interface RouteReturnType extends RouteProps {
   key: string;
@@ -57,84 +48,7 @@ export interface RouteReturnType extends RouteProps {
  */
 
 function useRoutes(path: string): RouteReturnType[] {
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
-  const editorMode = useSelector(getIDEViewMode);
-
-  if (isSideBySideEnabled && editorMode === EditorViewMode.SplitScreen) {
-    return [
-      {
-        key: "Canvas",
-        component: WidgetsEditor,
-        exact: true,
-        path: [
-          BUILDER_PATH_DEPRECATED,
-          BUILDER_PATH,
-          BUILDER_CUSTOM_PATH,
-          `${BUILDER_PATH_DEPRECATED}${ADD_PATH}`,
-          `${BUILDER_PATH}${ADD_PATH}`,
-          `${BUILDER_CUSTOM_PATH}${ADD_PATH}`,
-          `${path}${ADD_PATH}`,
-          `${path}${WIDGETS_EDITOR_BASE_PATH}`,
-          `${path}${WIDGETS_EDITOR_ID_PATH}`,
-          `${path}${WIDGETS_EDITOR_ID_PATH}${ADD_PATH}`,
-          `${path}${API_EDITOR_ID_PATH}`,
-          `${path}${API_EDITOR_ID_PATH}${LIST_PATH}`,
-          `${path}${API_EDITOR_ID_ADD_PATH}`,
-          `${path}${QUERIES_EDITOR_BASE_PATH}`,
-          `${path}${QUERIES_EDITOR_BASE_PATH}${ADD_PATH}`,
-          `${path}${QUERIES_EDITOR_ID_PATH}`,
-          `${path}${QUERIES_EDITOR_ID_ADD_PATH}`,
-          `${path}${QUERIES_EDITOR_ID_PATH}${LIST_PATH}`,
-          `${path}${JS_COLLECTION_EDITOR_PATH}`,
-          `${path}${JS_COLLECTION_EDITOR_PATH}${ADD_PATH}`,
-          `${path}${JS_COLLECTION_ID_PATH}`,
-          `${path}${JS_COLLECTION_ID_PATH}${LIST_PATH}`,
-          `${path}${SAAS_EDITOR_PATH}`,
-          `${path}${SAAS_EDITOR_API_ID_PATH}`,
-          `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
-          `${path}${APP_LIBRARIES_EDITOR_PATH}`,
-          `${path}${APP_SETTINGS_EDITOR_PATH}`,
-        ],
-      },
-      {
-        key: "Datasource Create and Active",
-        component: CreateNewDatasourceTab,
-        exact: true,
-        path: `${path}${INTEGRATION_EDITOR_PATH}`,
-      },
-      {
-        key: "OnboardingChecklist",
-        component: OnboardingChecklist,
-        exact: true,
-        path: `${path}${BUILDER_CHECKLIST_PATH}`,
-      },
-      {
-        key: "DatasourceEditor",
-        component: DataSourceEditor,
-        exact: true,
-        path: `${path}${DATA_SOURCES_EDITOR_ID_PATH}`,
-      },
-      {
-        key: "DatasourceBlankState",
-        component: DatasourceBlankState,
-        exact: true,
-        path: `${path}${DATA_SOURCES_EDITOR_LIST_PATH}`,
-      },
-      {
-        key: "SAASDatasourceEditor",
-        component: DatasourceForm,
-        exact: true,
-        path: `${path}${SAAS_EDITOR_DATASOURCE_ID_PATH}`,
-      },
-      {
-        key: "GeneratePage",
-        component: GeneratePage,
-        exact: true,
-        path: `${path}${GENERATE_TEMPLATE_FORM_PATH}`,
-      },
-    ];
-  }
-
+  const isPreviewMode = useSelector(combinedPreviewModeSelector);
   return [
     {
       key: "Canvas",
@@ -151,105 +65,58 @@ function useRoutes(path: string): RouteReturnType[] {
         `${path}${WIDGETS_EDITOR_BASE_PATH}`,
         `${path}${WIDGETS_EDITOR_ID_PATH}`,
         `${path}${WIDGETS_EDITOR_ID_PATH}${ADD_PATH}`,
+        `${path}${API_EDITOR_ID_PATH}`,
+        `${path}${API_EDITOR_ID_PATH}${LIST_PATH}`,
+        `${path}${API_EDITOR_ID_ADD_PATH}`,
+        `${path}${QUERIES_EDITOR_BASE_PATH}`,
+        `${path}${QUERIES_EDITOR_BASE_PATH}${ADD_PATH}`,
+        `${path}${QUERIES_EDITOR_ID_PATH}`,
+        `${path}${QUERIES_EDITOR_ID_ADD_PATH}`,
+        `${path}${QUERIES_EDITOR_ID_PATH}${LIST_PATH}`,
+        `${path}${JS_COLLECTION_EDITOR_PATH}`,
+        `${path}${JS_COLLECTION_EDITOR_PATH}${ADD_PATH}`,
+        `${path}${JS_COLLECTION_ID_PATH}`,
+        `${path}${JS_COLLECTION_ID_PATH}${LIST_PATH}`,
+        `${path}${SAAS_EDITOR_PATH}`,
+        `${path}${SAAS_EDITOR_API_ID_PATH}`,
+        `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
         `${path}${APP_LIBRARIES_EDITOR_PATH}`,
         `${path}${APP_SETTINGS_EDITOR_PATH}`,
       ],
     },
     {
       key: "Datasource Create and Active",
-      component: CreateNewDatasourceTab,
+      component: isPreviewMode ? WidgetsEditor : CreateNewDatasourceTab,
       exact: true,
       path: `${path}${INTEGRATION_EDITOR_PATH}`,
     },
     {
       key: "OnboardingChecklist",
-      component: OnboardingChecklist,
+      component: isPreviewMode ? WidgetsEditor : OnboardingChecklist,
       exact: true,
       path: `${path}${BUILDER_CHECKLIST_PATH}`,
     },
     {
-      key: "QueryEditorAdd",
-      component: QueriesAddState,
-      exact: true,
-      path: [
-        `${path}${QUERIES_EDITOR_BASE_PATH}${ADD_PATH}`,
-        `${path}${QUERIES_EDITOR_ID_ADD_PATH}`,
-        `${path}${API_EDITOR_ID_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}`],
-    },
-    {
-      key: "QueryEditor",
-      component: QueryEditor,
-      exact: true,
-      path: [`${path}${QUERIES_EDITOR_ID_PATH}`],
-    },
-    {
-      key: "JSEditorAdd",
-      component: JSAddState,
-      exact: true,
-      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}`],
-    },
-    {
-      key: "JSEditor File",
-      component: JSEditor,
+      key: "DatasourceEditor",
+      component: isPreviewMode ? WidgetsEditor : DataSourceEditor,
       exact: true,
-      path: [`${path}${JS_COLLECTION_ID_PATH}`],
+      path: `${path}${DATA_SOURCES_EDITOR_ID_PATH}`,
     },
     {
-      key: "SAASList",
-      component: ListView,
+      key: "DatasourceBlankState",
+      component: isPreviewMode ? WidgetsEditor : DatasourceBlankState,
       exact: true,
-      path: `${path}${SAAS_EDITOR_PATH}`,
+      path: `${path}${DATA_SOURCES_EDITOR_LIST_PATH}`,
     },
     {
       key: "SAASDatasourceEditor",
-      component: DatasourceForm,
+      component: isPreviewMode ? WidgetsEditor : DatasourceForm,
       exact: true,
       path: `${path}${SAAS_EDITOR_DATASOURCE_ID_PATH}`,
     },
-    {
-      key: "SAASEditor",
-      component: QueryEditor,
-      exact: true,
-      path: [`${path}${SAAS_EDITOR_API_ID_PATH}`],
-    },
-    {
-      key: "DatasourceEditor",
-      component: DataSourceEditor,
-      exact: true,
-      path: `${path}${DATA_SOURCES_EDITOR_ID_PATH}`,
-    },
-    {
-      key: "DatasourceBlankState",
-      component: DatasourceBlankState,
-      exact: true,
-      path: `${path}${DATA_SOURCES_EDITOR_LIST_PATH}`,
-    },
     {
       key: "GeneratePage",
-      component: GeneratePage,
+      component: isPreviewMode ? WidgetsEditor : GeneratePage,
       exact: true,
       path: `${path}${GENERATE_TEMPLATE_FORM_PATH}`,
     },
diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx
index 6ef717976fb0..a3db2c0fe34d 100644
--- a/app/client/src/ce/sagas/PageSagas.tsx
+++ b/app/client/src/ce/sagas/PageSagas.tsx
@@ -63,7 +63,7 @@ import type {
   CanvasWidgetsReduxState,
   FlattenedWidgetProps,
 } from "reducers/entityReducers/canvasWidgetsReducer";
-import { all, call, delay, put, select, take } from "redux-saga/effects";
+import { all, call, put, select, take } from "redux-saga/effects";
 import history from "utils/history";
 import { isNameValid } from "utils/helpers";
 import { extractCurrentDSL } from "utils/WidgetPropsUtils";
@@ -79,7 +79,6 @@ import type { ApiResponse } from "api/ApiResponses";
 import {
   combinedPreviewModeSelector,
   getCurrentApplicationId,
-  getCurrentBasePageId,
   getCurrentLayoutId,
   getCurrentPageId,
   getCurrentPageName,
@@ -698,6 +697,7 @@ export function* createNewPageFromEntity(
     });
   }
 }
+
 export function* createPageSaga(action: ReduxAction<CreatePageActionPayload>) {
   try {
     const layoutSystemType: LayoutSystemTypes =
@@ -1333,24 +1333,12 @@ export function* setCanvasCardsStateSaga(action: ReduxAction<string>) {
 }
 
 export function* setPreviewModeInitSaga(action: ReduxAction<boolean>) {
-  const currentBasePageId: string = yield select(getCurrentBasePageId);
   const isPreviewMode: boolean = yield select(combinedPreviewModeSelector);
   if (action.payload) {
     // we animate out elements and then move to the canvas
     yield put(setPreviewModeAction(action.payload));
-    history.push(
-      builderURL({
-        basePageId: currentBasePageId,
-      }),
-    );
   } else if (isPreviewMode) {
     // check if already in edit mode, then only do this
-
-    // when switching back to edit mode
-    // we go back to the previous route e.g query, api etc.
-    history.goBack();
-    // small delay to wait for the content to render and then animate
-    yield delay(10);
     yield put(setPreviewModeAction(action.payload));
   }
 }
diff --git a/app/client/src/components/editorComponents/PropertyPaneSidebar.tsx b/app/client/src/components/editorComponents/PropertyPaneSidebar.tsx
index db79c272cfea..0ef2fa22f879 100644
--- a/app/client/src/components/editorComponents/PropertyPaneSidebar.tsx
+++ b/app/client/src/components/editorComponents/PropertyPaneSidebar.tsx
@@ -148,7 +148,7 @@ export const PropertyPaneSidebar = memo((props: Props) => {
         <div
           className={classNames({
             "h-full p-0 overflow-y-auto min-w-72 max-w-104": true,
-            "transition-all duration-100": !resizing,
+            "transition-all duration-400": !resizing,
           })}
           style={{ width: props.width }}
         >
diff --git a/app/client/src/constants/AppConstants.ts b/app/client/src/constants/AppConstants.ts
index 63999754daed..ff06dba2eb5f 100644
--- a/app/client/src/constants/AppConstants.ts
+++ b/app/client/src/constants/AppConstants.ts
@@ -13,8 +13,8 @@ export const CANVAS_BACKGROUND_COLOR = "#FFFFFF";
 export const DEFAULT_ENTITY_EXPLORER_WIDTH = 256;
 export const DEFAULT_PROPERTY_PANE_WIDTH = 288;
 export const APP_SETTINGS_PANE_WIDTH = 525;
-export const DEFAULT_EDITOR_PANE_WIDTH = 255;
-export const DEFAULT_SPLIT_SCREEN_WIDTH = "40.4vw";
+export const DEFAULT_EXPLORER_PANE_WIDTH = 255;
+export const SPLIT_SCREEN_RATIO = 0.404;
 
 const APP_STORE_NAMESPACE = "APPSMITH_LOCAL_STORE";
 
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
new file mode 100644
index 000000000000..62b8ed82866d
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Flex } from "design-system";
+import { Switch, useRouteMatch } from "react-router";
+import { SentryRoute } from "@appsmith/AppRouter";
+import {
+  jsSegmentRoutes,
+  querySegmentRoutes,
+} from "@appsmith/pages/Editor/IDE/EditorPane/constants";
+import { JSEditorPane } from "./JS";
+import { QueryEditor } from "./Query";
+import EditorTabs from "../EditorTabs";
+import { useCurrentEditorState } from "../hooks";
+import { EditorEntityTab } from "@appsmith/entities/IDE/constants";
+
+const Editor = () => {
+  const { path } = useRouteMatch();
+  const { segment } = useCurrentEditorState();
+  if (segment === EditorEntityTab.UI) {
+    return null;
+  }
+  return (
+    <Flex
+      className="relative"
+      flex={1}
+      flexDirection="column"
+      height="100%"
+      overflow="hidden"
+    >
+      <EditorTabs />
+      <Switch>
+        <SentryRoute
+          component={JSEditorPane}
+          path={jsSegmentRoutes.map((route) => `${path}${route}`)}
+        />
+        <SentryRoute
+          component={QueryEditor}
+          path={querySegmentRoutes.map((route) => `${path}${route}`)}
+        />
+      </Switch>
+    </Flex>
+  );
+};
+
+export default Editor;
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx b/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx
deleted file mode 100644
index 5d44ec5edf28..000000000000
--- a/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from "react";
-import { Flex } from "design-system";
-import { Switch, useRouteMatch } from "react-router";
-import { SentryRoute } from "@appsmith/AppRouter";
-import QueriesSegment from "./Query";
-import WidgetsSegment from "./UI";
-import JSSegment from "./JS";
-import SegmentedHeader from "./components/SegmentedHeader";
-import EditorTabs from "../EditorTabs";
-import {
-  jsSegmentRoutes,
-  querySegmentRoutes,
-  widgetSegmentRoutes,
-} from "@appsmith/pages/Editor/IDE/EditorPane/constants";
-import {
-  BUILDER_CUSTOM_PATH,
-  BUILDER_PATH,
-  BUILDER_PATH_DEPRECATED,
-} from "@appsmith/constants/routes/appRoutes";
-import { useSelector } from "react-redux";
-import { getIDEViewMode } from "selectors/ideSelectors";
-import { EditorViewMode } from "@appsmith/entities/IDE/constants";
-
-const EditorPaneSegments = () => {
-  const { path } = useRouteMatch();
-  const ideViewMode = useSelector(getIDEViewMode);
-
-  return (
-    <Flex
-      className="relative"
-      flexDirection="column"
-      height="100%"
-      overflow="hidden"
-    >
-      <SegmentedHeader />
-      {ideViewMode === EditorViewMode.SplitScreen ? <EditorTabs /> : null}
-      <Flex
-        className="ide-editor-left-pane__content"
-        flexDirection="column"
-        height="100%"
-        overflow="hidden"
-        width="100%"
-      >
-        <Switch>
-          <SentryRoute
-            component={QueriesSegment}
-            path={querySegmentRoutes.map((route) => `${path}${route}`)}
-          />
-          <SentryRoute
-            component={JSSegment}
-            path={jsSegmentRoutes.map((route) => `${path}${route}`)}
-          />
-          <SentryRoute
-            component={WidgetsSegment}
-            path={[
-              BUILDER_PATH,
-              BUILDER_CUSTOM_PATH,
-              BUILDER_PATH_DEPRECATED,
-              ...widgetSegmentRoutes.map((route) => `${path}${route}`),
-            ]}
-          />
-        </Switch>
-      </Flex>
-    </Flex>
-  );
-};
-
-export default EditorPaneSegments;
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
new file mode 100644
index 000000000000..84c744225729
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { Flex } from "design-system";
+import { Switch, useRouteMatch } from "react-router";
+import { SentryRoute } from "@appsmith/AppRouter";
+import {
+  jsSegmentRoutes,
+  querySegmentRoutes,
+  widgetSegmentRoutes,
+} from "@appsmith/pages/Editor/IDE/EditorPane/constants";
+import { JSExplorer } from "./JS";
+import { QueryExplorer } from "./Query";
+import WidgetsSegment from "./UI";
+import {
+  BUILDER_CUSTOM_PATH,
+  BUILDER_PATH,
+  BUILDER_PATH_DEPRECATED,
+} from "@appsmith/constants/routes/appRoutes";
+import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties";
+import SegmentedHeader from "./components/SegmentedHeader";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants";
+
+const EditorPaneExplorer = () => {
+  const { path } = useRouteMatch();
+  const ideViewMode = useSelector(getIDEViewMode);
+  return (
+    <Flex
+      borderRight={
+        ideViewMode === EditorViewMode.SplitScreen
+          ? ""
+          : "1px solid var(--ads-v2-color-border)"
+      }
+      className="relative ide-editor-left-pane__content"
+      flexDirection="column"
+      overflow="hidden"
+      width={
+        ideViewMode === EditorViewMode.FullScreen
+          ? DEFAULT_EXPLORER_PANE_WIDTH
+          : "100%"
+      }
+    >
+      <SegmentedHeader />
+      {/** Entity Properties component is needed to render
+       the Bindings popover in the context menu. Will be removed eventually **/}
+      <EntityProperties />
+      <Switch>
+        <SentryRoute
+          component={JSExplorer}
+          path={jsSegmentRoutes.map((route) => `${path}${route}`)}
+        />
+        <SentryRoute
+          component={QueryExplorer}
+          path={querySegmentRoutes.map((route) => `${path}${route}`)}
+        />
+        <SentryRoute
+          component={WidgetsSegment}
+          path={[
+            BUILDER_PATH,
+            BUILDER_CUSTOM_PATH,
+            BUILDER_PATH_DEPRECATED,
+            ...widgetSegmentRoutes.map((route) => `${path}${route}`),
+          ]}
+        />
+      </Switch>
+    </Flex>
+  );
+};
+
+export default EditorPaneExplorer;
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 de9e62918194..62084e653ff1 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
@@ -11,16 +11,19 @@ import {
   useJSAdd,
 } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
 import type { ActionOperation } from "components/editorComponents/GlobalSearch/utils";
-import type { AddProps } from "../types/AddProps";
 import { createAddClassName, fuzzySearchInObjectItems } from "../utils";
 import { FocusEntity } from "navigation/FocusEntity";
 import type { GroupedListProps } from "../components/types";
 import { EmptySearchResult } from "../components/EmptySearchResult";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import type { FlexProps } from "design-system";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
-const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
+const AddJS = () => {
   const dispatch = useDispatch();
   const pageId = useSelector(getCurrentPageId);
   const [searchTerm, setSearchTerm] = useState("");
+  const ideViewMode = useSelector(getIDEViewMode);
 
   const groupedJsOperations = useGroupedAddJsOperations();
 
@@ -62,20 +65,28 @@ const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
     groups,
   );
 
+  const extraPadding: FlexProps =
+    ideViewMode === EditorViewMode.FullScreen
+      ? {
+          px: "spaces-4",
+          py: "spaces-7",
+        }
+      : {};
+
   return (
     <Flex
       data-testid="t--ide-add-pane"
       height="100%"
       justifyContent="center"
       p="spaces-3"
-      {...containerProps}
+      {...extraPadding}
     >
       <Flex
         flexDirection="column"
         gap={"spaces-4"}
+        maxW="40vw"
         overflow="hidden"
         width="100%"
-        {...innerContainerProps}
       >
         <SegmentAddHeader
           onCloseClick={closeAddJS}
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Editor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Editor.tsx
new file mode 100644
index 000000000000..11981cca38d6
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Editor.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Switch, useRouteMatch } from "react-router";
+import { useJSEditorRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
+import { SentryRoute } from "@appsmith/AppRouter";
+
+const JSEditorPane = () => {
+  const { path } = useRouteMatch();
+  const routes = useJSEditorRoutes(path);
+  return (
+    <Switch>
+      {routes.map((route) => (
+        <SentryRoute
+          component={route.component}
+          exact={route.exact}
+          key={route.key}
+          path={route.path}
+        />
+      ))}
+    </Switch>
+  );
+};
+
+export { JSEditorPane };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx
new file mode 100644
index 000000000000..35fb15a2b8ca
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import List from "./List";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+
+const JSExplorer = () => {
+  const ideViewMode = useSelector(getIDEViewMode);
+  if (ideViewMode === EditorViewMode.FullScreen) {
+    return <List />;
+  }
+  return null;
+};
+
+export { JSExplorer };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/index.tsx
index c8eca8b83d2c..8e08bd29f3db 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/index.tsx
@@ -1,23 +1,2 @@
-import React from "react";
-import { Switch, useRouteMatch } from "react-router";
-import { SentryRoute } from "@appsmith/AppRouter";
-import { useJSSegmentRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
-
-const JSSegment = () => {
-  const { path } = useRouteMatch();
-  const routes = useJSSegmentRoutes(path);
-  return (
-    <Switch>
-      {routes.map((route) => (
-        <SentryRoute
-          component={route.component}
-          exact={route.exact}
-          key={route.key}
-          path={route.path}
-        />
-      ))}
-    </Switch>
-  );
-};
-
-export default JSSegment;
+export { JSExplorer } from "./Explorer";
+export { JSEditorPane } from "./Editor";
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 0a4eacf10dec..ecd29cb2210b 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Flex, SearchInput } from "design-system";
 
-import { EDITOR_PANE_TEXTS, createMessage } from "@appsmith/constants/messages";
+import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import SegmentAddHeader from "../components/SegmentAddHeader";
 import GroupedList from "../components/GroupedList";
 import {
@@ -9,16 +9,20 @@ import {
   useGroupedAddQueryOperations,
   useQueryAdd,
 } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
-import type { AddProps } from "../types/AddProps";
 import { fuzzySearchInObjectItems } from "../utils";
 import type { GroupedListProps } from "../components/types";
 import { EmptySearchResult } from "../components/EmptySearchResult";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import type { FlexProps } from "design-system";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
-const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
+const AddQuery = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const { getListItems } = useAddQueryListItems();
   const groupedActionOperations = useGroupedAddQueryOperations();
   const { closeAddQuery } = useQueryAdd();
+  const ideViewMode = useSelector(getIDEViewMode);
 
   const groups = groupedActionOperations.map((group) => ({
     groupTitle: group.title,
@@ -31,20 +35,28 @@ const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
     groups,
   );
 
+  const extraPadding: FlexProps =
+    ideViewMode === EditorViewMode.FullScreen
+      ? {
+          px: "spaces-4",
+          py: "spaces-7",
+        }
+      : {};
+
   return (
     <Flex
       data-testid="t--ide-add-pane"
       height="100%"
       justifyContent="center"
       p="spaces-3"
-      {...containerProps}
+      {...extraPadding}
     >
       <Flex
         flexDirection="column"
         gap={"spaces-4"}
+        maxW="40vw"
         overflow="hidden"
         width="100%"
-        {...innerContainerProps}
       >
         <SegmentAddHeader
           onCloseClick={closeAddQuery}
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Editor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Editor.tsx
new file mode 100644
index 000000000000..2616c75e89e8
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Editor.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { useRouteMatch } from "react-router";
+import { Switch } from "react-router-dom";
+import { useQueryEditorRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
+import { SentryRoute } from "@appsmith/AppRouter";
+
+const QueryEditor = () => {
+  const { path } = useRouteMatch();
+  const routes = useQueryEditorRoutes(path);
+  return (
+    <Switch>
+      {routes.map((route) => (
+        <SentryRoute
+          component={route.component}
+          exact={route.exact}
+          key={route.key}
+          path={route.path}
+        />
+      ))}
+    </Switch>
+  );
+};
+
+export { QueryEditor };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
new file mode 100644
index 000000000000..f49e8f696a19
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import List from "./List";
+import styled from "styled-components";
+import { Flex } from "design-system";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+
+const QueriesContainer = styled(Flex)`
+  & .t--entity-item {
+    grid-template-columns: 0 auto 1fr auto auto auto auto auto;
+    height: 32px;
+
+    & .t--entity-name {
+      padding-left: var(--ads-v2-spaces-3);
+    }
+  }
+`;
+
+const QueryExplorer = () => {
+  const ideViewMode = useSelector(getIDEViewMode);
+  if (ideViewMode === EditorViewMode.FullScreen) {
+    return (
+      <QueriesContainer
+        className="ide-editor-left-pane__content-queries"
+        flexDirection="column"
+        height="100%"
+        overflow="hidden"
+      >
+        <List />
+      </QueriesContainer>
+    );
+  }
+  return null;
+};
+
+export { QueryExplorer };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/index.tsx
index cafcf48c7851..27d92d39df27 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/index.tsx
@@ -1,43 +1,2 @@
-import React from "react";
-import { Flex } from "design-system";
-import styled from "styled-components";
-import { Switch, useRouteMatch } from "react-router";
-import { SentryRoute } from "@appsmith/AppRouter";
-import { useQuerySegmentRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
-
-const QueriesContainer = styled(Flex)`
-  & .t--entity-item {
-    grid-template-columns: 0 auto 1fr auto auto auto auto auto;
-    height: 32px;
-
-    & .t--entity-name {
-      padding-left: var(--ads-v2-spaces-3);
-    }
-  }
-`;
-
-const QueriesSegment = () => {
-  const { path } = useRouteMatch();
-  const routes = useQuerySegmentRoutes(path);
-  return (
-    <QueriesContainer
-      className="ide-editor-left-pane__content-queries"
-      flexDirection="column"
-      height="100%"
-      overflow="hidden"
-    >
-      <Switch>
-        {routes.map((route) => (
-          <SentryRoute
-            component={route.component}
-            exact={route.exact}
-            key={route.key}
-            path={route.path}
-          />
-        ))}
-      </Switch>
-    </QueriesContainer>
-  );
-};
-
-export default QueriesSegment;
+export { QueryEditor } from "./Editor";
+export { QueryExplorer } from "./Explorer";
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/index.tsx
index a700638019d9..dc864002d9d6 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/UI/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/index.tsx
@@ -18,6 +18,7 @@ import { getPagePermissions } from "selectors/editorSelectors";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import { getHasManagePagePermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers";
+import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants";
 
 const UISegment = () => {
   const { path } = useRouteMatch();
@@ -41,6 +42,7 @@ const UISegment = () => {
       flexDirection="column"
       gap="spaces-3"
       overflow="hidden"
+      width={DEFAULT_EXPLORER_PANE_WIDTH - 1 + "px"}
     >
       <Switch>
         <SentryRoute
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
index ae455fe0c333..5be6cae2b43f 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
@@ -1,36 +1,35 @@
 import React from "react";
 import { Flex } from "design-system";
-import type { RouteComponentProps } from "react-router";
-import { Switch } from "react-router";
-
-import { SentryRoute } from "@appsmith/AppRouter";
-import { ADD_PATH } from "constants/routes";
-import EditorPaneSegments from "./EditorPaneSegments";
-import GlobalAdd from "./GlobalAdd";
 import { useEditorPaneWidth } from "../hooks";
-import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties";
+import EditorPaneExplorer from "./Explorer";
+import Editor from "./Editor";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
-const EditorPane = ({ match: { path } }: RouteComponentProps) => {
+const EditorPane = () => {
   const width = useEditorPaneWidth();
+  const ideViewMode = useSelector(getIDEViewMode);
 
   return (
     <Flex
+      borderRight={
+        ideViewMode === EditorViewMode.SplitScreen
+          ? "1px solid var(--ads-v2-color-border)"
+          : ""
+      }
       className="ide-editor-left-pane"
-      flexDirection="column"
+      flexDirection={
+        ideViewMode === EditorViewMode.SplitScreen ? "column" : "row"
+      }
       // @ts-expect-error Fix this the next time the file is edited
       gap="spacing-2"
       height="100%"
       overflow="hidden"
       width={width}
     >
-      {/** Entity Properties component is needed to render
-        the Bindings popover in the context menu. Will be removed eventually **/}
-      <EntityProperties />
-
-      <Switch>
-        <SentryRoute component={GlobalAdd} exact path={`${path}${ADD_PATH}`} />
-        <SentryRoute component={EditorPaneSegments} />
-      </Switch>
+      <EditorPaneExplorer />
+      <Editor />
     </Flex>
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/types/AddProps.ts b/app/client/src/pages/Editor/IDE/EditorPane/types/AddProps.ts
deleted file mode 100644
index bb8034901bb6..000000000000
--- a/app/client/src/pages/Editor/IDE/EditorPane/types/AddProps.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { FlexProps } from "design-system";
-
-export interface AddProps {
-  containerProps?: FlexProps;
-  innerContainerProps?: FlexProps;
-}
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
index 1ae493ed28d3..21ab32804f14 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
@@ -24,9 +24,9 @@ export const List = () => {
   return (
     <ListContainer
       bg="var(--ads-v2-color-bg)"
-      className="absolute top-[78px]"
+      className="absolute top-[36px]" // space for tabs on top and then some padding
       data-testid="t--editorpane-list-view"
-      h="calc(100% - 78px)"
+      h="calc(100% - 32px)"
       w="100%"
       zIndex="10"
     >
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
index 13eb9dd1c770..2178306ec52b 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
@@ -16,46 +16,52 @@ export const ScreenModeToggle = () => {
   const dispatch = useDispatch();
   const ideViewMode = useSelector(getIDEViewMode);
 
-  const toggleEditorMode = useCallback(() => {
-    const newMode =
-      ideViewMode === EditorViewMode.SplitScreen
-        ? EditorViewMode.FullScreen
-        : EditorViewMode.SplitScreen;
+  const switchToFullScreen = useCallback(() => {
+    AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
+      to: EditorViewMode.FullScreen,
+    });
+    dispatch(setIdeEditorViewMode(EditorViewMode.FullScreen));
+  }, [dispatch]);
 
+  const switchToSplitScreen = useCallback(() => {
     AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
-      to: newMode,
+      to: EditorViewMode.SplitScreen,
     });
-    dispatch(setIdeEditorViewMode(newMode));
-  }, [ideViewMode, dispatch]);
+    dispatch(setIdeEditorViewMode(EditorViewMode.SplitScreen));
+  }, [dispatch]);
+
+  if (ideViewMode === EditorViewMode.SplitScreen) {
+    return (
+      <Tooltip
+        content={createMessage(MAXIMIZE_BUTTON_TOOLTIP)}
+        key={createMessage(MAXIMIZE_BUTTON_TOOLTIP)}
+      >
+        <Button
+          className="ml-auto !min-w-[24px]"
+          data-testid={"t--ide-maximize"}
+          id={"editor-mode-maximize"}
+          isIconButton
+          kind="tertiary"
+          onClick={switchToFullScreen}
+          startIcon={"maximize-v3"}
+        />
+      </Tooltip>
+    );
+  }
 
   return (
     <Tooltip
-      content={
-        ideViewMode === EditorViewMode.SplitScreen
-          ? createMessage(MAXIMIZE_BUTTON_TOOLTIP)
-          : createMessage(MINIMIZE_BUTTON_TOOLTIP)
-      }
+      content={createMessage(MINIMIZE_BUTTON_TOOLTIP)}
+      key={createMessage(MINIMIZE_BUTTON_TOOLTIP)}
     >
       <Button
         className="ml-auto !min-w-[24px]"
-        data-testid={
-          ideViewMode === EditorViewMode.SplitScreen
-            ? "t--ide-maximize"
-            : "t--ide-minimize"
-        }
-        id={
-          ideViewMode === EditorViewMode.SplitScreen
-            ? "editor-mode-maximize"
-            : "editor-mode-minimize"
-        }
+        data-testid={"t--ide-minimize"}
+        id={"editor-mode-minimize"}
         isIconButton
         kind="tertiary"
-        onClick={toggleEditorMode}
-        startIcon={
-          ideViewMode === EditorViewMode.SplitScreen
-            ? "maximize-v3"
-            : "minimize-v3"
-        }
+        onClick={switchToSplitScreen}
+        startIcon={"minimize-v3"}
       />
     </Tooltip>
   );
diff --git a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
index 8c4e04c3ea54..1d0c51a957cc 100644
--- a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
+++ b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
@@ -34,10 +34,6 @@ import { EmptyState } from "../EditorPane/components/EmptyState";
 import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
 import { getCurrentBasePageId } from "selectors/editorSelectors";
 
-const PaneContainer = styled.div`
-  width: 300px;
-`;
-
 const PaneBody = styled.div`
   padding: var(--ads-v2-spaces-3) 0;
   height: calc(100vh - 120px);
@@ -99,7 +95,12 @@ const DataSidePane = (props: DataSidePaneProps) => {
     );
 
   return (
-    <PaneContainer>
+    <Flex
+      borderRight="1px solid var(--ads-v2-color-border)"
+      flexDirection="column"
+      height="100%"
+      width="300px"
+    >
       <PaneHeader
         rightIcon={
           canCreateDatasource && datasources.length !== 0 ? (
@@ -155,7 +156,7 @@ const DataSidePane = (props: DataSidePaneProps) => {
           ))}
         </Flex>
       </PaneBody>
-    </PaneContainer>
+    </Flex>
   );
 };
 
diff --git a/app/client/src/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx b/app/client/src/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx
index f6537788c180..e42d8980b9cb 100644
--- a/app/client/src/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx
+++ b/app/client/src/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx
@@ -5,11 +5,8 @@ import { useSelector } from "react-redux";
 import { selectLibrariesForExplorer } from "@appsmith/selectors/entitiesSelector";
 import { animated, useTransition } from "react-spring";
 import { LibraryEntity } from "pages/Editor/Explorer/Libraries";
-import styled from "styled-components";
-
-const Container = styled.div`
-  width: 250px;
-`;
+import { Flex } from "design-system";
+import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants";
 
 const LibrarySidePane = () => {
   const libraries = useSelector(selectLibrariesForExplorer);
@@ -20,7 +17,12 @@ const LibrarySidePane = () => {
     leave: { opacity: 1 },
   });
   return (
-    <Container>
+    <Flex
+      borderRight="1px solid var(--ads-v2-color-border)"
+      flexDirection="column"
+      height="100%"
+      width={DEFAULT_EXPLORER_PANE_WIDTH + "px"}
+    >
       <PaneHeader
         rightIcon={<AddLibraryPopover />}
         title="Installed Libraries"
@@ -30,7 +32,7 @@ const LibrarySidePane = () => {
           <LibraryEntity lib={lib} />
         </animated.div>
       ))}
-    </Container>
+    </Flex>
   );
 };
 
diff --git a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
index 9a894bfd974e..308441322c21 100644
--- a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
@@ -25,7 +25,7 @@ export const LeftPaneContainer = styled.div<{ showRightBorder?: boolean }>`
 const LeftPane = () => {
   const { path } = useRouteMatch();
   return (
-    <LeftPaneContainer>
+    <LeftPaneContainer showRightBorder={false}>
       <Switch>
         <SentryRoute
           component={DataSidePane}
diff --git a/app/client/src/pages/Editor/IDE/MainPane/index.tsx b/app/client/src/pages/Editor/IDE/MainPane/index.tsx
index edae34902ad8..44e761a7e0eb 100644
--- a/app/client/src/pages/Editor/IDE/MainPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/MainPane/index.tsx
@@ -1,18 +1,12 @@
 import React from "react";
-import { BUILDER_PATH } from "constants/routes";
 import { Route, Switch, useRouteMatch } from "react-router";
 import * as Sentry from "@sentry/react";
 import useRoutes from "@appsmith/pages/Editor/IDE/MainPane/useRoutes";
-import EditorTabs from "pages/Editor/IDE/EditorTabs";
 import { useWidgetSelectionBlockListener } from "pages/Editor/IDE/hooks";
-import { useSelector } from "react-redux";
-import { getIDEViewMode } from "selectors/ideSelectors";
-import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 export const MainPane = (props: { id: string }) => {
   const { path } = useRouteMatch();
-  const ideViewMode = useSelector(getIDEViewMode);
   const routes = useRoutes(path);
   useWidgetSelectionBlockListener();
 
@@ -22,8 +16,7 @@ export const MainPane = (props: { id: string }) => {
       data-testid="t--ide-main-pane"
       id={props.id}
     >
-      {ideViewMode === EditorViewMode.FullScreen ? <EditorTabs /> : null}
-      <Switch key={BUILDER_PATH}>
+      <Switch>
         {routes.map((route) => (
           <SentryRoute {...route} key={route.key} />
         ))}
diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts
index 147efe3fc2cc..0f2e5528e35d 100644
--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@@ -9,7 +9,7 @@ import {
 import { useLocation } from "react-router";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
 import { useDispatch, useSelector } from "react-redux";
-import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
+import { getIDEViewMode } from "selectors/ideSelectors";
 import { getPropertyPaneWidth } from "selectors/propertyPaneSelectors";
 import history, { NavigationMethod } from "utils/history";
 import {
@@ -21,8 +21,9 @@ import {
 import { getCurrentFocusInfo } from "selectors/focusHistorySelectors";
 import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
 import {
-  DEFAULT_EDITOR_PANE_WIDTH,
-  DEFAULT_SPLIT_SCREEN_WIDTH,
+  APP_SIDEBAR_WIDTH,
+  DEFAULT_EXPLORER_PANE_WIDTH,
+  SPLIT_SCREEN_RATIO,
 } from "constants/AppConstants";
 import { getIsAltFocusWidget, getWidgetSelectionBlock } from "selectors/ui";
 import { altFocusWidget, setWidgetSelectionBlock } from "actions/widgetActions";
@@ -35,6 +36,7 @@ import { closeJSActionTab } from "actions/jsActionActions";
 import { closeQueryActionTab } from "actions/pluginActionActions";
 import { getCurrentBasePageId } from "selectors/editorSelectors";
 import { getCurrentEntityInfo } from "../utils";
+import useWindowDimensions from "../../../utils/hooks/useWindowDimensions";
 
 export const useCurrentAppState = () => {
   const [appState, setAppState] = useState(EditorState.EDITOR);
@@ -74,23 +76,27 @@ export const useCurrentEditorState = () => {
 };
 
 export const useEditorPaneWidth = (): string => {
-  const [width, setWidth] = useState(DEFAULT_EDITOR_PANE_WIDTH + "px");
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
+  const [windowWidth] = useWindowDimensions();
+  const [width, setWidth] = useState(windowWidth - APP_SIDEBAR_WIDTH + "px");
   const editorMode = useSelector(getIDEViewMode);
   const { segment } = useCurrentEditorState();
   const propertyPaneWidth = useSelector(getPropertyPaneWidth);
   useEffect(() => {
-    if (
-      isSideBySideEnabled &&
-      editorMode === EditorViewMode.SplitScreen &&
-      segment !== EditorEntityTab.UI
-    ) {
-      // 1px is propertypane border width
-      setWidth(DEFAULT_SPLIT_SCREEN_WIDTH);
+    if (editorMode === EditorViewMode.SplitScreen) {
+      if (segment !== EditorEntityTab.UI) {
+        // 1px is propertypane border width
+        setWidth(windowWidth * SPLIT_SCREEN_RATIO + "px");
+      } else {
+        setWidth(DEFAULT_EXPLORER_PANE_WIDTH + "px");
+      }
     } else {
-      setWidth(DEFAULT_EDITOR_PANE_WIDTH + "px");
+      if (segment !== EditorEntityTab.UI) {
+        setWidth(windowWidth - APP_SIDEBAR_WIDTH + "px");
+      } else {
+        setWidth(DEFAULT_EXPLORER_PANE_WIDTH + "px");
+      }
     }
-  }, [isSideBySideEnabled, editorMode, segment, propertyPaneWidth]);
+  }, [editorMode, segment, propertyPaneWidth, windowWidth]);
 
   return width;
 };
@@ -164,7 +170,7 @@ export function useWidgetSelectionBlockListener() {
       FocusEntity.WIDGET_LIST,
     ].includes(currentFocus.entity);
     dispatch(setWidgetSelectionBlock(!inUIMode));
-  }, [currentFocus]);
+  }, [currentFocus, dispatch]);
 
   useEffect(() => {
     window.addEventListener("keydown", handleKeyDown);
diff --git a/app/client/src/pages/Editor/IDE/index.tsx b/app/client/src/pages/Editor/IDE/index.tsx
index 76eddde3d49e..adb67c53b869 100644
--- a/app/client/src/pages/Editor/IDE/index.tsx
+++ b/app/client/src/pages/Editor/IDE/index.tsx
@@ -30,7 +30,7 @@ function IDE() {
       <EditorWrapperContainer>
         <div
           className={classNames({
-            [`transition-transform transform duration-400 flex ${tailwindLayers.entityExplorer}`]:
+            [`transition-transform transform duration-400 flex h-full ${tailwindLayers.entityExplorer}`]:
               true,
             relative: !isCombinedPreviewMode,
             "-translate-x-full fixed": isCombinedPreviewMode,
diff --git a/app/client/src/pages/Editor/JSEditor/JSAddState.tsx b/app/client/src/pages/Editor/JSEditor/JSAddState.tsx
deleted file mode 100644
index 9cd066d399fb..000000000000
--- a/app/client/src/pages/Editor/JSEditor/JSAddState.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { Flex } from "design-system";
-import AddJS from "pages/Editor/IDE/EditorPane/JS/Add";
-import { EDITOR_TABS_HEIGHT } from "../IDE/EditorPane/constants";
-
-const JSAddState = () => {
-  return (
-    <Flex height={`calc(100% - ${EDITOR_TABS_HEIGHT})`} 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
deleted file mode 100644
index ce50dd0aea2b..000000000000
--- a/app/client/src/pages/Editor/QueryEditor/QueriesAddState.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { Flex } from "design-system";
-import AddQuery from "pages/Editor/IDE/EditorPane/Query/Add";
-import { EDITOR_TABS_HEIGHT } from "../IDE/EditorPane/constants";
-
-const QueriesAddState = () => {
-  return (
-    <Flex height={`calc(100% - ${EDITOR_TABS_HEIGHT})`} justifyContent="center">
-      <AddQuery
-        containerProps={{
-          px: "spaces-4",
-          py: "spaces-7",
-        }}
-        innerContainerProps={{
-          minWidth: "30vw",
-        }}
-      />
-    </Flex>
-  );
-};
-
-export { QueriesAddState };
diff --git a/app/client/src/pages/Editor/commons/EditorSettingsPaneContainer.tsx b/app/client/src/pages/Editor/commons/EditorSettingsPaneContainer.tsx
index e91714bc51de..80fea699a8e0 100644
--- a/app/client/src/pages/Editor/commons/EditorSettingsPaneContainer.tsx
+++ b/app/client/src/pages/Editor/commons/EditorSettingsPaneContainer.tsx
@@ -11,9 +11,12 @@ const SettingsPageWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: ${APP_SETTINGS_PANE_WIDTH}px;
+
   &:nth-child(2) {
     height: 100%;
   }
+
+  border-right: 1px solid var(--ads-v2-color-border);
 `;
 
 const EditorSettingsPaneContainer = ({