diff --git a/app/client/package.json b/app/client/package.json
index adb4c390a8..89129b16a8 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -97,7 +97,7 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/design-system@2.1.21",
+    "design-system": "npm:@appsmithorg/design-system@2.1.23",
     "design-system-old": "npm:@appsmithorg/design-system-old@1.1.12",
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",
diff --git a/app/client/src/components/Sidebar/SidebarButton.tsx b/app/client/src/components/Sidebar/SidebarButton.tsx
new file mode 100644
index 0000000000..91f90b8438
--- /dev/null
+++ b/app/client/src/components/Sidebar/SidebarButton.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Icon, Text } from "design-system";
+import styled from "styled-components";
+
+interface Props {
+  title: string;
+  selected: boolean;
+  icon: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 64px;
+  width: 50px;
+  text-align: center;
+  align-items: center;
+  gap: 5px;
+`;
+
+const IconContainer = styled.div<{ selected: boolean }>`
+  padding: 2px;
+  background-color: ${(props) =>
+    props.selected ? "var(--ads-v2-color-bg-muted)" : "white"};
+  border-radius: 3px;
+  width: 28px;
+  cursor: pointer;
+`;
+
+function SidebarButton(props: Props) {
+  return (
+    <Container>
+      <IconContainer selected={props.selected}>
+        <Icon name={props.icon} size="lg" />
+      </IconContainer>
+      <Text kind="body-s">{props.title}</Text>
+    </Container>
+  );
+}
+
+export default SidebarButton;
diff --git a/app/client/src/components/Sidebar/index.tsx b/app/client/src/components/Sidebar/index.tsx
new file mode 100644
index 0000000000..0552130249
--- /dev/null
+++ b/app/client/src/components/Sidebar/index.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
+import { useSelector } from "react-redux";
+import styled from "styled-components";
+import SidebarButton from "./SidebarButton";
+
+const Container = styled.div`
+  width: 50px;
+  border-right: 1px solid var(--ads-v2-color-border);
+  height: 100%;
+`;
+
+function Sidebar() {
+  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+  if (!isAppSidebarEnabled) {
+    return null;
+  }
+  return (
+    <Container className="z-[3]">
+      <SidebarButton icon="database-2-line" selected={false} title="Data" />
+      <SidebarButton icon="file-copy-2-line" selected title="Pages" />
+    </Container>
+  );
+}
+
+export default Sidebar;
diff --git a/app/client/src/constants/AppConstants.ts b/app/client/src/constants/AppConstants.ts
index 474655eb71..43d201193c 100644
--- a/app/client/src/constants/AppConstants.ts
+++ b/app/client/src/constants/AppConstants.ts
@@ -125,6 +125,8 @@ export const SIDEBAR_WIDTH = {
   MINIMAL: 66,
 };
 
+export const APP_SIDEBAR_WIDTH = 50;
+
 export const APPLICATION_TITLE_MAX_WIDTH = 192;
 export const APPLICATION_TITLE_MAX_WIDTH_MOBILE = 150;
 //all values are in milliseconds
diff --git a/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx b/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx
index 9ebc351f02..f0ac582932 100644
--- a/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx
@@ -17,6 +17,7 @@ import EditorsRouter from "./routes";
 import EditorWrapperBody from "./commons/EditorWrapperBody";
 import WidgetsEditorEntityExplorer from "./WidgetsEditorEntityExplorer";
 import EditorWrapperContainer from "./commons/EditorWrapperContainer";
+import Sidebar from "components/Sidebar";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -30,6 +31,7 @@ function WidgetsEditorWrapper() {
   return (
     <>
       <EditorWrapperContainer>
+        <Sidebar />
         <WidgetsEditorEntityExplorer />
         <EditorWrapperBody id="app-body">
           <Switch key={BUILDER_PATH}>
diff --git a/app/client/src/utils/hooks/useDynamicAppLayout.tsx b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
index 0dd29351a3..74e0c35873 100644
--- a/app/client/src/utils/hooks/useDynamicAppLayout.tsx
+++ b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
@@ -4,7 +4,10 @@ import { useDispatch, useSelector } from "react-redux";
 
 import { updateLayoutForMobileBreakpointAction } from "actions/autoLayoutActions";
 import { updateCanvasLayoutAction } from "actions/editorActions";
-import { APP_SETTINGS_PANE_WIDTH } from "constants/AppConstants";
+import {
+  APP_SETTINGS_PANE_WIDTH,
+  APP_SIDEBAR_WIDTH,
+} from "constants/AppConstants";
 import {
   DefaultLayoutType,
   layoutConfigurations,
@@ -42,6 +45,7 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import { useLocation } from "react-router";
 import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
 import { getLayoutSystemType } from "selectors/layoutSystemSelectors";
+import { getIsAppSidebarEnabled } from "../../selectors/ideSelectors";
 
 const GUTTER_WIDTH = 72;
 export const AUTOLAYOUT_RESIZER_WIDTH_BUFFER = 40;
@@ -75,6 +79,7 @@ export const useDynamicAppLayout = () => {
   const queryParams = new URLSearchParams(search);
   const isEmbed = queryParams.get("embed");
   const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar");
+  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
 
   // /**
   //  * calculates min height
@@ -149,6 +154,10 @@ export const useDynamicAppLayout = () => {
       calculatedWidth -= explorerWidth;
     }
 
+    if (appMode === APP_MODE.EDIT && isAppSidebarEnabled) {
+      calculatedWidth -= APP_SIDEBAR_WIDTH;
+    }
+
     /**
      * If there is
      * 1. a sidebar for navigation,
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 800829b0a8..a24f926834 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -10490,7 +10490,7 @@ __metadata:
     cypress-xpath: ^1.6.0
     dayjs: ^1.10.6
     deep-diff: ^1.0.2
-    design-system: "npm:@appsmithorg/design-system@2.1.21"
+    design-system: "npm:@appsmithorg/design-system@2.1.23"
     design-system-old: "npm:@appsmithorg/design-system-old@1.1.12"
     diff: ^5.0.0
     dotenv: ^8.1.0
@@ -14603,9 +14603,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"design-system@npm:@appsmithorg/design-system@2.1.21":
-  version: 2.1.21
-  resolution: "@appsmithorg/design-system@npm:2.1.21"
+"design-system@npm:@appsmithorg/design-system@2.1.23":
+  version: 2.1.23
+  resolution: "@appsmithorg/design-system@npm:2.1.23"
   dependencies:
     "@radix-ui/react-dialog": ^1.0.2
     "@radix-ui/react-dropdown-menu": ^2.0.4
@@ -14631,7 +14631,7 @@ __metadata:
     react-dom: ^17.0.2
     react-router-dom: ^5.0.0
     styled-components: ^5.3.6
-  checksum: 7d23312f769b62c1cb84608a9083e6d39c67201096604e6c3d86bfab8b351c4b4055bd3ed1b199aa2e8464eef2ae2e77743c65537c80273ae174a3975ee0d5b9
+  checksum: c64a75d8e64cf09d6db915f37584a849e412f979966145461f538c9ee1b5bda6a26170526f5ad1e55366732d72b1e9e33c14a049e298876f0dfeb3a2adfacbb7
   languageName: node
   linkType: hard