diff --git a/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx b/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx
index 12ea1e627a..349042806c 100644
--- a/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx
+++ b/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx
@@ -1,71 +1,9 @@
-"use client";
 import { FC } from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams, usePathname } from "next/navigation";
-// plane imports
-import { EUserPermissionsLevel, IWorkspaceSidebarNavigationItem } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-// components
-import { SidebarNavItem } from "@/components/sidebar";
-import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
-// hooks
-import { useAppTheme, useUser, useUserPermissions, useWorkspace } from "@/hooks/store";
-// local imports
-import { getSidebarNavigationItemIcon } from "./helper";
+import { IWorkspaceSidebarNavigationItem } from "@plane/constants";
+import { SidebarItemBase } from "@/components/workspace/sidebar/sidebar-item";
 
-type TSidebarItemProps = {
+type Props = {
   item: IWorkspaceSidebarNavigationItem;
 };
 
-export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
-  const { item } = props;
-  const { t } = useTranslation();
-  // nextjs hooks
-  const pathname = usePathname();
-  const { workspaceSlug } = useParams();
-  const { allowPermissions } = useUserPermissions();
-  const { getNavigationPreferences } = useWorkspace();
-  const { data } = useUser();
-
-  // store hooks
-  const { toggleSidebar, isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
-
-  const handleLinkClick = () => {
-    if (window.innerWidth < 768) {
-      toggleSidebar();
-    }
-    if (isExtendedSidebarOpened) toggleExtendedSidebar(false);
-  };
-
-  const staticItems = ["home", "inbox", "pi-chat", "projects", "your_work"];
-
-  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
-    return null;
-  }
-
-  const itemHref =
-    item.key === "your_work"
-      ? `/${workspaceSlug.toString()}${item.href}/${data?.id}`
-      : `/${workspaceSlug.toString()}${item.href}`;
-
-  const isActive = itemHref === pathname;
-
-  const sidebarPreference = getNavigationPreferences(workspaceSlug.toString());
-  const isPinned = sidebarPreference?.[item.key]?.is_pinned;
-  if (!isPinned && !staticItems.includes(item.key)) return null;
-
-  const icon = getSidebarNavigationItemIcon(item.key);
-
-  return (
-    <Link href={itemHref} onClick={() => handleLinkClick()}>
-      <SidebarNavItem isActive={isActive}>
-        <div className="flex items-center gap-1.5 py-[1px]">
-          {icon}
-          <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
-        </div>
-        {item.key === "inbox" && <NotificationAppSidebarOption workspaceSlug={workspaceSlug?.toString()} />}
-      </SidebarNavItem>
-    </Link>
-  );
-});
+export const SidebarItem: FC<Props> = ({ item }) => <SidebarItemBase item={item} />;
diff --git a/apps/web/core/components/workspace/sidebar/sidebar-item.tsx b/apps/web/core/components/workspace/sidebar/sidebar-item.tsx
new file mode 100644
index 0000000000..085cbab7b0
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/sidebar-item.tsx
@@ -0,0 +1,60 @@
+// SidebarItemBase.tsx
+"use client";
+import { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { EUserPermissionsLevel, IWorkspaceSidebarNavigationItem } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { SidebarNavItem } from "@/components/sidebar";
+import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
+import { useAppTheme, useUser, useUserPermissions, useWorkspace } from "@/hooks/store";
+import { getSidebarNavigationItemIcon } from "@/plane-web/components/workspace";
+
+type Props = {
+  item: IWorkspaceSidebarNavigationItem;
+  additionalRender?: (itemKey: string, workspaceSlug: string) => ReactNode;
+  additionalStaticItems?: string[];
+};
+
+export const SidebarItemBase: FC<Props> = observer(({ item, additionalRender, additionalStaticItems }) => {
+  const { t } = useTranslation();
+  const pathname = usePathname();
+  const { workspaceSlug } = useParams();
+  const { allowPermissions } = useUserPermissions();
+  const { getNavigationPreferences } = useWorkspace();
+  const { data } = useUser();
+
+  const { toggleSidebar, isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
+
+  const handleLinkClick = () => {
+    if (window.innerWidth < 768) toggleSidebar();
+    if (isExtendedSidebarOpened) toggleExtendedSidebar(false);
+  };
+
+  const staticItems = ["home", "inbox", "pi_chat", "projects", "your_work", ...(additionalStaticItems || [])];
+  const slug = workspaceSlug?.toString() || "";
+
+  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, slug)) return null;
+
+  const sidebarPreference = getNavigationPreferences(slug);
+  const isPinned = sidebarPreference?.[item.key]?.is_pinned;
+  if (!isPinned && !staticItems.includes(item.key)) return null;
+
+  const itemHref = item.key === "your_work" ? `/${slug}${item.href}${data?.id}/` : `/${slug}${item.href}`;
+  const isActive = itemHref === pathname;
+  const icon = getSidebarNavigationItemIcon(item.key);
+
+  return (
+    <Link href={itemHref} onClick={handleLinkClick}>
+      <SidebarNavItem isActive={isActive}>
+        <div className="flex items-center gap-1.5 py-[1px]">
+          {icon}
+          <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+        </div>
+        {item.key === "inbox" && <NotificationAppSidebarOption workspaceSlug={slug} />}
+        {additionalRender?.(item.key, slug)}
+      </SidebarNavItem>
+    </Link>
+  );
+});