feat: init

apps/web/.env.example

@@ -0,0 +1,12 @@
+NEXT_PUBLIC_API_BASE_URL="http://localhost:8000"
+
+NEXT_PUBLIC_WEB_BASE_URL="http://localhost:3000"
+
+NEXT_PUBLIC_ADMIN_BASE_URL="http://localhost:3001"
+NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+
+NEXT_PUBLIC_SPACE_BASE_URL="http://localhost:3002"
+NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
+
+NEXT_PUBLIC_LIVE_BASE_URL="http://localhost:3100"
+NEXT_PUBLIC_LIVE_BASE_PATH="/live"

apps/web/.eslintignore

@@ -0,0 +1,13 @@
+.next/*
+out/*
+public/*
+core/local-db/worker/wa-sqlite/src/*
+dist/*
+node_modules/*
+.turbo/*
+.env*
+.env
+.env.local
+.env.development
+.env.production
+.env.test

apps/web/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/next.js"],
+  rules: {
+    "no-duplicate-imports": "off",
+    "import/no-duplicates": ["error", { "prefer-inline": false }],
+    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+    "@typescript-eslint/no-import-type-side-effects": "error",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        prefer: "type-imports",
+        fixStyle: "separate-type-imports",
+        disallowTypeAnnotations: false,
+      },
+    ],
+  },
+};

apps/web/.gitignore

@@ -0,0 +1,3 @@
+
+# Sentry Config File
+.env.sentry-build-plugin

apps/web/.prettierignore

@@ -0,0 +1,5 @@
+.next
+.turbo
+out/
+dist/
+build/

apps/web/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

apps/web/Dockerfile.dev

@@ -0,0 +1,13 @@
+FROM node:22-alpine
+
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+
+COPY . .
+RUN corepack enable pnpm && pnpm add -g turbo
+RUN pnpm install
+
+EXPOSE 3000
+VOLUME [ "/app/node_modules", "/app/web/node_modules" ]
+CMD ["pnpm", "dev", "--filter=web"]

apps/web/Dockerfile.web

@@ -0,0 +1,120 @@
+# syntax=docker/dockerfile:1.7
+FROM node:22-alpine AS base
+
+# Setup pnpm package manager with corepack and configure global bin directory for caching
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+# *****************************************************************************
+# STAGE 1: Build the project
+# *****************************************************************************
+FROM base AS builder
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+
+ARG TURBO_VERSION=2.5.6
+RUN corepack enable pnpm && pnpm add -g turbo@${TURBO_VERSION}
+COPY . .
+
+RUN turbo prune --scope=web --docker
+
+# *****************************************************************************
+# STAGE 2: Install dependencies & build the project
+# *****************************************************************************
+# Add lockfile and package.json's of isolated subworkspace
+FROM base AS installer
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# First install the dependencies (as they change less often)
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
+RUN corepack enable pnpm
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
+
+# Build the project
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store
+
+ARG NEXT_PUBLIC_API_BASE_URL=""
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
+ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
+
+ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
+
+ARG NEXT_PUBLIC_LIVE_BASE_URL=""
+ENV NEXT_PUBLIC_LIVE_BASE_URL=$NEXT_PUBLIC_LIVE_BASE_URL
+
+ARG NEXT_PUBLIC_LIVE_BASE_PATH="/live"
+ENV NEXT_PUBLIC_LIVE_BASE_PATH=$NEXT_PUBLIC_LIVE_BASE_PATH
+
+ARG NEXT_PUBLIC_SPACE_BASE_URL=""
+ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
+
+ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
+ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
+
+ARG NEXT_PUBLIC_WEB_BASE_URL=""
+ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV TURBO_TELEMETRY_DISABLED=1
+
+RUN pnpm turbo run build --filter=web
+
+# *****************************************************************************
+# STAGE 3: Copy the project and start it
+# *****************************************************************************
+FROM base AS runner
+WORKDIR /app
+
+# Don't run production as root
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=installer /app/apps/web/.next/standalone ./
+COPY --from=installer /app/apps/web/.next/static ./apps/web/.next/static
+COPY --from=installer /app/apps/web/public ./apps/web/public
+
+ARG NEXT_PUBLIC_API_BASE_URL=""
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
+ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
+
+ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
+
+ARG NEXT_PUBLIC_LIVE_BASE_URL=""
+ENV NEXT_PUBLIC_LIVE_BASE_URL=$NEXT_PUBLIC_LIVE_BASE_URL
+
+ARG NEXT_PUBLIC_LIVE_BASE_PATH="/live"
+ENV NEXT_PUBLIC_LIVE_BASE_PATH=$NEXT_PUBLIC_LIVE_BASE_PATH
+
+ARG NEXT_PUBLIC_SPACE_BASE_URL=""
+ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
+
+ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
+ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
+
+ARG NEXT_PUBLIC_WEB_BASE_URL=""
+ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV TURBO_TELEMETRY_DISABLED=1
+
+EXPOSE 3000
+
+CMD ["node", "apps/web/server.js"]

apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx

@@ -0,0 +1,65 @@
+"use client";
+import type { FC } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { SIDEBAR_WIDTH } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+// components
+import { ResizableSidebar } from "@/components/sidebar/resizable-sidebar";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useAppRail } from "@/hooks/use-app-rail";
+// local imports
+import { ExtendedAppSidebar } from "./extended-sidebar";
+import { AppSidebar } from "./sidebar";
+
+export const ProjectAppSidebar: FC = observer(() => {
+  // store hooks
+  const {
+    sidebarCollapsed,
+    toggleSidebar,
+    sidebarPeek,
+    toggleSidebarPeek,
+    isExtendedSidebarOpened,
+    isAnySidebarDropdownOpen,
+  } = useAppTheme();
+  const { storedValue, setValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
+  // states
+  const [sidebarWidth, setSidebarWidth] = useState<number>(storedValue ?? SIDEBAR_WIDTH);
+  // hooks
+  const { shouldRenderAppRail } = useAppRail();
+  // derived values
+  const isAnyExtendedSidebarOpen = isExtendedSidebarOpened;
+
+  // handlers
+  const handleWidthChange = (width: number) => setValue(width);
+
+  return (
+    <>
+      <ResizableSidebar
+        showPeek={sidebarPeek}
+        defaultWidth={storedValue ?? 250}
+        width={sidebarWidth}
+        setWidth={setSidebarWidth}
+        defaultCollapsed={sidebarCollapsed}
+        peekDuration={1500}
+        onWidthChange={handleWidthChange}
+        onCollapsedChange={toggleSidebar}
+        isCollapsed={sidebarCollapsed}
+        toggleCollapsed={toggleSidebar}
+        togglePeek={toggleSidebarPeek}
+        extendedSidebar={
+          <>
+            <ExtendedAppSidebar />
+          </>
+        }
+        isAnyExtendedSidebarExpanded={isAnyExtendedSidebarOpen}
+        isAnySidebarDropdownOpen={isAnySidebarDropdownOpen}
+        disablePeekTrigger={shouldRenderAppRail}
+      >
+        <AppSidebar />
+      </ResizableSidebar>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx

@@ -0,0 +1,31 @@
+"use client";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { CycleIcon } from "@plane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+// plane web components
+import { UpgradeBadge } from "@/plane-web/components/workspace/upgrade-badge";
+
+export const WorkspaceActiveCycleHeader = observer(() => {
+  const { t } = useTranslation();
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={t("active_cycles")}
+                icon={<CycleIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
+              />
+            }
+          />
+        </Breadcrumbs>
+        <UpgradeBadge size="md" />
+      </Header.LeftItem>
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+// local imports
+import { WorkspaceActiveCycleHeader } from "./header";
+
+export default function WorkspaceActiveCycleLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<WorkspaceActiveCycleHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { PageHead } from "@/components/core/page-title";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// plane web components
+import { WorkspaceActiveCyclesRoot } from "@/plane-web/components/active-cycles";
+
+const WorkspaceActiveCyclesPage = observer(() => {
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Active Cycles` : undefined;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <WorkspaceActiveCyclesRoot />
+    </>
+  );
+});
+
+export default WorkspaceActiveCyclesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { AnalyticsIcon } from "@plane/propel/icons";
+// plane imports
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+
+export const WorkspaceAnalyticsHeader = observer(() => {
+  const { t } = useTranslation();
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={t("workspace_analytics.label")}
+                icon={<AnalyticsIcon className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
+          />
+        </Breadcrumbs>
+      </Header.LeftItem>
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx

@@ -0,0 +1,14 @@
+"use client";
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { WorkspaceAnalyticsHeader } from "./header";
+
+export default function WorkspaceAnalyticsTabLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<WorkspaceAnalyticsHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
+// plane package imports
+import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Tabs } from "@plane/ui";
+import type { TabItem } from "@plane/ui";
+// components
+import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
+import { PageHead } from "@/components/core/page-title";
+import { ComicBoxButton } from "@/components/empty-state/comic-box-button";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+// hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+import { getAnalyticsTabs } from "@/plane-web/components/analytics/tabs";
+
+type Props = {
+  params: {
+    tabId: string;
+    workspaceSlug: string;
+  };
+};
+
+const AnalyticsPage = observer((props: Props) => {
+  // props
+  const { params } = props;
+  const { tabId } = params;
+
+  // hooks
+  const router = useRouter();
+
+  // plane imports
+  const { t } = useTranslation();
+
+  // store hooks
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { workspaceProjectIds, loader } = useProject();
+  const { currentWorkspace } = useWorkspace();
+  const { allowPermissions } = useUserPermissions();
+
+  // helper hooks
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/analytics" });
+
+  // permissions
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  // derived values
+  const pageTitle = currentWorkspace?.name
+    ? t(`workspace_analytics.page_label`, { workspace: currentWorkspace?.name })
+    : undefined;
+  const ANALYTICS_TABS = useMemo(() => getAnalyticsTabs(t), [t]);
+  const tabs: TabItem[] = useMemo(
+    () =>
+      ANALYTICS_TABS.map((tab) => ({
+        key: tab.key,
+        label: tab.label,
+        content: <tab.content />,
+        onClick: () => {
+          router.push(`/${currentWorkspace?.slug}/analytics/${tab.key}`);
+        },
+        disabled: tab.isDisabled,
+      })),
+    [ANALYTICS_TABS, router, currentWorkspace?.slug]
+  );
+  const defaultTab = tabId || ANALYTICS_TABS[0].key;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      {workspaceProjectIds && (
+        <>
+          {workspaceProjectIds.length > 0 || loader === "init-loader" ? (
+            <div className="flex h-full overflow-hidden bg-custom-background-100 justify-between items-center  ">
+              <Tabs
+                tabs={tabs}
+                storageKey={`analytics-page-${currentWorkspace?.id}`}
+                defaultTab={defaultTab}
+                size="md"
+                tabListContainerClassName="px-6 py-2 border-b border-custom-border-200 flex items-center justify-between"
+                tabListClassName="my-2 w-auto"
+                tabClassName="px-3"
+                tabPanelClassName="h-full overflow-hidden overflow-y-auto px-2"
+                storeInLocalStorage={false}
+                actions={<AnalyticsFilterActions />}
+              />
+            </div>
+          ) : (
+            <DetailedEmptyState
+              title={t("workspace_analytics.empty_state.general.title")}
+              description={t("workspace_analytics.empty_state.general.description")}
+              assetPath={resolvedPath}
+              customPrimaryButton={
+                <ComicBoxButton
+                  label={t("workspace_analytics.empty_state.general.primary_button.text")}
+                  title={t("workspace_analytics.empty_state.general.primary_button.comic.title")}
+                  description={t("workspace_analytics.empty_state.general.primary_button.comic.description")}
+                  onClick={() => {
+                    toggleCreateProjectModal(true);
+                    captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
+                  }}
+                  disabled={!canPerformEmptyStateActions}
+                />
+              }
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+});
+
+export default AnalyticsPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EProjectFeatureKey } from "@plane/constants";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { IssueDetailQuickActions } from "@/components/issues/issue-detail/issue-detail-quick-actions";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+
+export const ProjectIssueDetailsHeader = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, workItem } = useParams();
+  // store hooks
+  const { getProjectById, loader } = useProject();
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail();
+  // derived values
+  const issueId = getIssueIdByIdentifier(workItem?.toString());
+  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
+  const projectId = issueDetails ? issueDetails?.project_id : undefined;
+  const projectDetails = projectId ? getProjectById(projectId?.toString()) : undefined;
+
+  if (!workspaceSlug || !projectId || !issueId) return null;
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+          <CommonProjectBreadcrumbs
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
+            featureKey={EProjectFeatureKey.WORK_ITEMS}
+          />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={projectDetails && issueDetails ? `${projectDetails.identifier}-${issueDetails.sequence_id}` : ""}
+              />
+            }
+          />
+        </Breadcrumbs>
+      </Header.LeftItem>
+      <Header.RightItem>
+        {projectId && issueId && (
+          <IssueDetailQuickActions
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
+            issueId={issueId?.toString()}
+          />
+        )}
+      </Header.RightItem>
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ProjectIssueDetailsHeader } from "./header";
+
+export default function ProjectIssueDetailsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectIssueDetailsHeader />} />
+      <ContentWrapper className="overflow-hidden">{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { EIssueServiceType } from "@plane/types";
+import { Loader } from "@plane/ui";
+// components
+import { EmptyState } from "@/components/common/empty-state";
+import { PageHead } from "@/components/core/page-title";
+import { IssueDetailRoot } from "@/components/issues/issue-detail";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+// assets
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useWorkItemProperties } from "@/plane-web/hooks/use-issue-properties";
+import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
+import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";
+
+const IssueDetailsPage = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, workItem } = useParams();
+  // hooks
+  const { resolvedTheme } = useTheme();
+  // store hooks
+  const { t } = useTranslation();
+  const {
+    fetchIssueWithIdentifier,
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { getProjectById } = useProject();
+  const { toggleIssueDetailSidebar, issueDetailSidebarCollapsed } = useAppTheme();
+
+  const projectIdentifier = workItem?.toString().split("-")[0];
+  const sequence_id = workItem?.toString().split("-")[1];
+
+  // fetching issue details
+  const { data, isLoading, error } = useSWR(
+    workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null,
+    workspaceSlug && workItem
+      ? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
+      : null
+  );
+  const issueId = data?.id;
+  const projectId = data?.project_id;
+  // derived values
+  const issue = getIssueById(issueId?.toString() || "") || undefined;
+  const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
+  const issueLoader = !issue || isLoading;
+  const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
+
+  useWorkItemProperties(
+    projectId,
+    workspaceSlug.toString(),
+    issueId,
+    issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES
+  );
+
+  useEffect(() => {
+    const handleToggleIssueDetailSidebar = () => {
+      if (window && window.innerWidth < 768) {
+        toggleIssueDetailSidebar(true);
+      }
+      if (window && issueDetailSidebarCollapsed && window.innerWidth >= 768) {
+        toggleIssueDetailSidebar(false);
+      }
+    };
+    window.addEventListener("resize", handleToggleIssueDetailSidebar);
+    handleToggleIssueDetailSidebar();
+    return () => window.removeEventListener("resize", handleToggleIssueDetailSidebar);
+  }, [issueDetailSidebarCollapsed, toggleIssueDetailSidebar]);
+
+  useEffect(() => {
+    if (data?.is_intake) {
+      router.push(`/${workspaceSlug}/projects/${data.project_id}/intake/?currentTab=open&inboxIssueId=${data?.id}`);
+    }
+  }, [workspaceSlug, data]);
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      {error ? (
+        <EmptyState
+          image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
+          title={t("issue.empty_state.issue_detail.title")}
+          description={t("issue.empty_state.issue_detail.description")}
+          primaryButton={{
+            text: t("issue.empty_state.issue_detail.primary_button.text"),
+            onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues/`),
+          }}
+        />
+      ) : issueLoader ? (
+        <Loader className="flex h-full gap-5 p-5">
+          <div className="basis-2/3 space-y-2">
+            <Loader.Item height="30px" width="40%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="40%" />
+          </div>
+          <div className="basis-1/3 space-y-3">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </div>
+        </Loader>
+      ) : (
+        workspaceSlug &&
+        projectId &&
+        issueId && (
+          <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
+            <IssueDetailRoot
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              issueId={issueId.toString()}
+              is_archived={!!issue?.archived_at}
+            />
+          </ProjectAuthWrapper>
+        )
+      )}
+    </>
+  );
+});
+
+export default IssueDetailsPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Button } from "@plane/propel/button";
+import { DraftIcon } from "@plane/propel/icons";
+import { EIssuesStoreType } from "@plane/types";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { CountChip } from "@/components/common/count-chip";
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
+
+export const WorkspaceDraftHeader = observer(() => {
+  // state
+  const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { paginationInfo } = useWorkspaceDraftIssues();
+  const { joinedProjectIds } = useProject();
+
+  const { t } = useTranslation();
+  // check if user is authorized to create draft work item
+  const isAuthorizedUser = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={isDraftIssueModalOpen}
+        storeType={EIssuesStoreType.WORKSPACE_DRAFT}
+        onClose={() => setIsDraftIssueModalOpen(false)}
+        isDraft
+      />
+      <Header>
+        <Header.LeftItem>
+          <div className="flex items-center gap-2.5">
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-custom-text-300" />} />
+                }
+              />
+            </Breadcrumbs>
+            {paginationInfo?.total_count && paginationInfo?.total_count > 0 ? (
+              <CountChip count={paginationInfo?.total_count} />
+            ) : (
+              <></>
+            )}
+          </div>
+        </Header.LeftItem>
+
+        <Header.RightItem>
+          {joinedProjectIds && joinedProjectIds.length > 0 && (
+            <Button
+              variant="primary"
+              size="sm"
+              className="items-center gap-1"
+              onClick={() => setIsDraftIssueModalOpen(true)}
+              disabled={!isAuthorizedUser}
+            >
+              {t("workspace_draft_issues.draft_an_issue")}
+            </Button>
+          )}
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+// local imports
+import { WorkspaceDraftHeader } from "./header";
+
+export default function WorkspaceDraftLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<WorkspaceDraftHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useParams } from "next/navigation";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { WorkspaceDraftIssuesRoot } from "@/components/issues/workspace-draft";
+
+const WorkspaceDraftPage = () => {
+  // router
+  const { workspaceSlug: routeWorkspaceSlug } = useParams();
+  const pageTitle = "Workspace Draft";
+
+  // derived values
+  const workspaceSlug = (routeWorkspaceSlug as string) || undefined;
+
+  if (!workspaceSlug) return null;
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="relative h-full w-full overflow-hidden overflow-y-auto">
+        <WorkspaceDraftIssuesRoot workspaceSlug={workspaceSlug} />
+      </div>
+    </>
+  );
+};
+
+export default WorkspaceDraftPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { Plus, Search } from "lucide-react";
+import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+import { copyUrlToClipboard, orderJoinedProjects } from "@plane/utils";
+// components
+import { CreateProjectModal } from "@/components/project/create-project-modal";
+import { SidebarProjectsListItem } from "@/components/workspace/sidebar/projects-list-item";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import type { TProject } from "@/plane-web/types";
+import { ExtendedSidebarWrapper } from "./extended-sidebar-wrapper";
+
+export const ExtendedProjectSidebar = observer(() => {
+  // refs
+  const extendedProjectSidebarRef = useRef<HTMLDivElement | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  // states
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
+  // routers
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { t } = useTranslation();
+  const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar } = useAppTheme();
+  const { getPartialProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
+  const { allowPermissions } = useUserPermissions();
+
+  const handleOnProjectDrop = (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => {
+    if (!sourceId || !destinationId || !workspaceSlug) return;
+    if (sourceId === destinationId) return;
+
+    const joinedProjectsList: TProject[] = [];
+    joinedProjects.map((projectId) => {
+      const projectDetails = getPartialProjectById(projectId);
+      if (projectDetails) joinedProjectsList.push(projectDetails);
+    });
+
+    const sourceIndex = joinedProjects.indexOf(sourceId);
+    const destinationIndex = shouldDropAtEnd ? joinedProjects.length : joinedProjects.indexOf(destinationId);
+
+    if (joinedProjectsList.length <= 0) return;
+
+    const updatedSortOrder = orderJoinedProjects(sourceIndex, destinationIndex, sourceId, joinedProjectsList);
+    if (updatedSortOrder != undefined)
+      updateProjectView(workspaceSlug.toString(), sourceId, { sort_order: updatedSortOrder }).catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("error"),
+          message: t("something_went_wrong"),
+        });
+      });
+  };
+
+  // filter projects based on search query
+  const filteredProjects = joinedProjects.filter((projectId) => {
+    const project = getPartialProjectById(projectId);
+    if (!project) return false;
+    return project.name.toLowerCase().includes(searchQuery.toLowerCase()) || project.identifier.includes(searchQuery);
+  });
+
+  // auth
+  const isAuthorizedUser = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  const handleClose = () => toggleExtendedProjectSidebar(false);
+
+  const handleCopyText = (projectId: string) => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("link_copied"),
+        message: t("project_link_copied_to_clipboard"),
+      });
+    });
+  };
+  return (
+    <>
+      {workspaceSlug && (
+        <CreateProjectModal
+          isOpen={isProjectModalOpen}
+          onClose={() => setIsProjectModalOpen(false)}
+          setToFavorite={false}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
+      <ExtendedSidebarWrapper
+        isExtendedSidebarOpened={!!isExtendedProjectSidebarOpened}
+        extendedSidebarRef={extendedProjectSidebarRef}
+        handleClose={handleClose}
+        excludedElementId="extended-project-sidebar-toggle"
+      >
+        <div className="flex flex-col gap-1 w-full sticky top-4 pt-0 px-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-custom-text-300 py-1.5">Projects</span>
+            {isAuthorizedUser && (
+              <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
+                <button
+                  type="button"
+                  data-ph-element={PROJECT_TRACKER_ELEMENTS.EXTENDED_SIDEBAR_ADD_BUTTON}
+                  className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
+                  onClick={() => {
+                    setIsProjectModalOpen(true);
+                  }}
+                >
+                  <Plus className="size-3" />
+                </button>
+              </Tooltip>
+            )}
+          </div>
+          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1 w-full">
+            <Search className="h-3.5 w-3.5 text-custom-text-400" />
+            <input
+              className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
+              placeholder={t("search")}
+              value={searchQuery}
+              autoFocus
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+        </div>
+        <div className="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto vertical-scrollbar scrollbar-sm flex-grow mt-4 px-4">
+          {filteredProjects.map((projectId, index) => (
+            <SidebarProjectsListItem
+              key={projectId}
+              projectId={projectId}
+              handleCopyText={() => handleCopyText(projectId)}
+              projectListType={"JOINED"}
+              disableDrag={false}
+              disableDrop={false}
+              isLastChild={index === joinedProjects.length - 1}
+              handleOnProjectDrop={handleOnProjectDrop}
+              renderInExtendedSidebar
+            />
+          ))}
+        </div>
+      </ExtendedSidebarWrapper>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import type { FC } from "react";
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EXTENDED_SIDEBAR_WIDTH, SIDEBAR_WIDTH } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { cn } from "@plane/utils";
+// hooks
+import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
+
+type Props = {
+  children: React.ReactNode;
+  extendedSidebarRef: React.RefObject<HTMLDivElement>;
+  isExtendedSidebarOpened: boolean;
+  handleClose: () => void;
+  excludedElementId: string;
+};
+
+export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
+  const { children, extendedSidebarRef, isExtendedSidebarOpened, handleClose, excludedElementId } = props;
+  // store hooks
+  const { storedValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
+
+  useExtendedSidebarOutsideClickDetector(extendedSidebarRef, handleClose, excludedElementId);
+
+  return (
+    <div
+      id={excludedElementId}
+      ref={extendedSidebarRef}
+      className={cn(
+        `absolute h-full z-[19] flex flex-col py-2 transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-sm`,
+        {
+          "translate-x-0 opacity-100": isExtendedSidebarOpened,
+          [`-translate-x-[${EXTENDED_SIDEBAR_WIDTH}px] opacity-0 hidden`]: !isExtendedSidebarOpened,
+        }
+      )}
+      style={{
+        left: `${storedValue ?? SIDEBAR_WIDTH}px`,
+        width: `${isExtendedSidebarOpened ? EXTENDED_SIDEBAR_WIDTH : 0}px`,
+      }}
+    >
+      {children}
+    </div>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import React, { useMemo, useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS } from "@plane/constants";
+import type { EUserWorkspaceRoles } from "@plane/types";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// plane-web imports
+import { ExtendedSidebarItem } from "@/plane-web/components/workspace/sidebar/extended-sidebar-item";
+import { ExtendedSidebarWrapper } from "./extended-sidebar-wrapper";
+
+export const ExtendedAppSidebar = observer(() => {
+  // refs
+  const extendedSidebarRef = useRef<HTMLDivElement | null>(null);
+  // routers
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
+  const { updateSidebarPreference, getNavigationPreferences } = useWorkspace();
+
+  // derived values
+  const currentWorkspaceNavigationPreferences = getNavigationPreferences(workspaceSlug.toString());
+
+  const sortedNavigationItems = useMemo(
+    () =>
+      WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.map((item) => {
+        const preference = currentWorkspaceNavigationPreferences?.[item.key];
+        return {
+          ...item,
+          sort_order: preference ? preference.sort_order : 0,
+        };
+      }).sort((a, b) => a.sort_order - b.sort_order),
+    [currentWorkspaceNavigationPreferences]
+  );
+
+  const sortedNavigationItemsKeys = sortedNavigationItems.map((item) => item.key);
+
+  const orderNavigationItem = (
+    sourceIndex: number,
+    destinationIndex: number,
+    navigationList: {
+      sort_order: number;
+      key: string;
+      labelTranslationKey: string;
+      href: string;
+      access: EUserWorkspaceRoles[];
+    }[]
+  ): number | undefined => {
+    if (sourceIndex < 0 || destinationIndex < 0 || navigationList.length <= 0) return undefined;
+
+    let updatedSortOrder: number | undefined = undefined;
+    const sortOrderDefaultValue = 10000;
+
+    if (destinationIndex === 0) {
+      // updating project at the top of the project
+      const currentSortOrder = navigationList[destinationIndex].sort_order || 0;
+      updatedSortOrder = currentSortOrder - sortOrderDefaultValue;
+    } else if (destinationIndex === navigationList.length) {
+      // updating project at the bottom of the project
+      const currentSortOrder = navigationList[destinationIndex - 1].sort_order || 0;
+      updatedSortOrder = currentSortOrder + sortOrderDefaultValue;
+    } else {
+      // updating project in the middle of the project
+      const destinationTopProjectSortOrder = navigationList[destinationIndex - 1].sort_order || 0;
+      const destinationBottomProjectSortOrder = navigationList[destinationIndex].sort_order || 0;
+      const updatedValue = (destinationTopProjectSortOrder + destinationBottomProjectSortOrder) / 2;
+      updatedSortOrder = updatedValue;
+    }
+
+    return updatedSortOrder;
+  };
+
+  const handleOnNavigationItemDrop = (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => {
+    if (!sourceId || !destinationId || !workspaceSlug) return;
+    if (sourceId === destinationId) return;
+
+    const sourceIndex = sortedNavigationItemsKeys.indexOf(sourceId);
+    const destinationIndex = shouldDropAtEnd
+      ? sortedNavigationItemsKeys.length
+      : sortedNavigationItemsKeys.indexOf(destinationId);
+
+    const updatedSortOrder = orderNavigationItem(sourceIndex, destinationIndex, sortedNavigationItems);
+
+    if (updatedSortOrder != undefined)
+      updateSidebarPreference(workspaceSlug.toString(), sourceId, {
+        sort_order: updatedSortOrder,
+      });
+  };
+
+  const handleClose = () => toggleExtendedSidebar(false);
+
+  return (
+    <ExtendedSidebarWrapper
+      isExtendedSidebarOpened={!!isExtendedSidebarOpened}
+      extendedSidebarRef={extendedSidebarRef}
+      handleClose={handleClose}
+      excludedElementId="extended-sidebar-toggle"
+    >
+      {sortedNavigationItems.map((item, index) => (
+        <ExtendedSidebarItem
+          key={item.key}
+          item={item}
+          isLastChild={index === sortedNavigationItems.length - 1}
+          handleOnNavigationItemDrop={handleOnNavigationItemDrop}
+        />
+      ))}
+    </ExtendedSidebarWrapper>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { Shapes } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { HomeIcon } from "@plane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+// hooks
+import { useHome } from "@/hooks/store/use-home";
+// local imports
+import { StarUsOnGitHubLink } from "./star-us-link";
+
+export const WorkspaceDashboardHeader = observer(() => {
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { toggleWidgetSettings } = useHome();
+
+  return (
+    <>
+      <Header>
+        <Header.LeftItem>
+          <div className="flex items-center gap-2">
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink
+                    label={t("home.title")}
+                    icon={<HomeIcon className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+            </Breadcrumbs>
+          </div>
+        </Header.LeftItem>
+        <Header.RightItem>
+          <Button
+            variant="neutral-primary"
+            size="sm"
+            onClick={() => toggleWidgetSettings(true)}
+            className="my-auto mb-0"
+          >
+            <Shapes size={16} />
+            <div className="hidden text-xs font-medium sm:hidden md:block">{t("home.manage_widgets")}</div>
+          </Button>
+          <StarUsOnGitHubLink />
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { CommandPalette } from "@/components/command-palette";
+import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
+// plane web components
+import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
+import { ProjectAppSidebar } from "./_sidebar";
+
+export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <AuthenticationWrapper>
+      <CommandPalette />
+      <WorkspaceAuthWrapper>
+        <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+          <div id="full-screen-portal" className="inset-0 absolute w-full" />
+          <div className="relative flex size-full overflow-hidden">
+            <ProjectAppSidebar />
+            <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+              {children}
+            </main>
+          </div>
+        </div>
+      </WorkspaceAuthWrapper>
+    </AuthenticationWrapper>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+// components
+import { NotificationsSidebarRoot } from "@/components/workspace-notifications/sidebar";
+
+export default function ProjectInboxIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative w-full h-full overflow-hidden flex items-center">
+      <NotificationsSidebarRoot />
+      <div className="w-full h-full overflow-hidden overflow-y-auto">{children}</div>
+    </div>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { NotificationsRoot } from "@/components/workspace-notifications";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+const WorkspaceDashboardPage = observer(() => {
+  const { workspaceSlug } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const pageTitle = currentWorkspace?.name
+    ? t("notification.page_label", { workspace: currentWorkspace?.name })
+    : undefined;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <NotificationsRoot workspaceSlug={workspaceSlug?.toString()} />
+    </>
+  );
+});
+
+export default WorkspaceDashboardPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { useTranslation } from "@plane/i18n";
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { PageHead } from "@/components/core/page-title";
+import { WorkspaceHomeView } from "@/components/home";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// local components
+import { WorkspaceDashboardHeader } from "./header";
+
+const WorkspaceDashboardPage = observer(() => {
+  const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - ${t("home.title")}` : undefined;
+
+  return (
+    <>
+      <AppHeader header={<WorkspaceDashboardHeader />} />
+      <ContentWrapper>
+        <PageHead title={pageTitle} />
+        <WorkspaceHomeView />
+      </ContentWrapper>
+    </>
+  );
+});
+
+export default WorkspaceDashboardPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/[profileViewId]/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import { useParams } from "next/navigation";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+
+const ProfilePageHeader = {
+  assigned: "Profile - Assigned",
+  created: "Profile - Created",
+  subscribed: "Profile - Subscribed",
+};
+
+const ProfileIssuesTypePage = () => {
+  const { profileViewId } = useParams() as { profileViewId: "assigned" | "subscribed" | "created" | undefined };
+
+  if (!profileViewId) return null;
+
+  const header = ProfilePageHeader[profileViewId];
+
+  return (
+    <>
+      <PageHead title={header} />
+      <ProfileIssuesPage type={profileViewId} />
+    </>
+  );
+};
+
+export default ProfileIssuesTypePage;

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { DownloadActivityButton } from "@/components/profile/activity/download-button";
+import { WorkspaceActivityListPage } from "@/components/profile/activity/workspace-activity-list";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+
+const PER_PAGE = 100;
+
+const ProfileActivityPage = observer(() => {
+  // states
+  const [pageCount, setPageCount] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [resultsCount, setResultsCount] = useState(0);
+  // router
+  const { allowPermissions } = useUserPermissions();
+  //hooks
+  const { t } = useTranslation();
+
+  const updateTotalPages = (count: number) => setTotalPages(count);
+
+  const updateResultsCount = (count: number) => setResultsCount(count);
+
+  const handleLoadMore = () => setPageCount((prev) => prev + 1);
+
+  const activityPages: React.ReactNode[] = [];
+  for (let i = 0; i < pageCount; i++)
+    activityPages.push(
+      <WorkspaceActivityListPage
+        key={i}
+        cursor={`${PER_PAGE}:${i}:0`}
+        perPage={PER_PAGE}
+        updateResultsCount={updateResultsCount}
+        updateTotalPages={updateTotalPages}
+      />
+    );
+
+  const canDownloadActivity = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  return (
+    <>
+      <PageHead title="Profile - Activity" />
+      <div className="flex h-full w-full flex-col overflow-hidden py-5">
+        <div className="flex items-center justify-between gap-2 px-5 md:px-9">
+          <h3 className="text-lg font-medium">{t("profile.stats.recent_activity.title")}</h3>
+          {canDownloadActivity && <DownloadActivityButton />}
+        </div>
+        <div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
+          {activityPages}
+          {pageCount < totalPages && resultsCount !== 0 && (
+            <div className="flex w-full items-center justify-center text-xs">
+              <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+                {t("common.load_more")}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default ProfileActivityPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+// ui
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { useParams, useRouter } from "next/navigation";
+import { ChevronDown, PanelRight } from "lucide-react";
+import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { YourWorkIcon } from "@plane/propel/icons";
+import type { IUserProfileProjectSegregation } from "@plane/types";
+import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { ProfileIssuesFilter } from "@/components/profile/profile-issues-filter";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+
+type TUserProfileHeader = {
+  userProjectsData: IUserProfileProjectSegregation | undefined;
+  type?: string | undefined;
+  showProfileIssuesFilter?: boolean;
+};
+
+export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
+  const { userProjectsData, type = undefined, showProfileIssuesFilter } = props;
+  // router
+  const { workspaceSlug, userId } = useParams();
+  const router = useRouter();
+  // store hooks
+  const { toggleProfileSidebar, profileSidebarCollapsed } = useAppTheme();
+  const { data: currentUser } = useUser();
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+  // derived values
+  const isAuthorized = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  if (!workspaceUserInfo) return null;
+
+  const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
+
+  const userName = `${userProjectsData?.user_data?.first_name} ${userProjectsData?.user_data?.last_name}`;
+
+  const isCurrentUser = currentUser?.id === userId;
+
+  const breadcrumbLabel = isCurrentUser ? t("profile.page_label") : `${userName} ${t("profile.work")}`;
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={breadcrumbLabel}
+                disableTooltip
+                icon={<YourWorkIcon className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
+          />
+        </Breadcrumbs>
+      </Header.LeftItem>
+      <Header.RightItem>
+        <div className="hidden md:flex md:items-center">{showProfileIssuesFilter && <ProfileIssuesFilter />}</div>
+        <div className="flex gap-4 md:hidden">
+          <CustomMenu
+            maxHeight={"md"}
+            className="flex flex-grow justify-center text-sm text-custom-text-200"
+            placement="bottom-start"
+            customButton={
+              <div className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1.5">
+                <span className="flex flex-grow justify-center text-sm text-custom-text-200">{type}</span>
+                <ChevronDown className="h-4 w-4 text-custom-text-400" />
+              </div>
+            }
+            customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+            closeOnSelect
+          >
+            <></>
+            {tabsList.map((tab) => (
+              <CustomMenu.MenuItem
+                className="flex items-center gap-2"
+                key={tab.route}
+                onClick={() => router.push(`/${workspaceSlug}/profile/${userId}/${tab.route}`)}
+              >
+                <span className="w-full text-custom-text-300">{t(tab.i18n_label)}</span>
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
+          <button
+            className="block transition-all md:hidden"
+            onClick={() => {
+              toggleProfileSidebar();
+            }}
+          >
+            <PanelRight
+              className={cn(
+                "block h-4 w-4 md:hidden",
+                !profileSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200"
+              )}
+            />
+          </button>
+        </div>
+      </Header.RightItem>
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import useSWR from "swr";
+// components
+import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ProfileSidebar } from "@/components/profile/sidebar";
+// constants
+import { USER_PROFILE_PROJECT_SEGREGATION } from "@/constants/fetch-keys";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import useSize from "@/hooks/use-window-size";
+// local components
+import { UserService } from "@/services/user.service";
+import { UserProfileHeader } from "./header";
+import { ProfileIssuesMobileHeader } from "./mobile-header";
+import { ProfileNavbar } from "./navbar";
+
+const userService = new UserService();
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const UseProfileLayout: React.FC<Props> = observer((props) => {
+  const { children } = props;
+  // router
+  const { workspaceSlug, userId } = useParams();
+  const pathname = usePathname();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+  // derived values
+  const isAuthorized = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  const windowSize = useSize();
+  const isSmallerScreen = windowSize[0] >= 768;
+
+  const { data: userProjectsData } = useSWR(
+    workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
+    workspaceSlug && userId
+      ? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
+      : null
+  );
+  // derived values
+  const isAuthorizedPath =
+    pathname.includes("assigned") || pathname.includes("created") || pathname.includes("subscribed");
+  const isIssuesTab = pathname.includes("assigned") || pathname.includes("created") || pathname.includes("subscribed");
+
+  const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
+  const currentTab = tabsList.find((tab) => pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`);
+
+  return (
+    <>
+      {/* Passing the type prop from the current route value as we need the header as top most component.
+      TODO: We are depending on the route path to handle the mobile header type. If the path changes, this logic will break. */}
+      <div className="h-full w-full flex flex-col md:flex-row overflow-hidden">
+        <div className="h-full w-full flex flex-col overflow-hidden">
+          <AppHeader
+            header={
+              <UserProfileHeader
+                type={currentTab?.i18n_label}
+                userProjectsData={userProjectsData}
+                showProfileIssuesFilter={isIssuesTab}
+              />
+            }
+            mobileHeader={isIssuesTab && <ProfileIssuesMobileHeader />}
+          />
+          <ContentWrapper>
+            <div className="h-full w-full flex flex-row md:flex-col  md:overflow-hidden">
+              <div className="flex w-full flex-col md:h-full md:overflow-hidden">
+                <ProfileNavbar isAuthorized={!!isAuthorized} />
+                {isAuthorized || !isAuthorizedPath ? (
+                  <div className={`w-full overflow-hidden h-full`}>{children}</div>
+                ) : (
+                  <div className="grid h-full w-full place-items-center text-custom-text-200">
+                    {t("you_do_not_have_the_permission_to_access_this_page")}
+                  </div>
+                )}
+              </div>
+              {!isSmallerScreen && <ProfileSidebar userProjectsData={userProjectsData} />}
+            </div>
+          </ContentWrapper>
+        </div>
+        {isSmallerScreen && <ProfileSidebar userProjectsData={userProjectsData} />}
+      </div>
+    </>
+  );
+});
+
+export default UseProfileLayout;

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { ChevronDown } from "lucide-react";
+// plane constants
+import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
+// types
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TIssueLayouts,
+  EIssueLayoutTypes,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+// components
+import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+
+export const ProfileIssuesMobileHeader = observer(() => {
+  // plane i18n
+  const { t } = useTranslation();
+  // router
+  const { workspaceSlug, userId } = useParams();
+  // store hook
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.PROFILE);
+  // derived values
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        { layout: layout as EIssueLayoutTypes | undefined },
+        userId.toString()
+      );
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        updatedDisplayFilter,
+        userId.toString()
+      );
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_PROPERTIES,
+        property,
+        userId.toString()
+      );
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+
+  return (
+    <div className="flex justify-evenly border-b border-custom-border-200 py-2 md:hidden">
+      <CustomMenu
+        maxHeight={"md"}
+        className="flex flex-grow justify-center text-sm text-custom-text-200"
+        placement="bottom-start"
+        customButton={
+          <div className="flex flex-center text-sm text-custom-text-200">
+            {t("common.layout")}
+            <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
+          </div>
+        }
+        customButtonClassName="flex flex-center text-custom-text-200 text-sm"
+        closeOnSelect
+      >
+        {ISSUE_LAYOUTS.map((layout, index) => {
+          if (layout.key === "spreadsheet" || layout.key === "gantt_chart" || layout.key === "calendar") return;
+          return (
+            <CustomMenu.MenuItem
+              key={index}
+              onClick={() => {
+                handleLayoutChange(ISSUE_LAYOUTS[index].key);
+              }}
+              className="flex items-center gap-2"
+            >
+              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
+              <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <FiltersDropdown
+          title={t("common.display")}
+          placement="bottom-end"
+          menuButton={
+            <div className="flex flex-center text-sm text-custom-text-200">
+              {t("common.display")}
+              <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
+            </div>
+          }
+        >
+          <DisplayFiltersSelection
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.profile_issues.layoutOptions[activeLayout] : undefined
+            }
+            displayFilters={issueFilters?.displayFilters ?? {}}
+            handleDisplayFiltersUpdate={handleDisplayFilters}
+            displayProperties={issueFilters?.displayProperties ?? {}}
+            handleDisplayPropertiesUpdate={handleDisplayProperties}
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+
+// components
+// constants
+import { Header, EHeaderVariant } from "@plane/ui";
+
+type Props = {
+  isAuthorized: boolean;
+};
+
+export const ProfileNavbar: React.FC<Props> = (props) => {
+  const { isAuthorized } = props;
+  const { t } = useTranslation();
+  const { workspaceSlug, userId } = useParams();
+  const pathname = usePathname();
+
+  const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
+
+  return (
+    <Header variant={EHeaderVariant.SECONDARY} showOnMobile={false}>
+      <div className="flex items-center overflow-x-scroll">
+        {tabsList.map((tab) => (
+          <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
+            <span
+              className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${
+                pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
+                  ? "border-custom-primary-100 text-custom-primary-100"
+                  : "border-transparent"
+              }`}
+            >
+              {t(tab.i18n_label)}
+            </span>
+          </Link>
+        ))}
+      </div>
+    </Header>
+  );
+};

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { GROUP_CHOICES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IUserStateDistribution, TStateGroups } from "@plane/types";
+import { ContentWrapper } from "@plane/ui";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { ProfileActivity } from "@/components/profile/overview/activity";
+import { ProfilePriorityDistribution } from "@/components/profile/overview/priority-distribution";
+import { ProfileStateDistribution } from "@/components/profile/overview/state-distribution";
+import { ProfileStats } from "@/components/profile/overview/stats";
+import { ProfileWorkload } from "@/components/profile/overview/workload";
+// constants
+import { USER_PROFILE_DATA } from "@/constants/fetch-keys";
+// services
+import { UserService } from "@/services/user.service";
+const userService = new UserService();
+
+export default function ProfileOverviewPage() {
+  const { workspaceSlug, userId } = useParams();
+
+  const { t } = useTranslation();
+  const { data: userProfile } = useSWR(
+    workspaceSlug && userId ? USER_PROFILE_DATA(workspaceSlug.toString(), userId.toString()) : null,
+    workspaceSlug && userId ? () => userService.getUserProfileData(workspaceSlug.toString(), userId.toString()) : null
+  );
+
+  const stateDistribution: IUserStateDistribution[] = Object.keys(GROUP_CHOICES).map((key) => {
+    const group = userProfile?.state_distribution.find((g) => g.state_group === key);
+
+    if (group) return group;
+    else return { state_group: key as TStateGroups, state_count: 0 };
+  });
+
+  return (
+    <>
+      <PageHead title={t("profile.page_label")} />
+      <ContentWrapper className="space-y-7">
+        <ProfileStats userProfile={userProfile} />
+        <ProfileWorkload stateDistribution={stateDistribution} />
+        <div className="grid grid-cols-1 items-stretch gap-5 xl:grid-cols-2">
+          <ProfilePriorityDistribution userProfile={userProfile} />
+          <ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} />
+        </div>
+        <ProfileActivity />
+      </ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ProjectArchivesHeader } from "../header";
+
+export default function ProjectArchiveCyclesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectArchivesHeader activeTab="cycles" />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { ArchivedCycleLayoutRoot } from "@/components/cycles/archived-cycles";
+import { ArchivedCyclesHeader } from "@/components/cycles/archived-cycles/header";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+const ProjectArchivedCyclesPage = observer(() => {
+  // router
+  const { projectId } = useParams();
+  // store hooks
+  const { getProjectById } = useProject();
+  // derived values
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name && `${project?.name} - Archived cycles`;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <ArchivedCyclesHeader />
+        <ArchivedCycleLayoutRoot />
+      </div>
+    </>
+  );
+});
+
+export default ProjectArchivedCyclesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { ArchiveIcon, CycleIcon, ModuleIcon, WorkItemsIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import { EIssuesStoreType } from "@plane/types";
+// ui
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs/project";
+
+type TProps = {
+  activeTab: "issues" | "cycles" | "modules";
+};
+
+const PROJECT_ARCHIVES_BREADCRUMB_LIST: {
+  [key: string]: {
+    label: string;
+    href: string;
+    icon: React.FC<React.SVGAttributes<SVGElement> & { className?: string }>;
+  };
+} = {
+  issues: {
+    label: "Work items",
+    href: "/issues",
+    icon: WorkItemsIcon,
+  },
+  cycles: {
+    label: "Cycles",
+    href: "/cycles",
+    icon: CycleIcon,
+  },
+  modules: {
+    label: "Modules",
+    href: "/modules",
+    icon: ModuleIcon,
+  },
+};
+
+export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
+  const { activeTab } = props;
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const {
+    issues: { getGroupIssueCount },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
+  const { loader } = useProject();
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  const issueCount = getGroupIssueCount(undefined, undefined, false);
+
+  const activeTabBreadcrumbDetail =
+    PROJECT_ARCHIVES_BREADCRUMB_LIST[activeTab as keyof typeof PROJECT_ARCHIVES_BREADCRUMB_LIST];
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <div className="flex items-center gap-2.5">
+          <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+            <ProjectBreadcrumb workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
+                  label="Archives"
+                  icon={<ArchiveIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
+            />
+            {activeTabBreadcrumbDetail && (
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink
+                    label={activeTabBreadcrumbDetail.label}
+                    icon={<activeTabBreadcrumbDetail.icon className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+            )}
+          </Breadcrumbs>
+          {activeTab === "issues" && issueCount && issueCount > 0 ? (
+            <Tooltip
+              isMobile={isMobile}
+              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "work items" : "work item"} in project's archived`}
+              position="bottom"
+            >
+              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                {issueCount}
+              </span>
+            </Tooltip>
+          ) : null}
+        </div>
+      </Header.LeftItem>
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { IssueDetailRoot } from "@/components/issues/issue-detail";
+// constants
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+
+const ArchivedIssueDetailsPage = observer(() => {
+  // router
+  const { workspaceSlug, projectId, archivedIssueId } = useParams();
+  // states
+  // hooks
+  const {
+    fetchIssue,
+    issue: { getIssueById },
+  } = useIssueDetail();
+
+  const { getProjectById } = useProject();
+
+  const { isLoading } = useSWR(
+    workspaceSlug && projectId && archivedIssueId
+      ? `ARCHIVED_ISSUE_DETAIL_${workspaceSlug}_${projectId}_${archivedIssueId}`
+      : null,
+    workspaceSlug && projectId && archivedIssueId
+      ? () => fetchIssue(workspaceSlug.toString(), projectId.toString(), archivedIssueId.toString())
+      : null
+  );
+
+  // derived values
+  const issue = archivedIssueId ? getIssueById(archivedIssueId.toString()) : undefined;
+  const project = issue ? getProjectById(issue?.project_id ?? "") : undefined;
+  const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
+
+  if (!issue) return <></>;
+
+  const issueLoader = !issue || isLoading;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      {issueLoader ? (
+        <Loader className="flex h-full gap-5 p-5">
+          <div className="basis-2/3 space-y-2">
+            <Loader.Item height="30px" width="40%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="40%" />
+          </div>
+          <div className="basis-1/3 space-y-3">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </div>
+        </Loader>
+      ) : (
+        <div className="flex h-full overflow-hidden">
+          <div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto">
+            {workspaceSlug && projectId && archivedIssueId && (
+              <IssueDetailRoot
+                workspaceSlug={workspaceSlug.toString()}
+                projectId={projectId.toString()}
+                issueId={archivedIssueId.toString()}
+                is_archived
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+});
+
+export default ArchivedIssueDetailsPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// ui
+import { ArchiveIcon, WorkItemsIcon } from "@plane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { IssueDetailQuickActions } from "@/components/issues/issue-detail/issue-detail-quick-actions";
+// constants
+import { ISSUE_DETAILS } from "@/constants/fetch-keys";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs/project";
+// services
+import { IssueService } from "@/services/issue";
+
+const issueService = new IssueService();
+
+export const ProjectArchivedIssueDetailsHeader = observer(() => {
+  // router
+  const { workspaceSlug, projectId, archivedIssueId } = useParams();
+  // store hooks
+  const { currentProjectDetails, loader } = useProject();
+
+  const { data: issueDetails } = useSWR(
+    workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId.toString()) : null,
+    workspaceSlug && projectId && archivedIssueId
+      ? () => issueService.retrieve(workspaceSlug.toString(), projectId.toString(), archivedIssueId.toString())
+      : null
+  );
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs isLoading={loader === "init-loader"}>
+          <ProjectBreadcrumb workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
+                label="Archives"
+                icon={<ArchiveIcon className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
+          />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
+                label="Work items"
+                icon={<WorkItemsIcon className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
+          />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={
+                  currentProjectDetails && issueDetails
+                    ? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
+                    : ""
+                }
+              />
+            }
+          />
+        </Breadcrumbs>
+      </Header.LeftItem>
+      <Header.RightItem>
+        <IssueDetailQuickActions
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          issueId={archivedIssueId.toString()}
+        />
+      </Header.RightItem>
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ProjectArchivedIssueDetailsHeader } from "./header";
+
+export default function ProjectArchivedIssueDetailLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectArchivedIssueDetailsHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ProjectArchivesHeader } from "../../header";
+
+export default function ProjectArchiveIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectArchivesHeader activeTab="issues" />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { ArchivedIssuesHeader } from "@/components/issues/archived-issues-header";
+import { ArchivedIssueLayoutRoot } from "@/components/issues/issue-layouts/roots/archived-issue-layout-root";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+const ProjectArchivedIssuesPage = observer(() => {
+  // router
+  const { projectId } = useParams();
+  // store hooks
+  const { getProjectById } = useProject();
+  // derived values
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name && `${project?.name} - Archived work items`;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <ArchivedIssuesHeader />
+        <ArchivedIssueLayoutRoot />
+      </div>
+    </>
+  );
+});
+
+export default ProjectArchivedIssuesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ProjectArchivesHeader } from "../header";
+
+export default function ProjectArchiveModulesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectArchivesHeader activeTab="modules" />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { ArchivedModuleLayoutRoot, ArchivedModulesHeader } from "@/components/modules";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+const ProjectArchivedModulesPage = observer(() => {
+  // router
+  const { projectId } = useParams();
+  // store hooks
+  const { getProjectById } = useProject();
+  // derived values
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name && `${project?.name} - Archived modules`;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <ArchivedModulesHeader />
+        <ArchivedModuleLayoutRoot />
+      </div>
+    </>
+  );
+});
+
+export default ProjectArchivedModulesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { cn } from "@plane/utils";
+// components
+import { EmptyState } from "@/components/common/empty-state";
+import { PageHead } from "@/components/core/page-title";
+import useCyclesDetails from "@/components/cycles/active-cycle/use-cycles-details";
+import { CycleDetailsSidebar } from "@/components/cycles/analytics-sidebar";
+import { CycleLayoutRoot } from "@/components/issues/issue-layouts/roots/cycle-layout-root";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+import useLocalStorage from "@/hooks/use-local-storage";
+// assets
+import emptyCycle from "@/public/empty-state/cycle.svg";
+
+const CycleDetailPage = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId, cycleId } = useParams();
+  // store hooks
+  const { getCycleById, loader } = useCycle();
+  const { getProjectById } = useProject();
+  // const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  // hooks
+  const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", false);
+
+  useCyclesDetails({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: projectId.toString(),
+    cycleId: cycleId.toString(),
+  });
+  // derived values
+  const isSidebarCollapsed = storedValue ? (storedValue === true ? true : false) : false;
+  const cycle = cycleId ? getCycleById(cycleId.toString()) : undefined;
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name && cycle?.name ? `${project?.name} - ${cycle?.name}` : undefined;
+
+  /**
+   * Toggles the sidebar
+   */
+  const toggleSidebar = () => setValue(!isSidebarCollapsed);
+
+  // const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      {!cycle && !loader ? (
+        <EmptyState
+          image={emptyCycle}
+          title="Cycle does not exist"
+          description="The cycle you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other cycles",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/cycles`),
+          }}
+        />
+      ) : (
+        <>
+          <div className="flex h-full w-full">
+            <div className="h-full w-full overflow-hidden">
+              <CycleLayoutRoot />
+            </div>
+            {cycleId && !isSidebarCollapsed && (
+              <div
+                className={cn(
+                  "flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
+                )}
+                style={{
+                  boxShadow:
+                    "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+                }}
+              >
+                <CycleDetailsSidebar
+                  handleClose={toggleSidebar}
+                  cycleId={cycleId.toString()}
+                  projectId={projectId.toString()}
+                  workspaceSlug={workspaceSlug.toString()}
+                />
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </>
+  );
+});
+
+export default CycleDetailPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { ChartNoAxesColumn, PanelRight, SlidersHorizontal } from "lucide-react";
+// plane imports
+import {
+  EIssueFilterType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  EProjectFeatureKey,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
+import { usePlatformOS } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { CycleIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
+import { Breadcrumbs, BreadcrumbNavigationSearchDropdown, Header } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { WorkItemsModal } from "@/components/analytics/work-items/modal";
+import { SwitcherLabel } from "@/components/common/switcher-label";
+import { CycleQuickActions } from "@/components/cycles/quick-actions";
+import {
+  DisplayFiltersSelection,
+  FiltersDropdown,
+  LayoutSelection,
+  MobileLayoutSelection,
+} from "@/components/issues/issue-layouts/filters";
+import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-toggle";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import useLocalStorage from "@/hooks/use-local-storage";
+// plane web imports
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+
+export const CycleIssuesHeader: React.FC = observer(() => {
+  // refs
+  const parentRef = useRef<HTMLDivElement>(null);
+  // states
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId, cycleId } = useParams() as {
+    workspaceSlug: string;
+    projectId: string;
+    cycleId: string;
+  };
+  // i18n
+  const { t } = useTranslation();
+  // store hooks
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+    issues: { getGroupIssueCount },
+  } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCycleIds, getCycleById } = useCycle();
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { currentProjectDetails, loader } = useProject();
+  const { isMobile } = usePlatformOS();
+  const { allowPermissions } = useUserPermissions();
+
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", false);
+
+  const isSidebarCollapsed = storedValue ? (storedValue === true ? true : false) : false;
+  const toggleSidebar = () => {
+    setValue(!isSidebarCollapsed);
+  };
+
+  const handleLayoutChange = useCallback(
+    (layout: EIssueLayoutTypes) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  // derived values
+  const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
+  const isCompletedCycle = cycleDetails?.status?.toLocaleLowerCase() === "completed";
+  const canUserCreateIssue = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  const switcherOptions = currentProjectCycleIds
+    ?.map((id) => {
+      const _cycle = id === cycleId ? cycleDetails : getCycleById(id);
+      if (!_cycle) return;
+      return {
+        value: _cycle.id,
+        query: _cycle.name,
+        content: <SwitcherLabel name={_cycle.name} LabelIcon={CycleIcon} />,
+      };
+    })
+    .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
+
+  const workItemsCount = getGroupIssueCount(undefined, undefined, false);
+
+  return (
+    <>
+      <WorkItemsModal
+        projectDetails={currentProjectDetails}
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        cycleDetails={cycleDetails ?? undefined}
+      />
+      <Header>
+        <Header.LeftItem>
+          <div className="flex items-center gap-2">
+            <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+              <CommonProjectBreadcrumbs
+                workspaceSlug={workspaceSlug?.toString()}
+                projectId={projectId?.toString()}
+                featureKey={EProjectFeatureKey.CYCLES}
+              />
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbNavigationSearchDropdown
+                    selectedItem={cycleId}
+                    navigationItems={switcherOptions}
+                    onChange={(value: string) => {
+                      router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${value}`);
+                    }}
+                    title={cycleDetails?.name}
+                    icon={
+                      <Breadcrumbs.Icon>
+                        <CycleIcon className="size-4 flex-shrink-0 text-custom-text-300" />
+                      </Breadcrumbs.Icon>
+                    }
+                    isLast
+                  />
+                }
+                isLast
+              />
+            </Breadcrumbs>
+            {workItemsCount && workItemsCount > 0 ? (
+              <Tooltip
+                isMobile={isMobile}
+                tooltipContent={`There are ${workItemsCount} ${
+                  workItemsCount > 1 ? "work items" : "work item"
+                } in this cycle`}
+                position="bottom"
+              >
+                <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
+                  {workItemsCount}
+                </span>
+              </Tooltip>
+            ) : null}
+          </div>
+        </Header.LeftItem>
+        <Header.RightItem className="items-center">
+          <div className="hidden items-center gap-2 md:flex ">
+            <div className="hidden @4xl:flex">
+              <LayoutSelection
+                layouts={[
+                  EIssueLayoutTypes.LIST,
+                  EIssueLayoutTypes.KANBAN,
+                  EIssueLayoutTypes.CALENDAR,
+                  EIssueLayoutTypes.SPREADSHEET,
+                  EIssueLayoutTypes.GANTT,
+                ]}
+                onChange={(layout) => handleLayoutChange(layout)}
+                selectedLayout={activeLayout}
+              />
+            </div>
+            <div className="flex @4xl:hidden">
+              <MobileLayoutSelection
+                layouts={[
+                  EIssueLayoutTypes.LIST,
+                  EIssueLayoutTypes.KANBAN,
+                  EIssueLayoutTypes.CALENDAR,
+                  EIssueLayoutTypes.SPREADSHEET,
+                  EIssueLayoutTypes.GANTT,
+                ]}
+                onChange={(layout) => handleLayoutChange(layout)}
+                activeLayout={activeLayout}
+              />
+            </div>
+            <WorkItemFiltersToggle entityType={EIssuesStoreType.CYCLE} entityId={cycleId} />
+            <FiltersDropdown
+              title={t("common.display")}
+              placement="bottom-end"
+              miniIcon={<SlidersHorizontal className="size-3.5" />}
+            >
+              <DisplayFiltersSelection
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.layoutOptions[activeLayout] : undefined
+                }
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                displayProperties={issueFilters?.displayProperties ?? {}}
+                handleDisplayPropertiesUpdate={handleDisplayProperties}
+                ignoreGroupedFilters={["cycle"]}
+                cycleViewDisabled={!currentProjectDetails?.cycle_view}
+                moduleViewDisabled={!currentProjectDetails?.module_view}
+              />
+            </FiltersDropdown>
+
+            {canUserCreateIssue && (
+              <>
+                <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+                  <div className="hidden @4xl:flex">Analytics</div>
+                  <div className="flex @4xl:hidden">
+                    <ChartNoAxesColumn className="size-3.5" />
+                  </div>
+                </Button>
+                {!isCompletedCycle && (
+                  <Button
+                    className="h-full self-start"
+                    onClick={() => {
+                      toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
+                    }}
+                    data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.CYCLE}
+                    size="sm"
+                  >
+                    {t("issue.add.label")}
+                  </Button>
+                )}
+              </>
+            )}
+            <button
+              type="button"
+              className="p-1.5 rounded outline-none hover:bg-custom-sidebar-background-80 bg-custom-background-80/70"
+              onClick={toggleSidebar}
+            >
+              <PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
+            </button>
+            <CycleQuickActions
+              parentRef={parentRef}
+              cycleId={cycleId}
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+              customClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
+            />
+          </div>
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { CycleIssuesHeader } from "./header";
+import { CycleIssuesMobileHeader } from "./mobile-header";
+
+export default function ProjectCycleIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<CycleIssuesHeader />} mobileHeader={<CycleIssuesMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useParams } from "next/navigation";
+// icons
+import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+// plane imports
+import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+// components
+import { WorkItemsModal } from "@/components/analytics/work-items/modal";
+import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+
+const SUPPORTED_LAYOUTS = [
+  { key: "list", titleTranslationKey: "issue.layouts.list", icon: List },
+  { key: "kanban", titleTranslationKey: "issue.layouts.kanban", icon: Kanban },
+  { key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: Calendar },
+];
+
+export const CycleIssuesMobileHeader = () => {
+  // router
+  const { workspaceSlug, projectId, cycleId } = useParams();
+  // states
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { currentProjectDetails } = useProject();
+  const { getCycleById } = useCycle();
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.CYCLE);
+  // derived values
+  const activeLayout = issueFilters?.displayFilters?.layout;
+  const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
+
+  const handleLayoutChange = useCallback(
+    (layout: EIssueLayoutTypes) => {
+      if (!workspaceSlug || !projectId || !cycleId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_FILTERS,
+        { layout: layout },
+        cycleId.toString()
+      );
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId || !cycleId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_FILTERS,
+        updatedDisplayFilter,
+        cycleId.toString()
+      );
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId || !cycleId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_PROPERTIES,
+        property,
+        cycleId.toString()
+      );
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  return (
+    <>
+      <WorkItemsModal
+        projectDetails={currentProjectDetails}
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        cycleDetails={cycleDetails ?? undefined}
+      />
+      <div className="flex justify-evenly py-2 border-b border-custom-border-200 md:hidden bg-custom-background-100">
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          placement="bottom-start"
+          customButton={
+            <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{t("common.layout")}</span>
+          }
+          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          closeOnSelect
+        >
+          {SUPPORTED_LAYOUTS.map((layout, index) => (
+            <CustomMenu.MenuItem
+              key={ISSUE_LAYOUTS[index].key}
+              onClick={() => {
+                handleLayoutChange(ISSUE_LAYOUTS[index].key);
+              }}
+              className="flex items-center gap-2"
+            >
+              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="w-3 h-3" />
+              <div className="text-custom-text-300">{t(layout.titleTranslationKey)}</div>
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
+        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+          <FiltersDropdown
+            title={t("common.display")}
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-custom-text-200 text-sm">
+                {t("common.display")}
+                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+              </span>
+            }
+          >
+            <DisplayFiltersSelection
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.layoutOptions[activeLayout] : undefined
+              }
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
+              displayProperties={issueFilters?.displayProperties ?? {}}
+              handleDisplayPropertiesUpdate={handleDisplayProperties}
+              ignoreGroupedFilters={["cycle"]}
+              cycleViewDisabled={!currentProjectDetails?.cycle_view}
+              moduleViewDisabled={!currentProjectDetails?.module_view}
+            />
+          </FiltersDropdown>
+        </div>
+
+        <span
+          onClick={() => setAnalyticsModal(true)}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+        >
+          {t("common.analytics")}
+        </span>
+      </div>
+    </>
+  );
+};

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// ui
+import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel, CYCLE_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { CyclesViewHeader } from "@/components/cycles/cycles-view-header";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+// constants
+
+export const CyclesListHeader: FC = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
+
+  // store hooks
+  const { toggleCreateCycleModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  const { currentProjectDetails, loader } = useProject();
+  const { t } = useTranslation();
+
+  const canUserCreateCycle = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+          <CommonProjectBreadcrumbs
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={currentProjectDetails?.id ?? ""}
+            featureKey={EProjectFeatureKey.CYCLES}
+            isLast
+          />
+        </Breadcrumbs>
+      </Header.LeftItem>
+      {canUserCreateCycle && currentProjectDetails ? (
+        <Header.RightItem>
+          <CyclesViewHeader projectId={currentProjectDetails.id} />
+          <Button
+            variant="primary"
+            size="sm"
+            data-ph-element={CYCLE_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
+            onClick={() => {
+              toggleCreateCycleModal(true);
+            }}
+          >
+            <div className="sm:hidden block">{t("add")}</div>
+            <div className="hidden sm:block">{t("project_cycles.add_cycle")}</div>
+          </Button>
+        </Header.RightItem>
+      ) : (
+        <></>
+      )}
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { CyclesListHeader } from "./header";
+import { CyclesListMobileHeader } from "./mobile-header";
+
+export default function ProjectCyclesListLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<CyclesListHeader />} mobileHeader={<CyclesListMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { observer } from "mobx-react";
+// ui
+import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+// plane package imports
+import type { TCycleLayoutOptions } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+// hooks
+import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
+import { useProject } from "@/hooks/store/use-project";
+
+const CYCLE_VIEW_LAYOUTS: {
+  key: TCycleLayoutOptions;
+  icon: LucideIcon;
+  title: string;
+}[] = [
+  {
+    key: "list",
+    icon: List,
+    title: "List layout",
+  },
+  {
+    key: "board",
+    icon: LayoutGrid,
+    title: "Gallery layout",
+  },
+  {
+    key: "gantt",
+    icon: GanttChartSquare,
+    title: "Timeline layout",
+  },
+];
+
+export const CyclesListMobileHeader = observer(() => {
+  const { currentProjectDetails } = useProject();
+  // hooks
+  const { updateDisplayFilters } = useCycleFilter();
+  return (
+    <div className="flex justify-center sm:hidden">
+      <CustomMenu
+        maxHeight={"md"}
+        className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        // placement="bottom-start"
+        customButton={
+          <span className="flex items-center gap-2">
+            <List className="h-4 w-4" />
+            <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
+          </span>
+        }
+        customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+        closeOnSelect
+      >
+        {CYCLE_VIEW_LAYOUTS.map((layout) => {
+          if (layout.key == "gantt") return;
+          return (
+            <CustomMenu.MenuItem
+              key={layout.key}
+              onClick={() => {
+                updateDisplayFilters(currentProjectDetails!.id, {
+                  layout: layout.key,
+                });
+              }}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="w-3 h-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </div>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel, CYCLE_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TCycleFilters } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+// components
+import { Header, EHeaderVariant } from "@plane/ui";
+import { calculateTotalFilters } from "@plane/utils";
+import { PageHead } from "@/components/core/page-title";
+import { CycleAppliedFiltersList } from "@/components/cycles/applied-filters";
+import { CyclesView } from "@/components/cycles/cycles-view";
+import { CycleCreateUpdateModal } from "@/components/cycles/modal";
+import { ComicBoxButton } from "@/components/empty-state/comic-box-button";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+const ProjectCyclesPage = observer(() => {
+  // states
+  const [createModal, setCreateModal] = useState(false);
+  // store hooks
+  const { currentProjectCycleIds, loader } = useCycle();
+  const { getProjectById, currentProjectDetails } = useProject();
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // cycle filters hook
+  const { clearAllFilters, currentProjectFilters, updateFilters } = useCycleFilter();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const totalCycles = currentProjectCycleIds?.length ?? 0;
+  const project = projectId ? getProjectById(projectId?.toString()) : undefined;
+  const pageTitle = project?.name ? `${project?.name} - ${t("common.cycles", { count: 2 })}` : undefined;
+  const hasAdminLevelPermission = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const hasMemberLevelPermission = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/cycles" });
+
+  const handleRemoveFilter = (key: keyof TCycleFilters, value: string | null) => {
+    if (!projectId) return;
+    let newValues = currentProjectFilters?.[key] ?? [];
+
+    if (!value) newValues = [];
+    else newValues = newValues.filter((val) => val !== value);
+
+    updateFilters(projectId.toString(), { [key]: newValues });
+  };
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  // No access to cycle
+  if (currentProjectDetails?.cycle_view === false)
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <DetailedEmptyState
+          title={t("disabled_project.empty_state.cycle.title")}
+          description={t("disabled_project.empty_state.cycle.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("disabled_project.empty_state.cycle.primary_button.text"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/settings/projects/${projectId}/features`);
+            },
+            disabled: !hasAdminLevelPermission,
+          }}
+        />
+      </div>
+    );
+
+  if (loader) return <CycleModuleListLayoutLoader />;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="w-full h-full">
+        <CycleCreateUpdateModal
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          isOpen={createModal}
+          handleClose={() => setCreateModal(false)}
+        />
+        {totalCycles === 0 ? (
+          <div className="h-full place-items-center">
+            <DetailedEmptyState
+              title={t("project_cycles.empty_state.general.title")}
+              description={t("project_cycles.empty_state.general.description")}
+              assetPath={resolvedPath}
+              customPrimaryButton={
+                <ComicBoxButton
+                  label={t("project_cycles.empty_state.general.primary_button.text")}
+                  title={t("project_cycles.empty_state.general.primary_button.comic.title")}
+                  description={t("project_cycles.empty_state.general.primary_button.comic.description")}
+                  data-ph-element={CYCLE_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON}
+                  onClick={() => {
+                    setCreateModal(true);
+                  }}
+                  disabled={!hasMemberLevelPermission}
+                />
+              }
+            />
+          </div>
+        ) : (
+          <>
+            {calculateTotalFilters(currentProjectFilters ?? {}) !== 0 && (
+              <Header variant={EHeaderVariant.TERNARY}>
+                <CycleAppliedFiltersList
+                  appliedFilters={currentProjectFilters ?? {}}
+                  handleClearAllFilters={() => clearAllFilters(projectId.toString())}
+                  handleRemoveFilter={handleRemoveFilter}
+                />
+              </Header>
+            )}
+
+            <CyclesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+          </>
+        )}
+      </div>
+    </>
+  );
+});
+
+export default ProjectCyclesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/layout.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ProjectInboxHeader } from "@/plane-web/components/projects/settings/intake/header";
+
+export default function ProjectInboxIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectInboxHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+import { observer } from "mobx-react";
+import { useParams, useSearchParams } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EUserProjectRoles, EInboxIssueCurrentTab } from "@plane/types";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { InboxIssueRoot } from "@/components/inbox";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+const ProjectInboxPage = observer(() => {
+  /// router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  const searchParams = useSearchParams();
+  const navigationTab = searchParams.get("currentTab");
+  const inboxIssueId = searchParams.get("inboxIssueId");
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { currentProjectDetails } = useProject();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/intake" });
+
+  // No access to inbox
+  if (currentProjectDetails?.inbox_view === false)
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <DetailedEmptyState
+          title={t("disabled_project.empty_state.inbox.title")}
+          description={t("disabled_project.empty_state.inbox.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("disabled_project.empty_state.inbox.primary_button.text"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/settings/projects/${projectId}/features`);
+            },
+            disabled: !canPerformEmptyStateActions,
+          }}
+        />
+      </div>
+    );
+
+  // derived values
+  const pageTitle = currentProjectDetails?.name
+    ? t("inbox_issue.page_label", {
+        workspace: currentProjectDetails?.name,
+      })
+    : t("inbox_issue.page_label", {
+        workspace: "Plane",
+      });
+
+  const currentNavigationTab = navigationTab
+    ? navigationTab === "open"
+      ? EInboxIssueCurrentTab.OPEN
+      : EInboxIssueCurrentTab.CLOSED
+    : undefined;
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  return (
+    <div className="flex h-full flex-col">
+      <PageHead title={pageTitle} />
+      <div className="w-full h-full overflow-hidden">
+        <InboxIssueRoot
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          inboxIssueId={inboxIssueId?.toString() || undefined}
+          inboxAccessible={currentProjectDetails?.inbox_view || false}
+          navigationTab={currentNavigationTab}
+        />
+      </div>
+    </div>
+  );
+});
+
+export default ProjectInboxPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+import { useTranslation } from "@plane/i18n";
+// components
+import { EmptyState } from "@/components/common/empty-state";
+import { LogoSpinner } from "@/components/common/logo-spinner";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
+// assets
+import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
+import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";
+// services
+import { IssueService } from "@/services/issue/issue.service";
+
+const issueService = new IssueService();
+
+const IssueDetailsPage = observer(() => {
+  const router = useAppRouter();
+  const { t } = useTranslation();
+  const { workspaceSlug, projectId, issueId } = useParams();
+  const { resolvedTheme } = useTheme();
+
+  const { data, isLoading, error } = useSWR(
+    workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_META_${workspaceSlug}_${projectId}_${issueId}` : null,
+    workspaceSlug && projectId && issueId
+      ? () => issueService.getIssueMetaFromURL(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      : null
+  );
+
+  useEffect(() => {
+    if (data) {
+      router.push(`/${workspaceSlug}/browse/${data.project_identifier}-${data.sequence_id}`);
+    }
+  }, [workspaceSlug, data]);
+
+  return (
+    <div className="flex items-center justify-center size-full">
+      {error ? (
+        <EmptyState
+          image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
+          title={t("issue.empty_state.issue_detail.title")}
+          description={t("issue.empty_state.issue_detail.description")}
+          primaryButton={{
+            text: t("issue.empty_state.issue_detail.primary_button.text"),
+            onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues/`),
+          }}
+        />
+      ) : isLoading ? (
+        <>
+          <LogoSpinner />
+        </>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+});
+
+export default IssueDetailsPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx

