diff --git a/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx b/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx
index 534065b38b..52c677c41b 100644
--- a/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx
+++ b/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx
@@ -6,12 +6,13 @@ import {
   APP_SETTINGS_PANE_HEADER,
 } from "@appsmith/constants/messages";
 import { Tooltip } from "design-system";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Button } from "design-system";
+import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
+import classNames from "classnames";
 
 const StyledHeader = styled.div`
   height: 48px;
-  padding: 10px 0px 10px;
   border-bottom: 1px solid var(--ads-v2-color-border);
   margin-bottom: 0;
 `;
@@ -24,8 +25,16 @@ const StyledText = styled.div`
 
 function PaneHeader() {
   const dispatch = useDispatch();
+  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+
   return (
-    <StyledHeader className="flex justify-start items-center">
+    <StyledHeader
+      className={classNames({
+        "flex justify-start items-center py-2.5": !isAppSidebarEnabled,
+        "flex justify-between	flex-row-reverse items-center py-2.5 pl-4":
+          isAppSidebarEnabled,
+      })}
+    >
       <Tooltip content={APP_SETTINGS_CLOSE_TOOLTIP()} placement="bottom">
         <Button
           className="ml-2 pr-2"
@@ -34,7 +43,9 @@ function PaneHeader() {
           kind="tertiary"
           onClick={() => dispatch(closeAppSettingsPaneAction())}
           size="md"
-          startIcon="double-arrow-right"
+          startIcon={
+            isAppSidebarEnabled ? "close-control" : "double-arrow-right"
+          }
         />
       </Tooltip>
       <StyledText>{APP_SETTINGS_PANE_HEADER()}</StyledText>
diff --git a/app/client/src/pages/Editor/WidgetsEditor/index.tsx b/app/client/src/pages/Editor/WidgetsEditor/index.tsx
index 4d6c78fa8a..9118e0c8dc 100644
--- a/app/client/src/pages/Editor/WidgetsEditor/index.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor/index.tsx
@@ -31,9 +31,13 @@ import MainContainerWrapper from "./MainContainerWrapper";
 import EmptyCanvasPrompts from "./EmptyCanvasPrompts";
 import { useAutoHeightUIState } from "utils/hooks/autoHeightUIHooks";
 import { PageViewWrapper } from "pages/AppViewer/AppPage.styled";
-import { NAVIGATION_SETTINGS } from "constants/AppConstants";
+import {
+  APP_SETTINGS_PANE_WIDTH,
+  NAVIGATION_SETTINGS,
+} from "constants/AppConstants";
 import {
   getAppSettingsPaneContext,
+  getIsAppSettingsPaneOpen,
   getIsAppSettingsPaneWithNavigationTabOpen,
 } from "selectors/appSettingsPaneSelectors";
 import { AppSettingsTabs } from "../AppSettingsPane/AppSettings";
@@ -46,6 +50,8 @@ import classNames from "classnames";
 import { getSnapshotUpdatedTime } from "selectors/autoLayoutSelectors";
 import { getReadableSnapShotDetails } from "layoutSystems/autolayout/utils/AutoLayoutUtils";
 import AnonymousDataPopup from "../FirstTimeUserOnboarding/AnonymousDataPopup";
+import AppSettingsPane from "../AppSettingsPane";
+import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
 
 function WidgetsEditor() {
   const { deselectAll, focusWidget } = useWidgetSelection();
@@ -75,6 +81,9 @@ function WidgetsEditor() {
   const isPreviewingNavigation =
     isPreviewMode || isAppSettingsPaneWithNavigationTabOpen;
 
+  const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen);
+  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+
   const shouldShowSnapShotBanner =
     !!readableSnapShotDetails && !isPreviewingNavigation;
 
@@ -165,6 +174,13 @@ function WidgetsEditor() {
     <EditorContextProvider renderMode="CANVAS">
       {guidedTourEnabled && <Guide />}
       <div className="relative flex flex-row w-full overflow-hidden">
+        {isAppSettingsPaneOpen && isAppSidebarEnabled && (
+          <div className="h-full flex">
+            <div style={{ width: APP_SETTINGS_PANE_WIDTH }}>
+              <AppSettingsPane />
+            </div>
+          </div>
+        )}
         <div
           className={classNames({
             "relative flex flex-col w-full overflow-hidden": true,
@@ -227,7 +243,9 @@ function WidgetsEditor() {
           </div>
           <Debugger />
         </div>
-        <PropertyPaneWrapper />
+        {!(isAppSettingsPaneOpen && isAppSidebarEnabled) && (
+          <PropertyPaneWrapper />
+        )}
       </div>
     </EditorContextProvider>
   );
diff --git a/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx b/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx
index f0ac582932..da0e6ce934 100644
--- a/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx
@@ -18,6 +18,8 @@ import EditorWrapperBody from "./commons/EditorWrapperBody";
 import WidgetsEditorEntityExplorer from "./WidgetsEditorEntityExplorer";
 import EditorWrapperContainer from "./commons/EditorWrapperContainer";
 import Sidebar from "components/Sidebar";
+import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
+import { getIsAppSettingsPaneOpen } from "selectors/appSettingsPaneSelectors";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -27,12 +29,16 @@ const SentryRoute = Sentry.withSentryRouting(Route);
 function WidgetsEditorWrapper() {
   const { path } = useRouteMatch();
   const isPreviewMode = useSelector(previewModeSelector);
+  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+  const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen);
 
   return (
     <>
       <EditorWrapperContainer>
         <Sidebar />
-        <WidgetsEditorEntityExplorer />
+        {!(isAppSidebarEnabled && isAppSettingsPaneOpen) && (
+          <WidgetsEditorEntityExplorer />
+        )}
         <EditorWrapperBody id="app-body">
           <Switch key={BUILDER_PATH}>
             <SentryRoute