diff --git a/app/client/src/entities/IDE/constants.ts b/app/client/src/entities/IDE/constants.ts
index 250d832264..a76ddb8e57 100644
--- a/app/client/src/entities/IDE/constants.ts
+++ b/app/client/src/entities/IDE/constants.ts
@@ -1,4 +1,4 @@
-export enum AppState {
+export enum EditorState {
   DATA = "DATA",
   EDITOR = "EDITOR",
   SETTINGS = "SETTINGS",
@@ -6,7 +6,7 @@ export enum AppState {
 }
 
 export interface SidebarButton {
-  state: AppState;
+  state: EditorState;
   icon: string;
   title?: string;
   urlSuffix: string;
@@ -14,28 +14,28 @@ export interface SidebarButton {
 
 export const TopButtons: SidebarButton[] = [
   {
-    state: AppState.EDITOR,
+    state: EditorState.EDITOR,
     icon: "file-copy-2-line",
     title: "Editor",
     urlSuffix: "",
   },
   {
-    state: AppState.DATA,
+    state: EditorState.DATA,
     icon: "database-2-line",
     title: "Data",
     urlSuffix: "datasource",
   },
 ];
 
-export const ButtonButtons: SidebarButton[] = [
+export const BottomButtons: SidebarButton[] = [
   {
-    state: AppState.LIBRARIES,
+    state: EditorState.LIBRARIES,
     icon: "box-3-line",
     title: "Libraries",
     urlSuffix: "libraries",
   },
   {
-    state: AppState.SETTINGS,
+    state: EditorState.SETTINGS,
     icon: "settings-2-line",
     title: "Settings",
     urlSuffix: "settings",
diff --git a/app/client/src/entities/IDE/utils.ts b/app/client/src/entities/IDE/utils.ts
index 39f6211b2c..2caac2046c 100644
--- a/app/client/src/entities/IDE/utils.ts
+++ b/app/client/src/entities/IDE/utils.ts
@@ -7,9 +7,9 @@ import {
   INTEGRATION_EDITOR_PATH,
   SAAS_GSHEET_EDITOR_ID_PATH,
 } from "constants/routes";
-import { AppState } from "./constants";
+import { EditorState } from "./constants";
 
-export function getCurrentAppState(currentUrl: string): AppState {
+export function getCurrentAppState(currentUrl: string): EditorState {
   const match = matchPath<{
     appState?: "datasource" | "settings" | "libraries";
     datasourceId?: string;
@@ -31,14 +31,14 @@ export function getCurrentAppState(currentUrl: string): AppState {
   if (match) {
     const { appState, datasourceId, selectedTab } = match.params;
     if (appState === "datasource" || datasourceId || selectedTab) {
-      return AppState.DATA;
+      return EditorState.DATA;
     } else if (appState === "settings") {
-      return AppState.SETTINGS;
+      return EditorState.SETTINGS;
     } else if (appState === "libraries") {
-      return AppState.LIBRARIES;
+      return EditorState.LIBRARIES;
     } else {
-      return AppState.EDITOR;
+      return EditorState.EDITOR;
     }
   }
-  return AppState.EDITOR;
+  return EditorState.EDITOR;
 }
diff --git a/app/client/src/layoutSystems/common/dropTarget/DropTargetComponent.tsx b/app/client/src/layoutSystems/common/dropTarget/DropTargetComponent.tsx
index 841dae9a19..b004a249ef 100644
--- a/app/client/src/layoutSystems/common/dropTarget/DropTargetComponent.tsx
+++ b/app/client/src/layoutSystems/common/dropTarget/DropTargetComponent.tsx
@@ -50,7 +50,7 @@ import StarterBuildingBlocks from "./starterBuildingBlocks";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import useCurrentAppState from "pages/Editor/IDE/hooks";
-import { AppState as IDEAppState } from "entities/IDE/constants";
+import { EditorState as IDEAppState } from "entities/IDE/constants";
 
 export type DropTargetComponentProps = PropsWithChildren<{
   snapColumnSpace: number;
diff --git a/app/client/src/navigation/FocusEntity.test.ts b/app/client/src/navigation/FocusEntity.test.ts
index 179c4d1a48..7b74daf7d1 100644
--- a/app/client/src/navigation/FocusEntity.test.ts
+++ b/app/client/src/navigation/FocusEntity.test.ts
@@ -1,5 +1,5 @@
 import { identifyEntityFromPath, FocusEntity } from "navigation/FocusEntity";
-import { AppState } from "../entities/IDE/constants";
+import { EditorState } from "../entities/IDE/constants";
 
 describe("identifyEntityFromPath", () => {
   const oldUrlCases = [
@@ -9,7 +9,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.CANVAS,
         id: "",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -18,7 +18,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.PROPERTY_PANE,
         id: "ryvc8i7oja",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -27,7 +27,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.QUERY_LIST,
         id: "",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -36,7 +36,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.QUERY,
         id: "myApiId",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -45,7 +45,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.QUERY,
         id: "myQueryId",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -54,7 +54,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.JS_OBJECT_LIST,
         id: "",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -63,7 +63,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.JS_OBJECT,
         id: "myJSId",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -72,7 +72,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.DATASOURCE_LIST,
         id: "",
         pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
       },
     },
     {
@@ -81,7 +81,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.DATASOURCE,
         id: "myDatasourceId",
         pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
       },
     },
   ];
@@ -92,7 +92,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.CANVAS,
         id: "",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -101,7 +101,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.PROPERTY_PANE,
         id: "ryvc8i7oja",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -110,7 +110,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.QUERY_LIST,
         id: "",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -119,7 +119,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.QUERY,
         id: "myApiId",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -128,7 +128,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.QUERY,
         id: "myQueryId",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -137,7 +137,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.JS_OBJECT_LIST,
         id: "",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -146,7 +146,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.JS_OBJECT,
         id: "myJSId",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -155,7 +155,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.DATASOURCE_LIST,
         id: "",
         pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
       },
     },
     {
@@ -164,7 +164,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.DATASOURCE,
         id: "myDatasourceId",
         pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
       },
     },
   ];
@@ -175,7 +175,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.CANVAS,
         id: "",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -184,7 +184,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.PROPERTY_PANE,
         id: "ryvc8i7oja",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -193,7 +193,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.QUERY_LIST,
         id: "",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -202,7 +202,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.QUERY,
         id: "myApiId",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -211,7 +211,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.QUERY,
         id: "myQueryId",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -220,7 +220,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.JS_OBJECT_LIST,
         id: "",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -229,7 +229,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.JS_OBJECT,
         id: "myJSId",
         pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       },
     },
     {
@@ -238,7 +238,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.DATASOURCE_LIST,
         id: "",
         pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
       },
     },
     {
@@ -247,7 +247,7 @@ describe("identifyEntityFromPath", () => {
         entity: FocusEntity.DATASOURCE,
         id: "myDatasourceId",
         pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
       },
     },
   ];
diff --git a/app/client/src/navigation/FocusEntity.ts b/app/client/src/navigation/FocusEntity.ts
index 317f9629e2..3f0cb8657d 100644
--- a/app/client/src/navigation/FocusEntity.ts
+++ b/app/client/src/navigation/FocusEntity.ts
@@ -15,7 +15,7 @@ import {
   SAAS_EDITOR_DATASOURCE_ID_PATH,
 } from "pages/Editor/SaaSEditor/constants";
 import { TEMP_DATASOURCE_ID } from "constants/Datasource";
-import { AppState } from "../entities/IDE/constants";
+import { EditorState } from "../entities/IDE/constants";
 
 export enum FocusEntity {
   PAGE = "PAGE",
@@ -45,7 +45,7 @@ export const FocusStoreHierarchy: Partial<Record<FocusEntity, FocusEntity>> = {
 export interface FocusEntityInfo {
   entity: FocusEntity;
   id: string;
-  appState: AppState;
+  appState: EditorState;
   pageId?: string;
 }
 
@@ -100,7 +100,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
       entity: FocusEntity.NONE,
       id: "",
       pageId: "",
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
     };
   }
   if (match.params.apiId) {
@@ -109,14 +109,14 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
         entity: FocusEntity.QUERY,
         id: match.params.apiId,
         pageId: match.params.pageId,
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
       };
     }
     return {
       entity: FocusEntity.QUERY,
       id: match.params.apiId,
       pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
     };
   }
   if (match.params.datasourceId) {
@@ -125,14 +125,14 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
         entity: FocusEntity.NONE,
         id: match.params.datasourceId,
         pageId: match.params.pageId,
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
       };
     } else {
       return {
         entity: FocusEntity.DATASOURCE,
         id: match.params.datasourceId,
         pageId: match.params.pageId,
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
       };
     }
   }