@@ -0,0 +1,3 @@
+import { IssuesHeader } from "@/plane-web/components/issues/header";
+
+export const ProjectIssuesHeader = () => <IssuesHeader />;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ProjectIssuesHeader } from "./header";
+import { ProjectIssuesMobileHeader } from "./mobile-header";
+
+export default function ProjectIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectIssuesHeader />} mobileHeader={<ProjectIssuesMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { ChevronDown } from "lucide-react";
+// plane imports
+import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
+// components
+import { WorkItemsModal } from "@/components/analytics/work-items/modal";
+import {
+  DisplayFiltersSelection,
+  FiltersDropdown,
+  MobileLayoutSelection,
+} from "@/components/issues/issue-layouts/filters";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+
+export const ProjectIssuesMobileHeader = observer(() => {
+  // i18n
+  const { t } = useTranslation();
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  const { workspaceSlug, projectId } = useParams() as {
+    workspaceSlug: string;
+    projectId: string;
+  };
+  const { currentProjectDetails } = useProject();
+
+  // store hooks
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.PROJECT);
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: EIssueLayoutTypes) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property);
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
+
+  return (
+    <>
+      <WorkItemsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        projectDetails={currentProjectDetails ?? undefined}
+      />
+      <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
+        <MobileLayoutSelection
+          layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+          onChange={handleLayoutChange}
+        />
+        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+          <FiltersDropdown
+            title={t("common.display")}
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-sm text-custom-text-200">
+                {t("common.display")}
+                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
+              </span>
+            }
+          >
+            <DisplayFiltersSelection
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.layoutOptions[activeLayout] : undefined
+              }
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
+              displayProperties={issueFilters?.displayProperties ?? {}}
+              handleDisplayPropertiesUpdate={handleDisplayProperties}
+              cycleViewDisabled={!currentProjectDetails?.cycle_view}
+              moduleViewDisabled={!currentProjectDetails?.module_view}
+            />
+          </FiltersDropdown>
+        </div>
+
+        <button
+          onClick={() => setAnalyticsModal(true)}
+          className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
+        >
+          {t("common.analytics")}
+        </button>
+      </div>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { observer } from "mobx-react";
+import Head from "next/head";
+import { useParams } from "next/navigation";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { ProjectLayoutRoot } from "@/components/issues/issue-layouts/roots/project-layout-root";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+const ProjectIssuesPage = observer(() => {
+  const { projectId } = useParams();
+  // i18n
+  const { t } = useTranslation();
+  // store
+  const { getProjectById } = useProject();
+
+  if (!projectId) {
+    return <></>;
+  }
+
+  // derived values
+  const project = getProjectById(projectId.toString());
+  const pageTitle = project?.name ? `${project?.name} - ${t("issue.label", { count: 2 })}` : undefined; // Count is for pluralization
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <Head>
+        <title>
+          {project?.name} - {t("issue.label", { count: 2 })}
+        </title>
+      </Head>
+      <div className="h-full w-full">
+        <ProjectLayoutRoot />
+      </div>
+    </>
+  );
+});
+
+export default ProjectIssuesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// components
+import { cn } from "@plane/utils";
+import { EmptyState } from "@/components/common/empty-state";
+import { PageHead } from "@/components/core/page-title";
+import { ModuleLayoutRoot } from "@/components/issues/issue-layouts/roots/module-layout-root";
+import { ModuleAnalyticsSidebar } from "@/components/modules";
+// helpers
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+import useLocalStorage from "@/hooks/use-local-storage";
+// assets
+import emptyModule from "@/public/empty-state/module.svg";
+
+const ModuleIssuesPage = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId, moduleId } = useParams();
+  // store hooks
+  const { fetchModuleDetails, getModuleById } = useModule();
+  const { getProjectById } = useProject();
+  // const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
+  // local storage
+  const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
+  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
+  // fetching module details
+  const { error } = useSWR(
+    workspaceSlug && projectId && moduleId ? `CURRENT_MODULE_DETAILS_${moduleId.toString()}` : null,
+    workspaceSlug && projectId && moduleId
+      ? () => fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString())
+      : null
+  );
+  // derived values
+  const projectModule = moduleId ? getModuleById(moduleId.toString()) : undefined;
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name && projectModule?.name ? `${project?.name} - ${projectModule?.name}` : undefined;
+
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
+  };
+
+  if (!workspaceSlug || !projectId || !moduleId) return <></>;
+
+  // const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      {error ? (
+        <EmptyState
+          image={emptyModule}
+          title="Module does not exist"
+          description="The module you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other modules",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/modules`),
+          }}
+        />
+      ) : (
+        <div className="flex h-full w-full">
+          <div className="h-full w-full overflow-hidden">
+            <ModuleLayoutRoot />
+          </div>
+          {moduleId && !isSidebarCollapsed && (
+            <div
+              className={cn(
+                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
+              )}
+              style={{
+                boxShadow:
+                  "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+              }}
+            >
+              <ModuleAnalyticsSidebar moduleId={moduleId.toString()} handleClose={toggleSidebar} />
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
+
+export default ModuleIssuesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { ChartNoAxesColumn, PanelRight, SlidersHorizontal } from "lucide-react";
+// plane imports
+import {
+  EIssueFilterType,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  EProjectFeatureKey,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { ModuleIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
+import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { WorkItemsModal } from "@/components/analytics/work-items/modal";
+import { SwitcherLabel } from "@/components/common/switcher-label";
+import {
+  DisplayFiltersSelection,
+  FiltersDropdown,
+  LayoutSelection,
+  MobileLayoutSelection,
+} from "@/components/issues/issue-layouts/filters";
+import { ModuleQuickActions } from "@/components/modules";
+import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-toggle";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+import useLocalStorage from "@/hooks/use-local-storage";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+
+export const ModuleIssuesHeader: React.FC = observer(() => {
+  // refs
+  const parentRef = useRef<HTMLDivElement>(null);
+  // states
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId, moduleId: routerModuleId } = useParams();
+  const moduleId = routerModuleId ? routerModuleId.toString() : undefined;
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // store hooks
+  const {
+    issuesFilter: { issueFilters },
+    issues: { getGroupIssueCount },
+  } = useIssues(EIssuesStoreType.MODULE);
+  const { updateFilters } = useIssuesActions(EIssuesStoreType.MODULE);
+  const { projectModuleIds, getModuleById } = useModule();
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  const { currentProjectDetails, loader } = useProject();
+  // local storage
+  const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
+  // derived values
+  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
+  const activeLayout = issueFilters?.displayFilters?.layout;
+  const moduleDetails = moduleId ? getModuleById(moduleId) : undefined;
+  const canUserCreateIssue = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const workItemsCount = getGroupIssueCount(undefined, undefined, false);
+
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
+  };
+
+  const handleLayoutChange = useCallback(
+    (layout: EIssueLayoutTypes) => {
+      if (!projectId) return;
+      updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
+    },
+    [projectId, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!projectId) return;
+      updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
+    },
+    [projectId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!projectId) return;
+      updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_PROPERTIES, property);
+    },
+    [projectId, updateFilters]
+  );
+
+  const switcherOptions = projectModuleIds
+    ?.map((id) => {
+      const _module = id === moduleId ? moduleDetails : getModuleById(id);
+      if (!_module) return;
+      return {
+        value: _module.id,
+        query: _module.name,
+        content: <SwitcherLabel name={_module.name} LabelIcon={ModuleIcon} />,
+      };
+    })
+    .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
+
+  return (
+    <>
+      <WorkItemsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        moduleDetails={moduleDetails ?? undefined}
+        projectDetails={currentProjectDetails}
+      />
+      <Header>
+        <Header.LeftItem>
+          <div className="flex items-center gap-2">
+            <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+              <CommonProjectBreadcrumbs
+                workspaceSlug={workspaceSlug?.toString() ?? ""}
+                projectId={projectId?.toString() ?? ""}
+                featureKey={EProjectFeatureKey.MODULES}
+              />
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbNavigationSearchDropdown
+                    selectedItem={moduleId?.toString() ?? ""}
+                    navigationItems={switcherOptions}
+                    onChange={(value: string) => {
+                      router.push(`/${workspaceSlug}/projects/${projectId}/modules/${value}`);
+                    }}
+                    title={moduleDetails?.name}
+                    icon={<ModuleIcon className="size-3.5 flex-shrink-0 text-custom-text-300" />}
+                    isLast
+                  />
+                }
+              />
+            </Breadcrumbs>
+            {workItemsCount && workItemsCount > 0 ? (
+              <Tooltip
+                isMobile={isMobile}
+                tooltipContent={`There are ${workItemsCount} ${
+                  workItemsCount > 1 ? "work items" : "work item"
+                } in this module`}
+                position="bottom"
+              >
+                <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
+                  {workItemsCount}
+                </span>
+              </Tooltip>
+            ) : null}
+          </div>
+        </Header.LeftItem>
+        <Header.RightItem className="items-center">
+          <div className="hidden gap-2 md:flex">
+            <div className="hidden @4xl:flex">
+              <LayoutSelection
+                layouts={[
+                  EIssueLayoutTypes.LIST,
+                  EIssueLayoutTypes.KANBAN,
+                  EIssueLayoutTypes.CALENDAR,
+                  EIssueLayoutTypes.SPREADSHEET,
+                  EIssueLayoutTypes.GANTT,
+                ]}
+                onChange={(layout) => handleLayoutChange(layout)}
+                selectedLayout={activeLayout}
+              />
+            </div>
+            <div className="flex @4xl:hidden">
+              <MobileLayoutSelection
+                layouts={[
+                  EIssueLayoutTypes.LIST,
+                  EIssueLayoutTypes.KANBAN,
+                  EIssueLayoutTypes.CALENDAR,
+                  EIssueLayoutTypes.SPREADSHEET,
+                  EIssueLayoutTypes.GANTT,
+                ]}
+                onChange={(layout) => handleLayoutChange(layout)}
+                activeLayout={activeLayout}
+              />
+            </div>
+            {moduleId && <WorkItemFiltersToggle entityType={EIssuesStoreType.MODULE} entityId={moduleId} />}
+            <FiltersDropdown
+              title="Display"
+              placement="bottom-end"
+              miniIcon={<SlidersHorizontal className="size-3.5" />}
+            >
+              <DisplayFiltersSelection
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.layoutOptions[activeLayout] : undefined
+                }
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                displayProperties={issueFilters?.displayProperties ?? {}}
+                handleDisplayPropertiesUpdate={handleDisplayProperties}
+                ignoreGroupedFilters={["module"]}
+                cycleViewDisabled={!currentProjectDetails?.cycle_view}
+                moduleViewDisabled={!currentProjectDetails?.module_view}
+              />
+            </FiltersDropdown>
+          </div>
+
+          {canUserCreateIssue ? (
+            <>
+              <Button
+                className="hidden md:block"
+                onClick={() => setAnalyticsModal(true)}
+                variant="neutral-primary"
+                size="sm"
+              >
+                <div className="hidden @4xl:flex">Analytics</div>
+                <div className="flex @4xl:hidden">
+                  <ChartNoAxesColumn className="size-3.5" />
+                </div>
+              </Button>
+              <Button
+                className="hidden sm:flex"
+                onClick={() => {
+                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
+                }}
+                data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.MODULE}
+                size="sm"
+              >
+                Add work item
+              </Button>
+            </>
+          ) : (
+            <></>
+          )}
+          <button
+            type="button"
+            className="p-1.5 rounded outline-none hover:bg-custom-sidebar-background-80 bg-custom-background-80/70"
+            onClick={toggleSidebar}
+          >
+            <PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
+          </button>
+          {moduleId && (
+            <ModuleQuickActions
+              parentRef={parentRef}
+              moduleId={moduleId}
+              projectId={projectId.toString()}
+              workspaceSlug={workspaceSlug.toString()}
+              customClassName="flex-shrink-0 flex items-center justify-center bg-custom-background-80/70 rounded size-[26px]"
+            />
+          )}
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ModuleIssuesHeader } from "./header";
+import { ModuleIssuesMobileHeader } from "./mobile-header";
+
+export default function ProjectModuleIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ModuleIssuesHeader />} mobileHeader={<ModuleIssuesMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+// plane imports
+import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+// components
+import { WorkItemsModal } from "@/components/analytics/work-items/modal";
+import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+
+const SUPPORTED_LAYOUTS = [
+  { key: "list", i18n_title: "issue.layouts.list", icon: List },
+  { key: "kanban", i18n_title: "issue.layouts.kanban", icon: Kanban },
+  { key: "calendar", i18n_title: "issue.layouts.calendar", icon: Calendar },
+];
+
+export const ModuleIssuesMobileHeader = observer(() => {
+  // router
+  const { workspaceSlug, projectId, moduleId } = useParams() as {
+    workspaceSlug: string;
+    projectId: string;
+    moduleId: string;
+  };
+  // states
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { currentProjectDetails } = useProject();
+  const { getModuleById } = useModule();
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.MODULE);
+  // derived values
+  const activeLayout = issueFilters?.displayFilters?.layout;
+  const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
+
+  const handleLayoutChange = useCallback(
+    (layout: EIssueLayoutTypes) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, moduleId);
+    },
+    [workspaceSlug, projectId, moduleId, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, moduleId);
+    },
+    [workspaceSlug, projectId, moduleId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, moduleId);
+    },
+    [workspaceSlug, projectId, moduleId, updateFilters]
+  );
+
+  return (
+    <div className="block md:hidden">
+      <WorkItemsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        moduleDetails={moduleDetails ?? undefined}
+        projectDetails={currentProjectDetails}
+      />
+      <div className="flex justify-evenly border-b border-custom-border-200 bg-custom-background-100 py-2">
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-sm text-custom-text-200"
+          placement="bottom-start"
+          customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
+          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          closeOnSelect
+        >
+          {SUPPORTED_LAYOUTS.map((layout, index) => (
+            <CustomMenu.MenuItem
+              key={layout.key}
+              onClick={() => {
+                handleLayoutChange(ISSUE_LAYOUTS[index].key);
+              }}
+              className="flex items-center gap-2"
+            >
+              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
+              <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
+        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+          <FiltersDropdown
+            title="Display"
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-sm text-custom-text-200">
+                Display
+                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
+              </span>
+            }
+          >
+            <DisplayFiltersSelection
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.layoutOptions[activeLayout] : undefined
+              }
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
+              displayProperties={issueFilters?.displayProperties ?? {}}
+              handleDisplayPropertiesUpdate={handleDisplayProperties}
+              ignoreGroupedFilters={["module"]}
+              cycleViewDisabled={!currentProjectDetails?.cycle_view}
+              moduleViewDisabled={!currentProjectDetails?.module_view}
+            />
+          </FiltersDropdown>
+        </div>
+
+        <button
+          onClick={() => setAnalyticsModal(true)}
+          className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
+        >
+          Analytics
+        </button>
+      </div>
+    </div>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel, MODULE_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Button } from "@plane/propel/button";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { ModuleViewHeader } from "@/components/modules";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+// constants
+
+export const ModulesListHeader: React.FC = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
+  // store hooks
+  const { toggleCreateModuleModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+
+  const { loader } = useProject();
+
+  const { t } = useTranslation();
+
+  // auth
+  const canUserCreateModule = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <div>
+          <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+            <CommonProjectBreadcrumbs
+              workspaceSlug={workspaceSlug?.toString() ?? ""}
+              projectId={projectId?.toString() ?? ""}
+              featureKey={EProjectFeatureKey.MODULES}
+              isLast
+            />
+          </Breadcrumbs>
+        </div>
+      </Header.LeftItem>
+      <Header.RightItem>
+        <ModuleViewHeader />
+        {canUserCreateModule ? (
+          <Button
+            variant="primary"
+            size="sm"
+            data-ph-element={MODULE_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
+            onClick={() => {
+              toggleCreateModuleModal(true);
+            }}
+          >
+            <div className="sm:hidden block">{t("add")}</div>
+            <div className="hidden sm:block">{t("project_module.add_module")}</div>
+          </Button>
+        ) : (
+          <></>
+        )}
+      </Header.RightItem>
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ModulesListHeader } from "./header";
+import { ModulesListMobileHeader } from "./mobile-header";
+
+export default function ProjectModulesListLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ModulesListHeader />} mobileHeader={<ModulesListMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { ChevronDown } from "lucide-react";
+import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { CustomMenu, Row } from "@plane/ui";
+import { ModuleLayoutIcon } from "@/components/modules";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { useProject } from "@/hooks/store/use-project";
+
+export const ModulesListMobileHeader = observer(() => {
+  const { currentProjectDetails } = useProject();
+  const { updateDisplayFilters } = useModuleFilter();
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex justify-start md:hidden">
+      <CustomMenu
+        maxHeight={"md"}
+        className="flex flex-grow justify-start text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        // placement="bottom-start"
+        customButton={
+          <Row className="flex flex-grow justify-center text-custom-text-200 text-sm gap-2">
+            <span>Layout</span> <ChevronDown className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
+          </Row>
+        }
+        customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+        closeOnSelect
+      >
+        {MODULE_VIEW_LAYOUTS.map((layout) => {
+          if (layout.key == "gantt") return;
+          return (
+            <CustomMenu.MenuItem
+              key={layout.key}
+              onClick={() => {
+                updateDisplayFilters(currentProjectDetails!.id.toString(), { layout: layout.key });
+              }}
+              className="flex items-center gap-2"
+            >
+              <ModuleLayoutIcon layoutType={layout.key} />
+              <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </div>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// types
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TModuleFilters } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+// components
+import { calculateTotalFilters } from "@plane/utils";
+import { PageHead } from "@/components/core/page-title";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
+// helpers
+// hooks
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+const ProjectModulesPage = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // store
+  const { getProjectById, currentProjectDetails } = useProject();
+  const { currentProjectFilters, currentProjectDisplayFilters, clearAllFilters, updateFilters, updateDisplayFilters } =
+    useModuleFilter();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name ? `${project?.name} - Modules` : undefined;
+  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/modules" });
+
+  const handleRemoveFilter = useCallback(
+    (key: keyof TModuleFilters, value: string | null) => {
+      if (!projectId) return;
+      let newValues = currentProjectFilters?.[key] ?? [];
+
+      if (!value) newValues = [];
+      else newValues = newValues.filter((val) => val !== value);
+
+      updateFilters(projectId.toString(), { [key]: newValues });
+    },
+    [currentProjectFilters, projectId, updateFilters]
+  );
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  // No access to
+  if (currentProjectDetails?.module_view === false)
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <DetailedEmptyState
+          title={t("disabled_project.empty_state.module.title")}
+          description={t("disabled_project.empty_state.module.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("disabled_project.empty_state.module.primary_button.text"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/settings/projects/${projectId}/features`);
+            },
+            disabled: !canPerformEmptyStateActions,
+          }}
+        />
+      </div>
+    );
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="h-full w-full flex flex-col">
+        {(calculateTotalFilters(currentProjectFilters ?? {}) !== 0 || currentProjectDisplayFilters?.favorites) && (
+          <ModuleAppliedFiltersList
+            appliedFilters={currentProjectFilters ?? {}}
+            isFavoriteFilterApplied={currentProjectDisplayFilters?.favorites ?? false}
+            handleClearAllFilters={() => clearAllFilters(`${projectId}`)}
+            handleRemoveFilter={handleRemoveFilter}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!projectId) return;
+              updateDisplayFilters(projectId.toString(), val);
+            }}
+            alwaysAllowEditing
+          />
+        )}
+        <ModulesListView />
+      </div>
+    </>
+  );
+});
+
+export default ProjectModulesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useCallback, useEffect, useMemo } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane types
+import { getButtonStyling } from "@plane/propel/button";
+import type { TSearchEntityRequestPayload, TWebhookConnectionQueryParams } from "@plane/types";
+import { EFileAssetType } from "@plane/types";
+// plane ui
+// plane utils
+import { cn } from "@plane/utils";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PageHead } from "@/components/core/page-title";
+import { IssuePeekOverview } from "@/components/issues/peek-overview";
+import type { TPageRootConfig, TPageRootHandlers } from "@/components/pages/editor/page-root";
+import { PageRoot } from "@/components/pages/editor/page-root";
+// hooks
+import { useEditorConfig } from "@/hooks/editor";
+import { useEditorAsset } from "@/hooks/store/use-editor-asset";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web hooks
+import { EPageStoreType, usePage, usePageStore } from "@/plane-web/hooks/store";
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
+// services
+import { ProjectPageService, ProjectPageVersionService } from "@/services/page";
+const workspaceService = new WorkspaceService();
+const projectPageService = new ProjectPageService();
+const projectPageVersionService = new ProjectPageVersionService();
+
+const storeType = EPageStoreType.PROJECT;
+
+const PageDetailsPage = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId, pageId } = useParams();
+  // store hooks
+  const { createPage, fetchPageDetails } = usePageStore(storeType);
+  const page = usePage({
+    pageId: pageId?.toString() ?? "",
+    storeType,
+  });
+  const { getWorkspaceBySlug } = useWorkspace();
+  const { uploadEditorAsset } = useEditorAsset();
+  // derived values
+  const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "") : "";
+  const { canCurrentUserAccessPage, id, name, updateDescription } = page ?? {};
+  // entity search handler
+  const fetchEntityCallback = useCallback(
+    async (payload: TSearchEntityRequestPayload) =>
+      await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+        ...payload,
+        project_id: projectId?.toString() ?? "",
+      }),
+    [projectId, workspaceSlug]
+  );
+  // editor config
+  const { getEditorFileHandlers } = useEditorConfig();
+  // fetch page details
+  const { error: pageDetailsError } = useSWR(
+    workspaceSlug && projectId && pageId ? `PAGE_DETAILS_${pageId}` : null,
+    workspaceSlug && projectId && pageId
+      ? () => fetchPageDetails(workspaceSlug?.toString(), projectId?.toString(), pageId.toString())
+      : null,
+    {
+      revalidateIfStale: true,
+      revalidateOnFocus: true,
+      revalidateOnReconnect: true,
+    }
+  );
+  // page root handlers
+  const pageRootHandlers: TPageRootHandlers = useMemo(
+    () => ({
+      create: createPage,
+      fetchAllVersions: async (pageId) => {
+        if (!workspaceSlug || !projectId) return;
+        return await projectPageVersionService.fetchAllVersions(workspaceSlug.toString(), projectId.toString(), pageId);
+      },
+      fetchDescriptionBinary: async () => {
+        if (!workspaceSlug || !projectId || !id) return;
+        return await projectPageService.fetchDescriptionBinary(workspaceSlug.toString(), projectId.toString(), id);
+      },
+      fetchEntity: fetchEntityCallback,
+      fetchVersionDetails: async (pageId, versionId) => {
+        if (!workspaceSlug || !projectId) return;
+        return await projectPageVersionService.fetchVersionById(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          pageId,
+          versionId
+        );
+      },
+      restoreVersion: async (pageId, versionId) => {
+        if (!workspaceSlug || !projectId) return;
+        await projectPageVersionService.restoreVersion(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          pageId,
+          versionId
+        );
+      },
+      getRedirectionLink: (pageId) => {
+        if (pageId) {
+          return `/${workspaceSlug}/projects/${projectId}/pages/${pageId}`;
+        } else {
+          return `/${workspaceSlug}/projects/${projectId}/pages`;
+        }
+      },
+      updateDescription: updateDescription ?? (async () => {}),
+    }),
+    [createPage, fetchEntityCallback, id, updateDescription, workspaceSlug, projectId]
+  );
+  // page root config
+  const pageRootConfig: TPageRootConfig = useMemo(
+    () => ({
+      fileHandler: getEditorFileHandlers({
+        projectId: projectId?.toString() ?? "",
+        uploadFile: async (blockId, file) => {
+          const { asset_id } = await uploadEditorAsset({
+            blockId,
+            data: {
+              entity_identifier: id ?? "",
+              entity_type: EFileAssetType.PAGE_DESCRIPTION,
+            },
+            file,
+            projectId: projectId?.toString() ?? "",
+            workspaceSlug: workspaceSlug?.toString() ?? "",
+          });
+          return asset_id;
+        },
+        workspaceId,
+        workspaceSlug: workspaceSlug?.toString() ?? "",
+      }),
+    }),
+    [getEditorFileHandlers, id, uploadEditorAsset, projectId, workspaceId, workspaceSlug]
+  );
+
+  const webhookConnectionParams: TWebhookConnectionQueryParams = useMemo(
+    () => ({
+      documentType: "project_page",
+      projectId: projectId?.toString() ?? "",
+      workspaceSlug: workspaceSlug?.toString() ?? "",
+    }),
+    [projectId, workspaceSlug]
+  );
+
+  useEffect(() => {
+    if (page?.deleted_at && page?.id) {
+      router.push(pageRootHandlers.getRedirectionLink());
+    }
+  }, [page?.deleted_at, page?.id, router, pageRootHandlers]);
+
+  if ((!page || !id) && !pageDetailsError)
+    return (
+      <div className="size-full grid place-items-center">
+        <LogoSpinner />
+      </div>
+    );
+
+  if (pageDetailsError || !canCurrentUserAccessPage)
+    return (
+      <div className="h-full w-full flex flex-col items-center justify-center">
+        <h3 className="text-lg font-semibold text-center">Page not found</h3>
+        <p className="text-sm text-custom-text-200 text-center mt-3">
+          The page you are trying to access doesn{"'"}t exist or you don{"'"}t have permission to view it.
+        </p>
+        <Link
+          href={`/${workspaceSlug}/projects/${projectId}/pages`}
+          className={cn(getButtonStyling("neutral-primary", "md"), "mt-5")}
+        >
+          View other Pages
+        </Link>
+      </div>
+    );
+
+  if (!page || !workspaceSlug || !projectId) return null;
+
+  return (
+    <>
+      <PageHead title={name} />
+      <div className="flex h-full flex-col justify-between">
+        <div className="relative h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
+          <PageRoot
+            config={pageRootConfig}
+            handlers={pageRootHandlers}
+            storeType={storeType}
+            page={page}
+            webhookConnectionParams={webhookConnectionParams}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId?.toString()}
+          />
+          <IssuePeekOverview />
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default PageDetailsPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx

