diff --git a/web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx
index 4c9a90b3bfe..b9b78bd5f46 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx
@@ -1,11 +1,4 @@
-"use client";
-import { useParams } from "next/navigation";
-import { useWorkspace } from "@/hooks/store";
-import ProjectsPageRoot from "@/plane-web/components/projects/page";
+import ProjectPageRoot from "@/plane-web/components/projects/page";
 
-const ProjectsPage = () => {
-  const { currentWorkspace } = useWorkspace();
-  const { workspaceSlug } = useParams();
-  return <ProjectsPageRoot currentWorkspace={currentWorkspace} workspaceSlug={workspaceSlug.toString()} />;
-};
+const ProjectsPage = () => <ProjectPageRoot />;
 export default ProjectsPage;
diff --git a/web/ce/components/projects/page.tsx b/web/ce/components/projects/page.tsx
index 3c7b6181758..960c5973000 100644
--- a/web/ce/components/projects/page.tsx
+++ b/web/ce/components/projects/page.tsx
@@ -1,86 +1,5 @@
-"use client";
+import Root from "@/components/project/root";
 
-import { useCallback } from "react";
-import { observer } from "mobx-react";
-// types
-import { IWorkspace, TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
-// components
-import { PageHead } from "@/components/core";
-import { ProjectAppliedFiltersList, ProjectCardList } from "@/components/project";
-// helpers
-import { calculateTotalFilters } from "@/helpers/filter.helper";
-// hooks
-import { useProject, useProjectFilter } from "@/hooks/store";
+const ProjectPageRoot = () => <Root />;
 
-type Props = {
-  currentWorkspace: IWorkspace | null;
-  workspaceSlug: string | null;
-};
-const ProjectsPageRoot: React.FC<Props> = observer((props) => {
-  const { currentWorkspace, workspaceSlug } = props;
-  // store
-  const { totalProjectIds, filteredProjectIds } = useProject();
-  const {
-    currentWorkspaceFilters,
-    currentWorkspaceAppliedDisplayFilters,
-    clearAllFilters,
-    clearAllAppliedDisplayFilters,
-    updateFilters,
-    updateDisplayFilters,
-  } = useProjectFilter();
-  // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Projects` : undefined;
-
-  const handleRemoveFilter = useCallback(
-    (key: keyof TProjectFilters, value: string | null) => {
-      if (!workspaceSlug) return;
-      let newValues = currentWorkspaceFilters?.[key] ?? [];
-
-      if (!value) newValues = [];
-      else newValues = newValues.filter((val) => val !== value);
-
-      updateFilters(workspaceSlug.toString(), { [key]: newValues });
-    },
-    [currentWorkspaceFilters, updateFilters, workspaceSlug]
-  );
-
-  const handleRemoveDisplayFilter = useCallback(
-    (key: TProjectAppliedDisplayFilterKeys) => {
-      if (!workspaceSlug) return;
-      updateDisplayFilters(workspaceSlug.toString(), { [key]: false });
-    },
-    [updateDisplayFilters, workspaceSlug]
-  );
-
-  const handleClearAllFilters = useCallback(() => {
-    if (!workspaceSlug) return;
-    clearAllFilters(workspaceSlug.toString());
-    clearAllAppliedDisplayFilters(workspaceSlug.toString());
-  }, [clearAllFilters, clearAllAppliedDisplayFilters, workspaceSlug]);
-
-  return (
-    <>
-      <PageHead title={pageTitle} />
-      <div className="flex h-full w-full flex-col">
-        {(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 ||
-          currentWorkspaceAppliedDisplayFilters?.length !== 0) && (
-          <div className="border-b border-custom-border-200 px-5 py-3">
-            <ProjectAppliedFiltersList
-              appliedFilters={currentWorkspaceFilters ?? {}}
-              appliedDisplayFilters={currentWorkspaceAppliedDisplayFilters ?? []}
-              handleClearAllFilters={handleClearAllFilters}
-              handleRemoveFilter={handleRemoveFilter}
-              handleRemoveDisplayFilter={handleRemoveDisplayFilter}
-              filteredProjects={filteredProjectIds?.length ?? 0}
-              totalProjects={totalProjectIds?.length ?? 0}
-              alwaysAllowEditing
-            />
-          </div>
-        )}
-        <ProjectCardList />
-      </div>
-    </>
-  );
-});
-
-export default ProjectsPageRoot;
+export default ProjectPageRoot;
diff --git a/web/core/components/project/root.tsx b/web/core/components/project/root.tsx
new file mode 100644
index 00000000000..ed5bbee36b7
--- /dev/null
+++ b/web/core/components/project/root.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+// types
+import { useParams } from "next/navigation";
+import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
+// components
+import { PageHead } from "@/components/core";
+import { ProjectAppliedFiltersList, ProjectCardList } from "@/components/project";
+// helpers
+import { calculateTotalFilters } from "@/helpers/filter.helper";
+// hooks
+import { useProject, useProjectFilter, useWorkspace } from "@/hooks/store";
+
+const Root = observer(() => {
+  const { currentWorkspace } = useWorkspace();
+  const { workspaceSlug } = useParams();
+  // store
+  const { totalProjectIds, filteredProjectIds } = useProject();
+  const {
+    currentWorkspaceFilters,
+    currentWorkspaceAppliedDisplayFilters,
+    clearAllFilters,
+    clearAllAppliedDisplayFilters,
+    updateFilters,
+    updateDisplayFilters,
+  } = useProjectFilter();
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Projects` : undefined;
+
+  const handleRemoveFilter = useCallback(
+    (key: keyof TProjectFilters, value: string | null) => {
+      if (!workspaceSlug) return;
+      let newValues = currentWorkspaceFilters?.[key] ?? [];
+
+      if (!value) newValues = [];
+      else newValues = newValues.filter((val) => val !== value);
+
+      updateFilters(workspaceSlug.toString(), { [key]: newValues });
+    },
+    [currentWorkspaceFilters, updateFilters, workspaceSlug]
+  );
+
+  const handleRemoveDisplayFilter = useCallback(
+    (key: TProjectAppliedDisplayFilterKeys) => {
+      if (!workspaceSlug) return;
+      updateDisplayFilters(workspaceSlug.toString(), { [key]: false });
+    },
+    [updateDisplayFilters, workspaceSlug]
+  );
+
+  const handleClearAllFilters = useCallback(() => {
+    if (!workspaceSlug) return;
+    clearAllFilters(workspaceSlug.toString());
+    clearAllAppliedDisplayFilters(workspaceSlug.toString());
+  }, [clearAllFilters, clearAllAppliedDisplayFilters, workspaceSlug]);
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="flex h-full w-full flex-col">
+        {(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 ||
+          currentWorkspaceAppliedDisplayFilters?.length !== 0) && (
+          <div className="border-b border-custom-border-200 px-5 py-3">
+            <ProjectAppliedFiltersList
+              appliedFilters={currentWorkspaceFilters ?? {}}
+              appliedDisplayFilters={currentWorkspaceAppliedDisplayFilters ?? []}
+              handleClearAllFilters={handleClearAllFilters}
+              handleRemoveFilter={handleRemoveFilter}
+              handleRemoveDisplayFilter={handleRemoveDisplayFilter}
+              filteredProjects={filteredProjectIds?.length ?? 0}
+              totalProjects={totalProjectIds?.length ?? 0}
+              alwaysAllowEditing
+            />
+          </div>
+        )}
+        <ProjectCardList />
+      </div>
+    </>
+  );
+});
+
+export default Root;