@@ -141,7 +141,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
       entity: FocusEntity.DATASOURCE,
       id: match.params.selectedTab,
       pageId: match.params.pageId,
-      appState: AppState.DATA,
+      appState: EditorState.DATA,
     };
   }
   if (match.params.entity === "datasource") {
@@ -149,7 +149,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
       entity: FocusEntity.DATASOURCE_LIST,
       id: "",
       pageId: match.params.pageId,
-      appState: AppState.DATA,
+      appState: EditorState.DATA,
     };
   }
   if (match.params.queryId) {
@@ -157,7 +157,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
       entity: FocusEntity.QUERY,
       id: match.params.queryId,
       pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
     };
   }
   if (match.params.collectionId) {
@@ -165,7 +165,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
       entity: FocusEntity.JS_OBJECT,
       id: match.params.collectionId,
       pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
     };
   }
   if (match.params.widgetIds) {
@@ -173,7 +173,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
       entity: FocusEntity.PROPERTY_PANE,
       id: match.params.widgetIds,
       pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
     };
   }
   if (match.params.entity === "queries") {
@@ -181,7 +181,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
       entity: FocusEntity.QUERY_LIST,
       id: "",
       pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
     };
   }
   if (match.params.entity === "jsObjects") {
@@ -189,7 +189,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
       entity: FocusEntity.JS_OBJECT_LIST,
       id: "",
       pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
     };
   }
   if (match.params.entity) {
@@ -197,7 +197,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
       return {
         entity: FocusEntity.LIBRARY,
         id: "",
-        appState: AppState.LIBRARIES,
+        appState: EditorState.LIBRARIES,
         pageId: match.params.pageId,
       };
     }
