diff --git a/web/app/[workspaceSlug]/(projects)/notifications/layout.tsx b/web/app/[workspaceSlug]/(projects)/notifications/layout.tsx
index eb65bb2ab9..e3d7303636 100644
--- a/web/app/[workspaceSlug]/(projects)/notifications/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/notifications/layout.tsx
@@ -6,7 +6,7 @@ import { NotificationsSidebarRoot } from "@/components/workspace-notifications";
 export default function ProjectInboxIssuesLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="relative w-full h-full overflow-hidden flex items-center">
-      <NotificationsSidebar />
+      <NotificationsSidebarRoot />
       <div className="w-full h-full overflow-hidden overflow-y-auto">{children}</div>
     </div>
   );
diff --git a/web/ee/components/workspace-notifications/root.tsx b/web/ee/components/workspace-notifications/root.tsx
index 6eea5a16e9..f926084b7e 100644
--- a/web/ee/components/workspace-notifications/root.tsx
+++ b/web/ee/components/workspace-notifications/root.tsx
@@ -1,106 +1,31 @@
-"use client";
+// export * from "./sidebar";
 
-import { FC } from "react";
-import { observer } from "mobx-react";
+import React, { useMemo } from "react";
+import dynamic from "next/dynamic";
 import { useParams } from "next/navigation";