@@ -0,0 +1,102 @@
+"use client";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { EProjectFeatureKey } from "@plane/constants";
+import { PageIcon } from "@plane/propel/icons";
+// types
+import type { ICustomSearchSelectOption } from "@plane/types";
+// ui
+import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/ui";
+// components
+import { getPageName } from "@plane/utils";
+import { PageAccessIcon } from "@/components/common/page-access-icon";
+import { SwitcherIcon, SwitcherLabel } from "@/components/common/switcher-label";
+import { PageHeaderActions } from "@/components/pages/header/actions";
+// helpers
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// plane web components
+import { useAppRouter } from "@/hooks/use-app-router";
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+import { PageDetailsHeaderExtraActions } from "@/plane-web/components/pages";
+// plane web hooks
+import { EPageStoreType, usePage, usePageStore } from "@/plane-web/hooks/store";
+
+export interface IPagesHeaderProps {
+  showButton?: boolean;
+}
+
+const storeType = EPageStoreType.PROJECT;
+
+export const PageDetailsHeader = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, pageId, projectId } = useParams();
+  // store hooks
+  const { loader } = useProject();
+  const { getPageById, getCurrentProjectPageIds } = usePageStore(storeType);
+  const page = usePage({
+    pageId: pageId?.toString() ?? "",
+    storeType,
+  });
+  // derived values
+  const projectPageIds = getCurrentProjectPageIds(projectId?.toString());
+
+  const switcherOptions = projectPageIds
+    .map((id) => {
+      const _page = id === pageId ? page : getPageById(id);
+      if (!_page) return;
+      return {
+        value: _page.id,
+        query: _page.name,
+        content: (
+          <div className="flex gap-2 items-center justify-between">
+            <SwitcherLabel logo_props={_page.logo_props} name={getPageName(_page.name)} LabelIcon={PageIcon} />
+            <PageAccessIcon {..._page} />
+          </div>
+        ),
+      };
+    })
+    .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
+
+  if (!page) return null;
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <div>
+          <Breadcrumbs isLoading={loader === "init-loader"}>
+            <CommonProjectBreadcrumbs
+              workspaceSlug={workspaceSlug?.toString()}
+              projectId={projectId?.toString()}
+              featureKey={EProjectFeatureKey.PAGES}
+            />
+
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbNavigationSearchDropdown
+                  selectedItem={pageId?.toString() ?? ""}
+                  navigationItems={switcherOptions}
+                  onChange={(value: string) => {
+                    router.push(`/${workspaceSlug}/projects/${projectId}/pages/${value}`);
+                  }}
+                  title={getPageName(page?.name)}
+                  icon={
+                    <Breadcrumbs.Icon>
+                      <SwitcherIcon logo_props={page.logo_props} LabelIcon={PageIcon} size={16} />
+                    </Breadcrumbs.Icon>
+                  }
+                  isLast
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      </Header.LeftItem>
+      <Header.RightItem>
+        <PageDetailsHeaderExtraActions page={page} storeType={storeType} />
+        <PageHeaderActions page={page} storeType={storeType} />
+      </Header.RightItem>
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+// component
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
+// local components
+import { PageDetailsHeader } from "./header";
+
+export default function ProjectPageDetailsLayout({ children }: { children: React.ReactNode }) {
+  const { workspaceSlug, projectId } = useParams();
+  const { fetchPagesList } = usePageStore(EPageStoreType.PROJECT);
+  // fetching pages list
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_PAGES_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchPagesList(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  return (
+    <>
+      <AppHeader header={<PageDetailsHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+// constants
+import {
+  EPageAccess,
+  EProjectFeatureKey,
+  PROJECT_PAGE_TRACKER_EVENTS,
+  PROJECT_TRACKER_ELEMENTS,
+} from "@plane/constants";
+// plane types
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TPage } from "@plane/types";
+// plane ui
+import { Breadcrumbs, Header } from "@plane/ui";
+// helpers
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// plane web
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
+
+export const PagesListHeader = observer(() => {
+  // states
+  const [isCreatingPage, setIsCreatingPage] = useState(false);
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = useParams();
+  const searchParams = useSearchParams();
+  const pageType = searchParams.get("type");
+  // store hooks
+  const { currentProjectDetails, loader } = useProject();
+  const { canCurrentUserCreatePage, createPage } = usePageStore(EPageStoreType.PROJECT);
+  // handle page create
+  const handleCreatePage = async () => {
+    setIsCreatingPage(true);
+
+    const payload: Partial<TPage> = {
+      access: pageType === "private" ? EPageAccess.PRIVATE : EPageAccess.PUBLIC,
+    };
+
+    await createPage(payload)
+      .then((res) => {
+        captureSuccess({
+          eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
+          payload: {
+            id: res?.id,
+            state: "SUCCESS",
+          },
+        });
+        const pageId = `/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages/${res?.id}`;
+        router.push(pageId);
+      })
+      .catch((err) => {
+        captureError({
+          eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
+          payload: {
+            state: "ERROR",
+          },
+        });
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.data?.error || "Page could not be created. Please try again.",
+        });
+      })
+      .finally(() => setIsCreatingPage(false));
+  };
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs isLoading={loader === "init-loader"}>
+          <CommonProjectBreadcrumbs
+            workspaceSlug={workspaceSlug?.toString() ?? ""}
+            projectId={currentProjectDetails?.id?.toString() ?? ""}
+            featureKey={EProjectFeatureKey.PAGES}
+            isLast
+          />
+        </Breadcrumbs>
+      </Header.LeftItem>
+      {canCurrentUserCreatePage ? (
+        <Header.RightItem>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={handleCreatePage}
+            loading={isCreatingPage}
+            data-ph-element={PROJECT_TRACKER_ELEMENTS.CREATE_HEADER_BUTTON}
+          >
+            {isCreatingPage ? "Adding" : "Add page"}
+          </Button>
+        </Header.RightItem>
+      ) : (
+        <></>
+      )}
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import type { ReactNode } from "react";
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+// local components
+import { PagesListHeader } from "./header";
+
+export default function ProjectPagesListLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<PagesListHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams, useSearchParams } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TPageNavigationTabs } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { PagesListRoot } from "@/components/pages/list/root";
+import { PagesListView } from "@/components/pages/pages-list-view";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
+
+const ProjectPagesPage = observer(() => {
+  // router
+  const router = useAppRouter();
+  const searchParams = useSearchParams();
+  const type = searchParams.get("type");
+  const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { getProjectById, currentProjectDetails } = useProject();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name ? `${project?.name} - Pages` : undefined;
+  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/pages" });
+
+  const currentPageType = (): TPageNavigationTabs => {
+    const pageType = type?.toString();
+    if (pageType === "private") return "private";
+    if (pageType === "archived") return "archived";
+    return "public";
+  };
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  // No access to cycle
+  if (currentProjectDetails?.page_view === false)
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <DetailedEmptyState
+          title={t("disabled_project.empty_state.page.title")}
+          description={t("disabled_project.empty_state.page.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("disabled_project.empty_state.page.primary_button.text"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/settings/projects/${projectId}/features`);
+            },
+            disabled: !canPerformEmptyStateActions,
+          }}
+        />
+      </div>
+    );
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <PagesListView
+        pageType={currentPageType()}
+        projectId={projectId.toString()}
+        storeType={EPageStoreType.PROJECT}
+        workspaceSlug={workspaceSlug.toString()}
+      >
+        <PagesListRoot pageType={currentPageType()} storeType={EPageStoreType.PROJECT} />
+      </PagesListView>
+    </>
+  );
+});
+
+export default ProjectPagesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Lock } from "lucide-react";
+// plane constants
+import {
+  EIssueFilterType,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  EProjectFeatureKey,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
+// types
+import { Button } from "@plane/propel/button";
+import { ViewsIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { EIssuesStoreType, EViewAccess, EIssueLayoutTypes } from "@plane/types";
+// ui
+import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/ui";
+// components
+import { SwitcherIcon, SwitcherLabel } from "@/components/common/switcher-label";
+import { DisplayFiltersSelection, FiltersDropdown, LayoutSelection } from "@/components/issues/issue-layouts/filters";
+// constants
+import { ViewQuickActions } from "@/components/views/quick-actions";
+import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-toggle";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectView } from "@/hooks/store/use-project-view";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web
+import { useAppRouter } from "@/hooks/use-app-router";
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+
+export const ProjectViewIssuesHeader: React.FC = observer(() => {
+  // refs
+  const parentRef = useRef(null);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId, viewId: routerViewId } = useParams();
+  const viewId = routerViewId ? routerViewId.toString() : undefined;
+  // store hooks
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+
+  const { currentProjectDetails, loader } = useProject();
+  const { projectViewIds, getViewById } = useProjectView();
+
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: EIssueLayoutTypes) => {
+      if (!workspaceSlug || !projectId || !viewId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_FILTERS,
+        { layout: layout },
+        viewId.toString()
+      );
+    },
+    [workspaceSlug, projectId, viewId, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId || !viewId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_FILTERS,
+        updatedDisplayFilter,
+        viewId.toString()
+      );
+    },
+    [workspaceSlug, projectId, viewId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId || !viewId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_PROPERTIES,
+        property,
+        viewId.toString()
+      );
+    },
+    [workspaceSlug, projectId, viewId, updateFilters]
+  );
+
+  const viewDetails = viewId ? getViewById(viewId.toString()) : null;
+
+  const canUserCreateIssue = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  if (!viewDetails) return;
+
+  const switcherOptions = projectViewIds
+    ?.map((id) => {
+      const _view = id === viewId ? viewDetails : getViewById(id);
+      if (!_view) return;
+      return {
+        value: _view.id,
+        query: _view.name,
+        content: <SwitcherLabel logo_props={_view.logo_props} name={_view.name} LabelIcon={ViewsIcon} />,
+      };
+    })
+    .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs isLoading={loader === "init-loader"}>
+          <CommonProjectBreadcrumbs
+            workspaceSlug={workspaceSlug?.toString() ?? ""}
+            projectId={projectId?.toString() ?? ""}
+            featureKey={EProjectFeatureKey.VIEWS}
+          />
+
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbNavigationSearchDropdown
+                selectedItem={viewId?.toString() ?? ""}
+                navigationItems={switcherOptions}
+                onChange={(value: string) => {
+                  router.push(`/${workspaceSlug}/projects/${projectId}/views/${value}`);
+                }}
+                title={viewDetails?.name}
+                icon={
+                  <Breadcrumbs.Icon>
+                    <SwitcherIcon logo_props={viewDetails.logo_props} LabelIcon={ViewsIcon} size={16} />
+                  </Breadcrumbs.Icon>
+                }
+                isLast
+              />
+            }
+          />
+        </Breadcrumbs>
+
+        {viewDetails?.access === EViewAccess.PRIVATE ? (
+          <div className="cursor-default text-custom-text-300">
+            <Tooltip tooltipContent={"Private"}>
+              <Lock className="h-4 w-4" />
+            </Tooltip>
+          </div>
+        ) : (
+          <></>
+        )}
+      </Header.LeftItem>
+      <Header.RightItem className="items-center">
+        <>
+          {!viewDetails.is_locked && (
+            <LayoutSelection
+              layouts={[
+                EIssueLayoutTypes.LIST,
+                EIssueLayoutTypes.KANBAN,
+                EIssueLayoutTypes.CALENDAR,
+                EIssueLayoutTypes.SPREADSHEET,
+                EIssueLayoutTypes.GANTT,
+              ]}
+              onChange={(layout) => handleLayoutChange(layout)}
+              selectedLayout={activeLayout}
+            />
+          )}
+          {viewId && <WorkItemFiltersToggle entityType={EIssuesStoreType.PROJECT_VIEW} entityId={viewId} />}
+          {!viewDetails.is_locked && (
+            <FiltersDropdown title="Display" placement="bottom-end">
+              <DisplayFiltersSelection
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.layoutOptions[activeLayout] : undefined
+                }
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                displayProperties={issueFilters?.displayProperties ?? {}}
+                handleDisplayPropertiesUpdate={handleDisplayProperties}
+                cycleViewDisabled={!currentProjectDetails?.cycle_view}
+                moduleViewDisabled={!currentProjectDetails?.module_view}
+              />
+            </FiltersDropdown>
+          )}
+        </>
+        {canUserCreateIssue ? (
+          <Button
+            onClick={() => {
+              toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
+            }}
+            data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.PROJECT_VIEW}
+            size="sm"
+          >
+            Add work item
+          </Button>
+        ) : (
+          <></>
+        )}
+        <div className="hidden md:block">
+          <ViewQuickActions
+            parentRef={parentRef}
+            customClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
+            projectId={projectId.toString()}
+            view={viewDetails}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        </div>
+      </Header.RightItem>
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// components
+import { EmptyState } from "@/components/common/empty-state";
+import { PageHead } from "@/components/core/page-title";
+import { ProjectViewLayoutRoot } from "@/components/issues/issue-layouts/roots/project-view-layout-root";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectView } from "@/hooks/store/use-project-view";
+// assets
+import { useAppRouter } from "@/hooks/use-app-router";
+import emptyView from "@/public/empty-state/view.svg";
+
+const ProjectViewIssuesPage = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId, viewId } = useParams();
+  // store hooks
+  const { fetchViewDetails, getViewById } = useProjectView();
+  const { getProjectById } = useProject();
+  // derived values
+  const projectView = viewId ? getViewById(viewId.toString()) : undefined;
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name && projectView?.name ? `${project?.name} - ${projectView?.name}` : undefined;
+
+  const { error } = useSWR(
+    workspaceSlug && projectId && viewId ? `VIEW_DETAILS_${viewId.toString()}` : null,
+    workspaceSlug && projectId && viewId
+      ? () => fetchViewDetails(workspaceSlug.toString(), projectId.toString(), viewId.toString())
+      : null
+  );
+
+  if (error) {
+    return (
+      <EmptyState
+        image={emptyView}
+        title="View does not exist"
+        description="The view you are looking for does not exist or you don't have permission to view it."
+        primaryButton={{
+          text: "View other views",
+          onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/views`),
+        }}
+      />
+    );
+  }
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <ProjectViewLayoutRoot />
+    </>
+  );
+});
+
+export default ProjectViewIssuesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+// local components
+import { ProjectViewIssuesHeader } from "./[viewId]/header";
+
+export default function ProjectViewIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectViewIssuesHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// ui
+import { EProjectFeatureKey, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { ViewListHeader } from "@/components/views/view-list-header";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+// plane web
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+
+export const ProjectViewsHeader = observer(() => {
+  const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
+  // store hooks
+  const { toggleCreateViewModal } = useCommandPalette();
+  const { loader } = useProject();
+
+  return (
+    <>
+      <Header>
+        <Header.LeftItem>
+          <Breadcrumbs isLoading={loader === "init-loader"}>
+            <CommonProjectBreadcrumbs
+              workspaceSlug={workspaceSlug?.toString() ?? ""}
+              projectId={projectId?.toString() ?? ""}
+              featureKey={EProjectFeatureKey.VIEWS}
+              isLast
+            />
+          </Breadcrumbs>
+        </Header.LeftItem>
+        <Header.RightItem>
+          <ViewListHeader />
+          <div>
+            <Button
+              data-ph-element={PROJECT_VIEW_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
+              variant="primary"
+              size="sm"
+              onClick={() => toggleCreateViewModal(true)}
+            >
+              Add view
+            </Button>
+          </div>
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+// local components
+import { ProjectViewsHeader } from "./header";
+import { ViewMobileHeader } from "./mobile-header";
+
+export default function ProjectViewsListLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectViewsHeader />} mobileHeader={<ViewMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { observer } from "mobx-react";
+// icons
+import { ChevronDown, ListFilter } from "lucide-react";
+// components
+import { Row } from "@plane/ui";
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { ViewFiltersSelection } from "@/components/views/filters/filter-selection";
+import { ViewOrderByDropdown } from "@/components/views/filters/order-by";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectView } from "@/hooks/store/use-project-view";
+
+export const ViewMobileHeader = observer(() => {
+  // store hooks
+  const { filters, updateFilters } = useProjectView();
+  const {
+    project: { projectMemberIds },
+  } = useMember();
+
+  return (
+    <>
+      <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
+        <Row className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+          <ViewOrderByDropdown
+            sortBy={filters.sortBy}
+            sortKey={filters.sortKey}
+            onChange={(val) => {
+              if (val.key) updateFilters("sortKey", val.key);
+              if (val.order) updateFilters("sortBy", val.order);
+            }}
+            isMobile
+          />
+        </Row>
+        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+          <FiltersDropdown
+            icon={<ListFilter className="h-3 w-3" />}
+            title="Filters"
+            placement="bottom-end"
+            isFiltersApplied={false}
+            menuButton={
+              <Row className="flex items-center text-sm text-custom-text-200">
+                Filters
+                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
+              </Row>
+            }
+          >
+            <ViewFiltersSelection
+              filters={filters}
+              handleFiltersUpdate={updateFilters}
+              memberIds={projectMemberIds ?? undefined}
+            />
+          </FiltersDropdown>
+        </div>
+      </div>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { EViewAccess, TViewFilterProps } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+import { Header, EHeaderVariant } from "@plane/ui";
+import { calculateTotalFilters } from "@plane/utils";
+import { PageHead } from "@/components/core/page-title";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { ViewAppliedFiltersList } from "@/components/views/applied-filters";
+import { ProjectViewsList } from "@/components/views/views-list";
+// constants
+// helpers
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectView } from "@/hooks/store/use-project-view";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+const ProjectViewsPage = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // store
+  const { getProjectById, currentProjectDetails } = useProject();
+  const { filters, updateFilters, clearAllFilters } = useProjectView();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name ? `${project?.name} - Views` : undefined;
+  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/views" });
+
+  const handleRemoveFilter = useCallback(
+    (key: keyof TViewFilterProps, value: string | EViewAccess | null) => {
+      let newValues = filters.filters?.[key];
+
+      if (key === "favorites") {
+        newValues = !!value;
+      }
+      if (Array.isArray(newValues)) {
+        if (!value) newValues = [];
+        else newValues = newValues.filter((val) => val !== value) as string[];
+      }
+
+      updateFilters("filters", { [key]: newValues });
+    },
+    [filters.filters, updateFilters]
+  );
+
+  const isFiltersApplied = calculateTotalFilters(filters?.filters ?? {}) !== 0;
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  // No access to
+  if (currentProjectDetails?.issue_views_view === false)
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <DetailedEmptyState
+          title={t("disabled_project.empty_state.view.title")}
+          description={t("disabled_project.empty_state.view.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("disabled_project.empty_state.view.primary_button.text"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/settings/projects/${projectId}/features`);
+            },
+            disabled: !canPerformEmptyStateActions,
+          }}
+        />
+      </div>
+    );
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      {isFiltersApplied && (
+        <Header variant={EHeaderVariant.TERNARY}>
+          <ViewAppliedFiltersList
+            appliedFilters={filters.filters ?? {}}
+            handleClearAllFilters={clearAllFilters}
+            handleRemoveFilter={handleRemoveFilter}
+            alwaysAllowEditing
+          />
+        </Header>
+      )}
+      <ProjectViewsList />
+    </>
+  );
+});
+
+export default ProjectViewsPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import type { ReactNode } from "react";
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+// local components
+import { ProjectsListHeader } from "@/plane-web/components/projects/header";
+import { ProjectsListMobileHeader } from "@/plane-web/components/projects/mobile-header";
+export default function ProjectListLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectsListHeader />} mobileHeader={<ProjectsListMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx

@@ -0,0 +1,4 @@
+import { ProjectPageRoot } from "@/plane-web/components/projects/page";
+
+const ProjectsPage = () => <ProjectPageRoot />;
+export default ProjectsPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useParams } from "next/navigation";
+// plane web layouts
+import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+
+const ProjectDetailLayout = ({ children }: { children: ReactNode }) => {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  return (
+    <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
+      {children}
+    </ProjectAuthWrapper>
+  );
+};
+
+export default ProjectDetailLayout;

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/layout.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import type { ReactNode } from "react";
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+// local components
+import { ProjectsListHeader } from "@/plane-web/components/projects/header";
+import { ProjectsListMobileHeader } from "@/plane-web/components/projects/mobile-header";
+export default function ProjectListLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectsListHeader />} mobileHeader={<ProjectsListMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/page.tsx

@@ -0,0 +1,4 @@
+import { ProjectPageRoot } from "@/plane-web/components/projects/page";
+
+const ProjectsPage = () => <ProjectPageRoot />;
+export default ProjectsPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx

@@ -0,0 +1,42 @@
+import type { FC } from "react";
+import { isEmpty } from "lodash-es";
+import { observer } from "mobx-react";
+// plane helpers
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+// components
+import { SidebarWrapper } from "@/components/sidebar/sidebar-wrapper";
+import { SidebarFavoritesMenu } from "@/components/workspace/sidebar/favorites/favorites-menu";
+import { SidebarProjectsList } from "@/components/workspace/sidebar/projects-list";
+import { SidebarQuickActions } from "@/components/workspace/sidebar/quick-actions";
+import { SidebarMenuItems } from "@/components/workspace/sidebar/sidebar-menu-items";
+// hooks
+import { useFavorite } from "@/hooks/store/use-favorite";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web components
+import { SidebarTeamsList } from "@/plane-web/components/workspace/sidebar/teams-sidebar-list";
+
+export const AppSidebar: FC = observer(() => {
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { groupedFavorites } = useFavorite();
+
+  // derived values
+  const canPerformWorkspaceMemberActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  const isFavoriteEmpty = isEmpty(groupedFavorites);
+
+  return (
+    <SidebarWrapper title="Projects" quickActions={<SidebarQuickActions />}>
+      <SidebarMenuItems />
+      {/* Favorites Menu */}
+      {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}
+      {/* Teams List */}
+      <SidebarTeamsList />
+      {/* Projects List */}
+      <SidebarProjectsList />
+    </SidebarWrapper>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// plane imports
+import { HEADER_GITHUB_ICON, GITHUB_REDIRECTED_TRACKER_EVENT } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// helpers
+import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
+// public imports
+import githubBlackImage from "@/public/logos/github-black.png";
+import githubWhiteImage from "@/public/logos/github-white.png";
+
+export const StarUsOnGitHubLink = () => {
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { resolvedTheme } = useTheme();
+  const imageSrc = resolvedTheme === "dark" ? githubWhiteImage : githubBlackImage;
+
+  return (
+    <a
+      aria-label={t("home.star_us_on_github")}
+      onClick={() =>
+        captureElementAndEvent({
+          element: {
+            elementName: HEADER_GITHUB_ICON,
+          },
+          event: {
+            eventName: GITHUB_REDIRECTED_TRACKER_EVENT,
+            state: "SUCCESS",
+          },
+        })
+      }
+      className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
+      href="https://github.com/makeplane/plane"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Image src={imageSrc} height={16} width={16} alt="GitHub Logo" aria-hidden="true" />
+      <span className="hidden text-xs font-medium sm:hidden md:block">{t("home.star_us_on_github")}</span>
+    </a>
+  );
+};

apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { Button } from "@plane/propel/button";
+import { RecentStickyIcon } from "@plane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { StickySearch } from "@/components/stickies/modal/search";
+import { useStickyOperations } from "@/components/stickies/sticky/use-operations";
+// hooks
+import { useSticky } from "@/hooks/use-stickies";
+
+export const WorkspaceStickyHeader = observer(() => {
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { creatingSticky, toggleShowNewSticky } = useSticky();
+  const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() });
+
+  return (
+    <>
+      <Header>
+        <Header.LeftItem>
+          <div className="flex items-center gap-2.5">
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink
+                    label={`Stickies`}
+                    icon={<RecentStickyIcon className="size-5 rotate-90 text-custom-text-200" />}
+                  />
+                }
+              />
+            </Breadcrumbs>
+          </div>
+        </Header.LeftItem>
+
+        <Header.RightItem>
+          <StickySearch />
+          <Button
+            variant="primary"
+            size="sm"
+            className="items-center gap-1"
+            onClick={() => {
+              toggleShowNewSticky(true);
+              stickyOperations.create();
+            }}
+            loading={creatingSticky}
+          >
+            Add sticky
+          </Button>
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/layout.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { WorkspaceStickyHeader } from "./header";
+
+export default function WorkspaceStickiesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<WorkspaceStickyHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { PageHead } from "@/components/core/page-title";
+import { StickiesInfinite } from "@/components/stickies/layout/stickies-infinite";
+
+export default function WorkspaceStickiesPage() {
+  return (
+    <>
+      <PageHead title="Your stickies" />
+      <div className="relative h-full w-full overflow-hidden overflow-y-auto">
+        <StickiesInfinite />
+      </div>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "@plane/constants";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { AllIssueLayoutRoot } from "@/components/issues/issue-layouts/roots/all-issue-layout-root";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+const GlobalViewIssuesPage = observer(() => {
+  // router
+  const { globalViewId } = useParams();
+  // store hooks
+  const { currentWorkspace } = useWorkspace();
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+
+  // derived values
+  const defaultView = DEFAULT_GLOBAL_VIEWS_LIST.find((view) => view.key === globalViewId);
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - All Views` : undefined;
+
+  // handlers
+  const toggleLoading = (value: boolean) => setIsLoading(value);
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <AllIssueLayoutRoot isDefaultView={!!defaultView} isLoading={isLoading} toggleLoading={toggleLoading} />
+    </>
+  );
+});
+
+export default GlobalViewIssuesPage;

apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import {
+  EIssueFilterType,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  GLOBAL_VIEW_TRACKER_ELEMENTS,
+  DEFAULT_GLOBAL_VIEWS_LIST,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { ViewsIcon } from "@plane/propel/icons";
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, ICustomSearchSelectOption } from "@plane/types";
+import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
+import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SwitcherLabel } from "@/components/common/switcher-label";
+import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-toggle";
+import { DefaultWorkspaceViewQuickActions } from "@/components/workspace/views/default-view-quick-action";
+import { CreateUpdateWorkspaceViewModal } from "@/components/workspace/views/modal";
+import { WorkspaceViewQuickActions } from "@/components/workspace/views/quick-action";
+// hooks
+import { useGlobalView } from "@/hooks/store/use-global-view";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { GlobalViewLayoutSelection } from "@/plane-web/components/views/helper";
+
+export const GlobalIssuesHeader = observer(() => {
+  // states
+  const [createViewModal, setCreateViewModal] = useState(false);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, globalViewId: routerGlobalViewId } = useParams();
+  const globalViewId = routerGlobalViewId ? routerGlobalViewId.toString() : undefined;
+  // store hooks
+  const {
+    issuesFilter: { filters, updateFilters },
+  } = useIssues(EIssuesStoreType.GLOBAL);
+  const { getViewDetailsById, currentWorkspaceViews } = useGlobalView();
+  const { t } = useTranslation();
+
+  const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined;
+
+  const activeLayout = issueFilters?.displayFilters?.layout;
+  const viewDetails = globalViewId ? getViewDetailsById(globalViewId) : undefined;
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !globalViewId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        updatedDisplayFilter,
+        globalViewId
+      );
+    },
+    [workspaceSlug, updateFilters, globalViewId]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !globalViewId) return;
+      updateFilters(workspaceSlug.toString(), undefined, EIssueFilterType.DISPLAY_PROPERTIES, property, globalViewId);
+    },
+    [workspaceSlug, updateFilters, globalViewId]
+  );
+
+  const handleLayoutChange = useCallback(
+    (layout: EIssueLayoutTypes) => {
+      if (!workspaceSlug || !globalViewId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        { layout: layout },
+        globalViewId
+      );
+    },
+    [workspaceSlug, updateFilters, globalViewId]
+  );
+
+  const isLocked = viewDetails?.is_locked;
+
+  const isDefaultView = DEFAULT_GLOBAL_VIEWS_LIST.find((view) => view.key === globalViewId);
+
+  const defaultViewDetails = DEFAULT_GLOBAL_VIEWS_LIST.find((view) => view.key === globalViewId);
+
+  const defaultOptions = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => ({
+    value: view.key,
+    query: view.key,
+    content: <SwitcherLabel name={t(view.i18n_label)} LabelIcon={ViewsIcon} />,
+  }));
+
+  const workspaceOptions = (currentWorkspaceViews || []).map((view) => {
+    const _view = getViewDetailsById(view);
+    if (!_view) return;
+    return {
+      value: _view.id,
+      query: _view.name,
+      content: <SwitcherLabel name={_view.name} LabelIcon={ViewsIcon} />,
+    };
+  });
+
+  const switcherOptions = [...defaultOptions, ...workspaceOptions].filter(
+    (option) => option !== undefined
+  ) as ICustomSearchSelectOption[];
+  const currentLayoutFilters = useMemo(() => {
+    const layout = activeLayout ?? EIssueLayoutTypes.SPREADSHEET;
+    return ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.layoutOptions[layout];
+  }, [activeLayout]);
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
+      <Header>
+        <Header.LeftItem>
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink label={t("views")} icon={<ViewsIcon className="h-4 w-4 text-custom-text-300" />} />
+              }
+            />
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbNavigationSearchDropdown
+                  selectedItem={globalViewId?.toString() || ""}
+                  navigationItems={switcherOptions}
+                  onChange={(value: string) => {
+                    router.push(`/${workspaceSlug}/workspace-views/${value}`);
+                  }}
+                  title={viewDetails?.name ?? t(defaultViewDetails?.i18n_label ?? "")}
+                  icon={
+                    <Breadcrumbs.Icon>
+                      <ViewsIcon className="size-4 flex-shrink-0 text-custom-text-300" />
+                    </Breadcrumbs.Icon>
+                  }
+                  isLast
+                />
+              }
+              isLast
+            />
+          </Breadcrumbs>
+        </Header.LeftItem>
+
+        <Header.RightItem className="items-center">
+          {!isLocked && (
+            <GlobalViewLayoutSelection
+              onChange={handleLayoutChange}
+              selectedLayout={activeLayout ?? EIssueLayoutTypes.SPREADSHEET}
+              workspaceSlug={workspaceSlug.toString()}
+            />
+          )}
+          {globalViewId && <WorkItemFiltersToggle entityType={EIssuesStoreType.GLOBAL} entityId={globalViewId} />}
+          {!isLocked && (
+            <FiltersDropdown title={t("common.display")} placement="bottom-end">
+              <DisplayFiltersSelection
+                layoutDisplayFiltersOptions={currentLayoutFilters}
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                displayProperties={issueFilters?.displayProperties ?? {}}
+                handleDisplayPropertiesUpdate={handleDisplayProperties}
+              />
+            </FiltersDropdown>
+          )}
+
+          <Button
+            variant="primary"
+            size="sm"
+            data-ph-element={GLOBAL_VIEW_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
+            onClick={() => setCreateViewModal(true)}
+          >
+            {t("workspace_views.add_view")}
+          </Button>
+          <div className="hidden md:block">
+            {viewDetails && <WorkspaceViewQuickActions workspaceSlug={workspaceSlug?.toString()} view={viewDetails} />}
+            {isDefaultView && defaultViewDetails && (
+              <DefaultWorkspaceViewQuickActions workspaceSlug={workspaceSlug?.toString()} view={defaultViewDetails} />
+            )}
+          </div>
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/layout.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { GlobalIssuesHeader } from "./header";
+
+export default function GlobalIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<GlobalIssuesHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { Search } from "lucide-react";
+// plane imports
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Input } from "@plane/ui";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { GlobalDefaultViewListItem } from "@/components/workspace/views/default-view-list-item";
+import { GlobalViewsList } from "@/components/workspace/views/views-list";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+const WorkspaceViewsPage = observer(() => {
+  const [query, setQuery] = useState("");
+  // store
+  const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - All Views` : undefined;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="flex flex-col h-full w-full overflow-hidden">
+        <div className="flex h-11 w-full items-center gap-2.5  px-5 py-3 overflow-hidden border-b border-custom-border-200">
+          <Search className="text-custom-text-200" size={14} strokeWidth={2} />
+          <Input
+            className="w-full bg-transparent !p-0 text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search"
+            mode="true-transparent"
+          />
+        </div>
+        <div className="flex flex-col h-full w-full vertical-scrollbar scrollbar-lg">
+          {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => t(v.i18n_label).toLowerCase().includes(query.toLowerCase())).map(
+            (option) => (
+              <GlobalDefaultViewListItem key={option.key} view={option} />
+            )
+          )}
+          <GlobalViewsList searchQuery={query} />
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default WorkspaceViewsPage;

apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { CommandPalette } from "@/components/command-palette";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { SettingsHeader } from "@/components/settings/header";
+import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
+import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
+
+export default function SettingsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <AuthenticationWrapper>
+      <WorkspaceAuthWrapper>
+        <CommandPalette />
+        <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+            {/* Header */}
+            <SettingsHeader />
+            {/* Content */}
+            <ContentWrapper className="p-page-x md:flex w-full">
+              <div className="w-full h-full overflow-hidden">{children}</div>
+            </ContentWrapper>
+          </main>
+        </div>
+      </WorkspaceAuthWrapper>
+    </AuthenticationWrapper>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/page.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { observer } from "mobx-react";
+// component
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+// hooks
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web components
+import { BillingRoot } from "@/plane-web/components/workspace/billing";
+
+const BillingSettingsPage = observer(() => {
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Billing & Plans` : undefined;
+
+  if (workspaceUserInfo && !canPerformWorkspaceAdminActions) {
+    return <NotAuthorizedView section="settings" className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper size="lg">
+      <PageHead title={pageTitle} />
+      <BillingRoot />
+    </SettingsContentWrapper>
+  );
+});
+
+export default BillingSettingsPage;

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import ExportGuide from "@/components/exporter/guide";
+// helpers
+// hooks
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import SettingsHeading from "@/components/settings/heading";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+
+const ExportsPage = observer(() => {
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
+
+  // derived values
+  const canPerformWorkspaceMemberActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace.name} - ${t("workspace_settings.settings.exports.title")}`
+    : undefined;
+
+  // if user is not authorized to view this page
+  if (workspaceUserInfo && !canPerformWorkspaceMemberActions) {
+    return <NotAuthorizedView section="settings" className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper size="lg">
+      <PageHead title={pageTitle} />
+      <div
+        className={cn("w-full", {
+          "opacity-60": !canPerformWorkspaceMemberActions,
+        })}
+      >
+        <SettingsHeading
+          title={t("workspace_settings.settings.exports.heading")}
+          description={t("workspace_settings.settings.exports.description")}
+        />
+        <ExportGuide />
+      </div>
+    </SettingsContentWrapper>
+  );
+});
+
+export default ExportsPage;

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import IntegrationGuide from "@/components/integration/guide";
+// hooks
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SettingsHeading } from "@/components/settings/heading";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+
+const ImportsPage = observer(() => {
+  // router
+  // store hooks
+  const { currentWorkspace } = useWorkspace();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Imports` : undefined;
+
+  if (!isAdmin) return <NotAuthorizedView section="settings" className="h-auto" />;
+
+  return (
+    <SettingsContentWrapper size="lg">
+      <PageHead title={pageTitle} />
+      <section className="w-full">
+        <SettingsHeading title="Imports" />
+        <IntegrationGuide />
+      </section>
+    </SettingsContentWrapper>
+  );
+});
+
+export default ImportsPage;