@@ -205,7 +205,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
       return {
         entity: FocusEntity.SETTINGS,
         id: "",
-        appState: AppState.SETTINGS,
+        appState: EditorState.SETTINGS,
         pageId: match.params.pageId,
       };
     }
@@ -214,6 +214,6 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
     entity: FocusEntity.CANVAS,
     id: "",
     pageId: match.params.pageId,
-    appState: AppState.EDITOR,
+    appState: EditorState.EDITOR,
   };
 }
diff --git a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
index b0167afa77..ba1e814cd9 100644
--- a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
@@ -21,7 +21,7 @@ import { PagesPane } from "../PagesPane";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 
-const LeftPaneContainer = styled.div`
+export const LeftPaneContainer = styled.div`
   height: 100%;
   min-width: 150px;
   border-right: 1px solid var(--ads-v2-color-border);
diff --git a/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx b/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx
new file mode 100644
index 0000000000..77f5f840f0
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import SidebarButton from "./SidebarButton";
+import type { SidebarButton as SidebarButtonType } from "entities/IDE/constants";
+import {
+  AnnouncementPopover,
+  AnnouncementPopoverTrigger,
+  AnnouncementPopoverContent,
+  Button,
+} from "design-system";
+import { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks";
+
+const Container = styled.div`
+  width: 50px;
+  border-right: 1px solid var(--ads-v2-color-border);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: var(--ads-v2-color-bg);
+  position: relative;
+`;
+
+const DummyTrigger = styled.div`
+  width: 0;
+  height: 0;
+  position: absolute;
+  right: 0;
+  top: 10%;
+`;
+
+interface SidebarComponentProps {
+  topButtons: SidebarButtonType[];
+  bottomButtons: SidebarButtonType[];
+  appState: string;
+  onClick: (suffix: string) => void;
+  isAppSidebarAnnouncementEnabled: boolean;
+}
+
+function SidebarComponent(props: SidebarComponentProps) {
+  const {
+    appState,
+    bottomButtons,
+    isAppSidebarAnnouncementEnabled,
+    onClick,
+    topButtons,
+  } = props;
+  const [isPopoverOpen, setIsPopoverOpen] = useState(true);
+  const isAppSidebarEnabled = useIsAppSidebarEnabled();
+  const isAppSidebarAnnouncementDismissed =
+    localStorage.getItem("isAppSidebarAnnouncementDismissed") === "true";
+
+  const handlePopoverClose = () => {
+    setIsPopoverOpen(false);
+    localStorage.setItem(
+      "isAppSidebarAnnouncementDismissed",
+      JSON.stringify(true),
+    );
+  };
+
+  if (!isAppSidebarEnabled) {
+    return null;
+  }
+
+  return (
+    <Container className="t--sidebar" id="t--app-sidebar">
+      {isAppSidebarAnnouncementEnabled &&
+        !isAppSidebarAnnouncementDismissed && (
+          <AnnouncementPopover open={isPopoverOpen}>
+            <AnnouncementPopoverTrigger>
+              <DummyTrigger className="sidebar-popover-trigger" />
+            </AnnouncementPopoverTrigger>
+            <AnnouncementPopoverContent
+              align="center"
+              arrowFillColor="#F6F2FA"
+              banner="https://assets.appsmith.com/new-sidebar-banner.svg"
+              collisionPadding={{ top: 20 }}
+              description="Navigate faster through datasources, pages, and app settings."
+              footer={
+                <Button kind="primary" onClick={handlePopoverClose} size="md">
+                  Got it
+                </Button>
+              }
+              onCloseButtonClick={handlePopoverClose}
+              side="right"
+              title="App-level items have a new home!"
+            />
+          </AnnouncementPopover>
+        )}
+      <div>
+        {topButtons.map((b) => (
+          <SidebarButton
+            icon={b.icon}
+            key={b.state}
+            onClick={() => {
+              if (appState !== b.state) {
+                onClick(b.urlSuffix);
+              }
+            }}
+            selected={appState === b.state}
+            title={b.title}
+          />
+        ))}
+      </div>
+      <div>
+        {bottomButtons.map((b) => (
+          <SidebarButton
+            icon={b.icon}
+            key={b.state}
+            onClick={() => {
+              if (appState !== b.state) {
+                onClick(b.urlSuffix);
+              }
+            }}
+            selected={appState === b.state}
+            tooltip={b.title}
+          />
+        ))}
+      </div>
+    </Container>
+  );
+}
+
+export default SidebarComponent;
diff --git a/app/client/src/pages/Editor/IDE/Sidebar/index.tsx b/app/client/src/pages/Editor/IDE/Sidebar/index.tsx
index a4a5453256..46a4cef906 100644
--- a/app/client/src/pages/Editor/IDE/Sidebar/index.tsx
+++ b/app/client/src/pages/Editor/IDE/Sidebar/index.tsx
@@ -1,53 +1,22 @@
-import React, { useCallback, useState, useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { getIsAppSidebarAnnouncementEnabled } from "selectors/ideSelectors";
 import { useSelector, useDispatch } from "react-redux";
-import styled from "styled-components";
-import SidebarButton from "./SidebarButton";
 import { builderURL } from "@appsmith/RouteBuilder";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import history, { NavigationMethod } from "utils/history";
-import { ButtonButtons, TopButtons } from "entities/IDE/constants";
 import useCurrentAppState from "../hooks";
 import { getCurrentWorkspaceId } from "@appsmith/selectors/workspaceSelectors";
 import { fetchWorkspace } from "@appsmith/actions/workspaceActions";
-import {
-  AnnouncementPopover,
-  AnnouncementPopoverTrigger,
-  AnnouncementPopoverContent,
-  Button,
-} from "design-system";
 import { inGuidedTour } from "selectors/onboardingSelectors";
-import { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks";
-
-const Container = styled.div`
-  width: 50px;
-  border-right: 1px solid var(--ads-v2-color-border);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: var(--ads-v2-color-bg);
-  position: relative;
-`;
-
-const DummyTrigger = styled.div`
-  width: 0;
-  height: 0;
-  position: absolute;
-  right: 0;
-  top: 10%;
-`;
+import SidebarComponent from "./SidebarComponent";
+import { BottomButtons, TopButtons } from "entities/IDE/constants";
 
 function Sidebar() {
   const dispatch = useDispatch();
   const appState = useCurrentAppState();
-  const [isPopoverOpen, setIsPopoverOpen] = useState(true);
-  const isAppSidebarEnabled = useIsAppSidebarEnabled();
   const isAppSidebarAnnouncementEnabled = useSelector(
     getIsAppSidebarAnnouncementEnabled,
   );
-  const isAppSidebarAnnouncementDismissed =
-    localStorage.getItem("isAppSidebarAnnouncementDismissed") === "true";
   const pageId = useSelector(getCurrentPageId);
 
   const currentWorkspaceId = useSelector(getCurrentWorkspaceId);
@@ -71,78 +40,19 @@ function Sidebar() {
     },
     [pageId],
   );
-  if (!isAppSidebarEnabled) {
-    return null;
-  }
-
-  const handlePopoverClose = () => {
-    setIsPopoverOpen(false);
-    localStorage.setItem(
-      "isAppSidebarAnnouncementDismissed",
-      JSON.stringify(true),
-    );
-  };
 
   if (guidedTourEnabled) {
     return null;
   }
 
   return (
-    <Container className="t--sidebar" id="t--app-sidebar">
-      {isAppSidebarAnnouncementEnabled &&
-        !isAppSidebarAnnouncementDismissed && (
-          <AnnouncementPopover open={isPopoverOpen}>
-            <AnnouncementPopoverTrigger>
-              <DummyTrigger className="sidebar-popover-trigger" />
-            </AnnouncementPopoverTrigger>
-            <AnnouncementPopoverContent
-              align="center"
-              arrowFillColor="#F6F2FA"
-              banner="https://assets.appsmith.com/new-sidebar-banner.svg"
-              collisionPadding={{ top: 20 }}
-              description="Navigate faster through datasources, pages, and app settings."
-              footer={
-                <Button kind="primary" onClick={handlePopoverClose} size="md">
-                  Got it
-                </Button>
-              }
-              onCloseButtonClick={handlePopoverClose}
-              side="right"
-              title="App-level items have a new home!"
-            />
-          </AnnouncementPopover>
-        )}
-      <div>
-        {TopButtons.map((b) => (
-          <SidebarButton
-            icon={b.icon}
-            key={b.state}
-            onClick={() => {
-              if (appState !== b.state) {
-                onClick(b.urlSuffix);
-              }
-            }}
-            selected={appState === b.state}
-            title={b.title}
-          />
-        ))}
-      </div>
-      <div>
-        {ButtonButtons.map((b) => (
-          <SidebarButton
-            icon={b.icon}
-            key={b.state}
-            onClick={() => {
-              if (appState !== b.state) {
-                onClick(b.urlSuffix);
-              }
-            }}
-            selected={appState === b.state}
-            tooltip={b.title}
-          />
-        ))}
-      </div>
-    </Container>
+    <SidebarComponent
+      appState={appState}
+      bottomButtons={BottomButtons}
+      isAppSidebarAnnouncementEnabled={isAppSidebarAnnouncementEnabled}
+      onClick={onClick}
+      topButtons={TopButtons}
+    />
   );
 }
 
diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts
index 40d9a511a5..b79bd4d002 100644
--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { AppState } from "entities/IDE/constants";
+import { EditorState } from "entities/IDE/constants";
 import { useLocation } from "react-router";
 import { getCurrentAppState } from "entities/IDE/utils";
 
 const useCurrentAppState = () => {
-  const [appState, setAppState] = useState(AppState.EDITOR);
+  const [appState, setAppState] = useState(EditorState.EDITOR);
   const { pathname } = useLocation();
   useEffect(() => {
     setAppState(getCurrentAppState(pathname));
diff --git a/app/client/src/sagas/ContextSwitchingSaga.ts b/app/client/src/sagas/ContextSwitchingSaga.ts
index cb9785d8d0..884827ecca 100644
--- a/app/client/src/sagas/ContextSwitchingSaga.ts
+++ b/app/client/src/sagas/ContextSwitchingSaga.ts
@@ -27,7 +27,7 @@ import {
   isAppStateChange,
   isPageChange,
 } from "../navigation/FocusUtils";
-import { AppState } from "../entities/IDE/constants";
+import { EditorState } from "../entities/IDE/constants";
 import { getCurrentApplicationId } from "../selectors/editorSelectors";
 import { get } from "lodash";
 
@@ -212,7 +212,7 @@ function* getEntitiesForStore(previousPath: string, currentPath: string) {
         entityInfo: {
           entity: FocusEntity.PAGE,
           id: prevFocusEntityInfo.pageId,
-          appState: AppState.EDITOR,
+          appState: EditorState.EDITOR,
         },
       });
     }
@@ -282,7 +282,7 @@ function* getEntitiesForSet(
         entityInfo: {
           entity: FocusEntity.PAGE,
           id: currentEntityInfo.pageId,
-          appState: AppState.EDITOR,
+          appState: EditorState.EDITOR,
         },
       });
       const focusHistory: FocusState = yield select(getCurrentFocusInfo, key);
diff --git a/app/client/src/utils/history.ts b/app/client/src/utils/history.ts
index beb952ad04..ade7e61330 100644
--- a/app/client/src/utils/history.ts
+++ b/app/client/src/utils/history.ts
@@ -15,6 +15,7 @@ export enum NavigationMethod {
   ActionBackButton = "ActionBackButton",
   ContextSwitching = "ContextSwitching",
   AppSidebar = "AppSidebar",
+  PackageSidebar = "PackageSidebar",
 }
 
 export interface AppsmithLocationState {