-// components
-import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
-import { CountChip } from "@/components/common";
-import {
-  NotificationsLoader,
-  NotificationEmptyState,
-  NotificationSidebarHeader,
-  AppliedFilters,
-} from "@/components/workspace-notifications";
-// constants
-import { NOTIFICATION_TABS } from "@/constants/notification";
-// helpers
-import { cn } from "@/helpers/common.helper";
-import { getNumberCount } from "@/helpers/string.helper";
-// hooks
-import { useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
-// plane web components
-import { NotificationCardListRoot } from "@/plane-web/components/workspace-notifications";
+import { useFlag } from "@/plane-web/hooks/store";
 
-export const NotificationsSidebar: FC = observer(() => {
+export const NotificationsSidebarRoot = () => {
   const { workspaceSlug } = useParams();
-  // hooks
-  const { getWorkspaceBySlug } = useWorkspace();
-  const {
-    currentSelectedNotificationId,
-    unreadNotificationsCount,
-    loader,
-    notificationIssueIdsByWorkspaceId,
-    currentNotificationTab,
-    setCurrentNotificationTab,
-  } = useWorkspaceNotifications();
-  // derived values
-  const workspace = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString()) : undefined;
-  const groupedNotificationIssueIds = workspace ? notificationIssueIdsByWorkspaceId(workspace.id) : undefined;
-
-  if (!workspaceSlug || !workspace) return <></>;
-
-  return (
-    <div
-      className={cn(
-        "relative border-0 md:border-r border-custom-border-200 z-[10] flex-shrink-0 bg-custom-background-100 h-full transition-all",
-        currentSelectedNotificationId ? "w-0 md:w-2/6" : "w-full md:w-2/6"
-      )}
-    >
-      <div className="relative w-full h-full flex flex-col">
-        <Row className="h-[3.75rem] border-b border-custom-border-200 flex">
-          <NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
-        </Row>
-
-        <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
-          {NOTIFICATION_TABS.map((tab) => (
-            <div
-              key={tab.value}
-              className="h-full px-3 relative cursor-pointer"
-              onClick={() => currentNotificationTab != tab.value && setCurrentNotificationTab(tab.value)}
-            >
-              <div
-                className={cn(
-                  `relative h-full flex justify-center items-center gap-1 text-sm transition-all`,
-                  currentNotificationTab === tab.value
-                    ? "text-custom-primary-100"
-                    : "text-custom-text-100 hover:text-custom-text-200"
-                )}
-              >
-                <div className="font-medium">{tab.label}</div>
-                {tab.count(unreadNotificationsCount) > 0 && (
-                  <CountChip count={getNumberCount(tab.count(unreadNotificationsCount))} />
-                )}
-              </div>
-              {currentNotificationTab === tab.value && (
-                <div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-custom-primary-100" />
-              )}
-            </div>
-          ))}
-        </Header>
-
-        {/* applied filters */}
-        <AppliedFilters workspaceSlug={workspaceSlug.toString()} />
-
-        {/* rendering notifications */}
-        {loader === "init-loader" ? (
-          <div className="relative w-full h-full overflow-hidden">
-            <NotificationsLoader />
-          </div>
-        ) : (
-          <>
-            {groupedNotificationIssueIds && groupedNotificationIssueIds.length > 0 ? (
-              <ContentWrapper variant={ERowVariant.HUGGING}>
-                <NotificationCardListRoot workspaceSlug={workspaceSlug.toString()} workspaceId={workspace?.id} />
-              </ContentWrapper>
-            ) : (
-              <div className="relative w-full h-full flex justify-center items-center">
-                <NotificationEmptyState />
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </div>
+  const isFeatureEnabled = useFlag(workspaceSlug.toString(), "INBOX_STACKING");
+  const NotificationsSideBarRoot = useMemo(
+    () =>
+      dynamic(
+        () =>
+          isFeatureEnabled
+            ? import(`ee/components/workspace-notifications/sidebar`).then((module) => ({
+                default: module["NotificationsSidebar"],
+              }))
+            : import("ce/components/workspace-notifications/root").then((module) => ({
+                default: module["NotificationsSidebar"],
+              })),
+        {
+          // TODO: Add loading component
+          loading: () => <></>,
+        }
+      ),
+    [isFeatureEnabled]
   );
-});
+
+  return <NotificationsSideBarRoot />;
+};
diff --git a/web/ee/components/workspace-notifications/sidebar.tsx b/web/ee/components/workspace-notifications/sidebar.tsx
new file mode 100644
index 0000000000..6eea5a16e9
--- /dev/null
+++ b/web/ee/components/workspace-notifications/sidebar.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
+import { CountChip } from "@/components/common";
+import {
+  NotificationsLoader,
+  NotificationEmptyState,
+  NotificationSidebarHeader,
+  AppliedFilters,
+} from "@/components/workspace-notifications";
+// constants
+import { NOTIFICATION_TABS } from "@/constants/notification";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { getNumberCount } from "@/helpers/string.helper";
+// hooks
+import { useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
+// plane web components
+import { NotificationCardListRoot } from "@/plane-web/components/workspace-notifications";
+
+export const NotificationsSidebar: FC = observer(() => {
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+  const {
+    currentSelectedNotificationId,
+    unreadNotificationsCount,
+    loader,
+    notificationIssueIdsByWorkspaceId,
+    currentNotificationTab,
+    setCurrentNotificationTab,
+  } = useWorkspaceNotifications();
+  // derived values
+  const workspace = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString()) : undefined;
+  const groupedNotificationIssueIds = workspace ? notificationIssueIdsByWorkspaceId(workspace.id) : undefined;
+
+  if (!workspaceSlug || !workspace) return <></>;
+
+  return (
+    <div
+      className={cn(
+        "relative border-0 md:border-r border-custom-border-200 z-[10] flex-shrink-0 bg-custom-background-100 h-full transition-all",
+        currentSelectedNotificationId ? "w-0 md:w-2/6" : "w-full md:w-2/6"
+      )}
+    >
+      <div className="relative w-full h-full flex flex-col">
+        <Row className="h-[3.75rem] border-b border-custom-border-200 flex">
+          <NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
+        </Row>
+
+        <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
+          {NOTIFICATION_TABS.map((tab) => (
+            <div
+              key={tab.value}
+              className="h-full px-3 relative cursor-pointer"
+              onClick={() => currentNotificationTab != tab.value && setCurrentNotificationTab(tab.value)}
+            >
+              <div
+                className={cn(
+                  `relative h-full flex justify-center items-center gap-1 text-sm transition-all`,
+                  currentNotificationTab === tab.value
+                    ? "text-custom-primary-100"
+                    : "text-custom-text-100 hover:text-custom-text-200"
+                )}
+              >
+                <div className="font-medium">{tab.label}</div>
+                {tab.count(unreadNotificationsCount) > 0 && (
+                  <CountChip count={getNumberCount(tab.count(unreadNotificationsCount))} />
+                )}
+              </div>
+              {currentNotificationTab === tab.value && (
+                <div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-custom-primary-100" />
+              )}
+            </div>
+          ))}
+        </Header>
+
+        {/* applied filters */}
+        <AppliedFilters workspaceSlug={workspaceSlug.toString()} />
+
+        {/* rendering notifications */}
+        {loader === "init-loader" ? (
+          <div className="relative w-full h-full overflow-hidden">
+            <NotificationsLoader />
+          </div>
+        ) : (
+          <>
+            {groupedNotificationIssueIds && groupedNotificationIssueIds.length > 0 ? (
+              <ContentWrapper variant={ERowVariant.HUGGING}>
+                <NotificationCardListRoot workspaceSlug={workspaceSlug.toString()} workspaceId={workspace?.id} />
+              </ContentWrapper>
+            ) : (
+              <div className="relative w-full h-full flex justify-center items-center">
+                <NotificationEmptyState />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/web/ee/hooks/store/use-flag.ts b/web/ee/hooks/store/use-flag.ts
index 530cf6d405..bd89653ea4 100644
--- a/web/ee/hooks/store/use-flag.ts
+++ b/web/ee/hooks/store/use-flag.ts
@@ -24,6 +24,7 @@ export enum E_FEATURE_FLAGS {
   FILE_SIZE_LIMIT_PRO = "FILE_SIZE_LIMIT_PRO",
   NO_LOAD = "NO_LOAD",
   TIMELINE_DEPENDENCY = "TIMELINE_DEPENDENCY",
+  INBOX_STACKING = "INBOX_STACKING",
   // integrations
   SILO_IMPORTERS = "SILO_IMPORTERS",
   SILO_INTEGRATIONS = "SILO_INTEGRATIONS",